JS-DOM高级事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_44126720/article/details/128772583

一、注册和解绑事件

1.传统注册

事件源.事件类型 = function(){}

特点：注册事件的唯一性

即同一个元素的同一种事件只能设置一个处理函数，最后的处理函数将会覆盖前面注册的处理函数

var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }

2.传统解绑事件

事件源.事件类型 = null

var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }

3.方法监听注册与解绑方式

监听注册

事件源.addEventListener('事件类型',function(){})

特点：同一个元素同一个事件可以注册多个监听器(function),按照顺序依次执行

 divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

监听解绑

事件源.removeEventListener('事件类型',function(){})

注意：事件处理不能使用匿名函数

divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

二、DOM事件流

DOM事件流的原理：

事件流：描述页面接收事物的顺序

事件发生时会在元素节点中间按照特点的顺序传播，这个传播过程即DOM事件流

DOM事件流的三个阶段：

① 捕获阶段：由最顶层DOM节点(Document)逐级向下传播到具体元素的过程

② 当前目标阶段：绑定事件的元素

③ 冒泡阶段：从事件源触发，逐级向上传播到DOM最顶层节点的过程

※注意：

①js代码只能执行捕获或冒泡其中一个阶段

②onclick和attachEvent只能得到冒泡阶段

③addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序

④实际开发中很少使用事件捕获，更关注事件冒泡

⑤有些事件没有冒泡，如onblur、ommouseover、ommouseseleave

三、事件对象

事件源.事件类型 = function(event){}

（1）概念：event即事件对象写到侦听函数的小括号内，当形参看

（2）使用方法：

事件对象有了事件才存在，他是系统给我们自动创建的，不需要我们传递参数，并依次传递给事件监听器

事件对象是我们事件一系列相关数据的集合，跟事件相关的信息

这个事件对象我们可以自己命名，如event、evt、e等等

（3）事件对象常见属性和方法

① e.target:返回的是触发事件的元素，this返回的是绑定事件的元素。

② e.type：返回事件类型，如click，mouseover，不带on

③ e.preventDefault()：阻止默认事件，如不让链接跳转

var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })

（4）e.stopPropagation()：阻止冒泡

var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

注意：this 与 target的区别

this：指向绑定事件的对象(元素)

target:指向触发事件的对象(元素)

四、事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子结点

   <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';


        })