Web API 第3（事件高级）

最新推荐文章于 2024-04-01 14:30:00 发布

hvbv

最新推荐文章于 2024-04-01 14:30:00 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/qq_38830147/article/details/105535306

版权

事件高级

（1）注册事件
有两种方式：传统方式和方法监听注册方式
1，传统注册方式：利用on开头的事件onclick；特点：注册事件的唯一性、同一个事件同一个元素只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；
目标对象.onclick=function()
2，方法监听注册方式：addEventListener（可使用attachEvent代替）；特点：同一个元素可以注册多个监听器，按注册顺序依次执行；
目标对象.addEventListener(' type ' ，function（）)里面的事件类型一定要加引号，不用加on；
目标对象.attachEvent(' type '，function（）)里面的事件类型要加引号，要加on，IE9之前才支持；
（2）删除事件
1，传统方式删除：目标对象.onclick=null；
2，方法监听删除：目标对象.removeEventListener（' click ' ，fn）；
（3）DOM事件流
1，事件流描述的是从页面接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流；
2，分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段；
3，注意：js代码只能执行捕获或者冒泡的一个阶段、onclick和attachEvent只能得到冒泡阶段、addEventListener第三个参数如果为true，表示事件在捕获阶段，如果是false（默认），表示在冒泡阶段，实际开发中更关注事件冒泡；
（5）事件对象
1，概念：写在（）里面的，event对象代表事件的状态，比如鼠标的位置；简单来说就是事件发生后，和事件相关的一系列的信息数据的集合；event属于形参，系统帮我们设定为事件对象，不需要传递实参；
2，属性：e.target返回触发事件的对象、e.type返回事件的类型、e.preventDefault阻止默认行为（让链接不跳转、提交按钮不提交）
3，阻止事件冒泡：stopPropagation（）
（6）事件委托
原理：不是给每个子节点设置事件监听器，而是将监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点；
作用：只操作了一次DOM，提高了程序的性能
例子：

<body>
    <ul>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            //e.target.style.backgroundcolor = 'red';
            alert('xiexie');
        })
    </script>
</body>

例子：事件跟着鼠标走（mousemove）

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            position: absolute;
        }
    </style>
</head>

<body>
    <p>沙雕</p>
    <script>
        var p = document.querySelector('p');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            p.style.left = x + 'px';
            p.style.top = y + 'px';
        })
    </script>
</body>

hvbv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API 第3（事件高级）

事件高级（1）注册事件有两种方式：传统方式和方法监听注册方式1，传统注册方式：利用on开头的事件onclick；特点：注册事件的唯一性、同一个事件同一个元素只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；目标对象.onclick=function()2，方法监听注册方式：addEventListener（可使用attachEvent代替）；特点：同一个元素可以注册多...
复制链接

扫一扫