温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

web前端入门到实战:JavaScript 事件冒泡与事件委托

发布时间:2020-08-07 23:42:07 来源:网络 阅读:219 作者:前端向南 栏目:web开发

事件冒泡

IE的事件流叫做事件冒泡。顾名思义当事件发生后,事件就开始从里向外传播,查看下方代码:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

如果点击页面中的 <div> 元素,那么这个 chick 事件就会按照如下顺序传播:

web前端入门到实战:JavaScript 事件冒泡与事件委托

click 事件 在 直系DOM 树的每一级节点都会发生(自下而上),直到 document 对象。

事件委托

又称事件代理。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个父类事件处理程序,就可以管理某一类型的所有子类元素事件。

<ul id="myList">
    <li id="goSth"></li>
    <li id="doSth"></li>
    <li id="sayHi"></li>
</ul>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

三个<li> 被单击,按照传统方式,会给他们单独添加事件:


    document.getElementById('sayHi').onClick(function(){...})

点击事件不多的情况下还好,若是所有元素都采用这样的方式,结果就会有数不清的代码用于添加事件处理。就好比一万个人全挤到公司前台去拿快递,那场面,蔚为壮观啊!但是把快递放到前台,前台接收,然后分批次派送,就会舒服很多:


    document.getElementById('myList').onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case 'goSth':
                ...
                break;
            case 'doSth':
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式,子元素是带有事件效果的,我们可以发现,当用事件委托的时候,根本就不需要去遍历元素的子节点,只需要给父级元素添加事件就好了,子元素点击,会通过以事件冒泡的方式激活父元素已添加的相同事件,减少了很多 js 对于 dom 的事件操作,占用更少的内存,这大概是事件委托的精髓所在。

所有用到按钮的事件(多数鼠标和键盘事件)都适合采用事件委托。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI