【JavaScript】事件代理和事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

南栀~zmt

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量938

点赞数

分类专栏： JavaScript基础文章标签： javascript

原文链接：https://www.cnblogs.com/goloving/p/7266237.html

版权

JavaScript基础专栏收录该内容

48 篇文章 7 订阅

订阅专栏

文章目录

1. 概述
2. 为什么要用事件委托
3. 事件委托的原理
4. 事件委托的实现

1. 概述

为什么叫事件委托？它还有一个名字叫事件代理。

JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

借快递来解释这个现象：

有三个同事预计会在周一收到快递。
有两种签收办法：

三个人在公司门口等快递
委托给前台代为签收。

现实当中，我们大多都采用委托的方案。
前台收到快递后，判断收件人是谁，按照收件人的要求签收。

这里其实有两层意思：

现在委托前台的同事可以代为签收，即程序中现有的dom节点有事件。
新员工的快递也可以被前台签收，即程序中新添加的dom节点也有事件。

2. 为什么要用事件委托

一般来说，dom都有事件处理程序，我们可以直接给它设置事件处理程序就好。

但如果很多的dom需要添加事件处理呢？比如说我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，遍历所有的li，给每一个添加事件处理程序，但是这么做会有什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断地与dom节点进行交互，访问dom的数量越多，引起浏览器回流和重绘的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。

如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢。

如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

3. 事件委托的原理

事件委托是利用事件的冒泡原理来实现的。

何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a。
比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

4. 事件委托的实现

1、在介绍事件委托的方法之前，我们先来看一段一般方法的例子：子节点实现相同的功能，实现功能是点击li，弹出123：

<body>
    <ul id="uli">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

<script>
    window.onload = function() {
        let ul = document.getElementById('uli');
        let ali = document.querySelectorAll('li');
        for(let i=0;i<ali.length;i++) {
            ali[i].onclick = function() {
                alert(123);
            }
        }
    }
</script>
</body>

使用事件委托的方式：

<body>
    <ul id="uli">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

<script>
    window.onload = function() {
        let ul = document.getElementById('uli');
        ul.onclick = function() {
            alert(123);
        }
    }
</script>
</body>

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发。

当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement。

<body>
    <ul id="uli">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

<script>
    window.onload = function() {
        let ul = document.getElementById('uli');
        ul.onclick = function(ev) {
            let ev1 = ev || window.ev;
            let target = ev1.target || ev1.srcElement;
            console.log(target);
            if(target.nodeName.toLowerCase() === 'li'){
                alert(123);
                alert(target.innerHTML);
            }
        }
    }
</script>

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

2、上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

<body>
    <div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

<script>
    window.onload = function() {
        var Add = document.getElementById("add");
        var Remove = document.getElementById("remove");
        var Move = document.getElementById("move");
        var Select = document.getElementById("select");
        
        Add.onclick = function(){
            alert('添加');
        };
        Remove.onclick = function(){
            alert('删除');
        };
        Move.onclick = function(){
            alert('移动');
        };
        Select.onclick = function(){
            alert('选择');
        }
    }
</script>

使用事件委托：

<body>
    <div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

<script>
    window.onload = function() {
        var box = document.getElementById('box');
        box.onclick = function(ev) {
            let myEv = ev || window.event;
            let target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() === 'input'){
                switch (target.id) {
                    case 'add':
                        alert('添加');
                        break;
                    case 'remove':
                        alert('删除');
                        break;
                    case 'move':
                        alert('移动');
                        break;
                    case 'select': 
                        alert('选择');
                        break;
                }
            }
        }
    }
</script>

3、现在讲的都是document加载完成的现有dom节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？也就是说，一个新员工来了，他能收到快递吗？

看一下正常的添加节点的方法：现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点。看看子节点会有这个效果吗？

一般做法：

<body>
    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
    </ul>

<script>
    window.onload = function() {
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        var num = 4;

        //鼠标移入变红，移出变白
        for(var i=0; i<aLi.length;i++){
            aLi[i].onmouseover = function(){
                this.style.background = 'red';
            };
            aLi[i].onmouseout = function(){
                this.style.background = '#fff';
            }
        }
        //添加新节点
        oBtn.onclick = function(){
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oUl.appendChild(oLi);
        };
    }
</script>

在这里插入图片描述
这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

<body>
    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
    </ul>

<script>
    window.onload = function() {
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        var num = 4;

        function mHover () {
            //鼠标移入变红，移出变白
            for(var i=0; i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
        }
        mHover ();

        //添加新节点
        oBtn.onclick = function(){
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oUl.appendChild(oLi);
            mHover ();
        };
        
    }
</script>

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？使用事件委托

<body>
    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
    </ul>

<script>
    window.onload = function() {
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        var num = 4;

        oUl.onmouseover = function(ev) {
            let myEv = ev || window.event;
            let target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() === 'li'){
                target.style.background = 'red';
            }
        }
        oUl.onmouseout = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "#fff";
            }
            
        };

        //添加新节点
        oBtn.onclick = function(){
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oUl.appendChild(oLi);
        }; 
    }
</script>