js事件-阿里云开发者社区

开发者社区> 我要学编程> 正文

js事件

简介:
+关注继续查看

JS事件

一、事件的两种绑定方式 *

1、on事件绑定方式

document.onclick = function() {
    console.log("文档点击");
}
// on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法
document.onclick = function() {
    console.log("文档点击");
}
// 事件的移除
document.onclick = null;

2、非on事件绑定方式

document.addEventListener('click', function() {
     console.log("点击1");
})
document.addEventListener('click', function() {
     console.log("点击2");
})
// 非on事件可以同时绑定多个方法,被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);

二、事件参数event *

  • 存放事件信息的回调参数

三、事件的冒泡与默认事件 *

  • 事件的冒泡:父子都具有点击事件,不处理的话,点击子级也会出发父级的点击事件
<body id="body">
       <div id="sup">
        <div id="sub"></div>
    </div>
</body>

<script>
sub.onclick = function (ev) {
    // 方式一
    ev.stopPropagation();
    console.log("sub click");
}
sup.onclick = function (ev) {
    // 方式二
    ev.cancelBubble = true;
    console.log("sup click");
}
body.onclick = function (ev) {
    console.log("body click");
}
</script>
  • 默认事件:取消默认的事件动作,如鼠标右键菜单
  • ev.preventDefault(); | return false;
<body id="body">
       <div id="sup">
        <div id="sub"></div>
    </div>
</body>

<script>
    //默认事件:鼠标右键oncontextmenu
    sub.oncontextmenu = function (ev) {
        ev.preventDefault();
        console.log("sub menu click");
    }

    //父级取消了默认事件,子级都被取消掉了
    body.oncontextmenu = function(ev){
        console.log("body menu click");
        return false;
    }
</script>

四、鼠标事件 *

  • 鼠标事件
onclick:鼠标点击
ondblclick:鼠标双击
onmousedown:鼠标按下
onmousemove:鼠标移动
onmouseup:鼠标抬起
onmouseover:鼠标悬浮 onmouseenter
onmouseout:鼠标移开 onmouseleave
oncontextmenu:鼠标右键
  • 事件参数ev
ev.clientX:点击点X坐标
ev.clientY:点击点Y坐标

五、键盘事件 *

  • 键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
// 绑定的对象: 对象自身不录入文本,绑给document,自身录入文本(表单标签),绑给自身
ev.keyCode
  • 事件参数ev
ev.keyCode:按键编号
ev.altKey:alt特殊按键
ev.ctrlKey:ctrl特殊按键
ev.shiftKey:shift特殊按键
  • 键盘控制平滑运动
<div class="div"></div>
<script>
    var div =document.querySelector('.div');

    var r_able =false;
    var l_able =false;
    var t_able =false;
    var b_able =false;
    setInterval(function () {
        //l_able为假,则后者短路,可以实现if的简写
        l_able&&(div.style.left=div.offsetLeft -3 + 'px');
        t_able&&(div.style.top=div.offsetTop -3 + 'px');
        
        if(r_able){
            div.style.left = div.offsetLeft + 3 + 'px';
        }
        b_able&&(div.style.top=div.offsetTop +3 + 'px');
    },16);

    document.onkeydown = function (ev) {
        switch(ev.keyCode){
            case 39: r_able=true; break;
            case 37: l_able=true; break;
            case 38: t_able=true; break;
            case 40: b_able=true; break;
        }
    }
    document.onkeyup = function (ev) {
        switch(ev.keyCode){
            case 39: r_able=false; break;
            case 37: l_able=false; break;
            case 38: t_able=false; break;
            case 40: b_able=false; break;
        }
    }
</script>

六、表单事件 *

onfocus:获取焦点
onblur:失去焦点
onselect:文本被选中
oninput:值改变
onchange:值改变,且需要在失去焦点后才能触发
onsubmit:表单默认提交事件
<form action="">
    <input type="text" name="usr">
    <button type="submit">提交</button>
</form>
<script>
    var form = document.querySelector('form');
    var ipt=document.querySelector('input');
    var btn =document.querySelector('button');

    ipt.onselect = function () {
        console.log("文本被选中了");
    }
    //值改变就触发
    ipt.oninput=function(){
        console.log("值在改变");
    }
    //键盘抬起就触发
    ipt.onkeyup =function () {
        console.log("值在改变");
    }

    //丢失焦点触发
    ipt.change =function () {
        console.log("值在改变");
    }

    //form的专有事件
    form.onsubmit = function () {
        console.log("提交");
        return false;//取消默认事件
    }
</script>

七、文档事件 *

  • 文档事件由window调用
onload:页面加载成功
onbeforeunload:页面退出或刷新警告,需要设置回调函数返回值,返回值随意

八、图片事件 *

onerror:图片加载失败

九、页面事件 *

onscroll:页面滚动
onresize:页面尺寸调整
window.scrollY:页面下滚距离

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10077 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11612 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9159 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4659 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7496 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22400 0
+关注
我要学编程
热爱学习,愿意接收新事物,有志称为一个互联网大佬
42
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载