zoukankan      html  css  js  c++  java
  • 事件委托

    做什么?

    事件委托的出现主要是解决监听事件的频繁。 比如, 有一个ul下面有20个li标签, 这个时候你需要监听这个20个li标签,那么直接监听的话肯定是很low的, 而且如果我们进行li标签的删除再添加这种效果, 那么新出现的li标签就没有监听事件咯。 事件委托的机制是利用了冒泡机制, 目前浏览器对触发事件都是:捕获-->向上冒泡, 所以懂了吧? 最开始我还以及委托是一个黑科技, 毕竟删除了元素后再添加也会有触发事件, 不过仔细一想就觉得原来如此。 但如果大家去不用jquery的delegate类似的方法去实现事件委托, 那么肯定会失败呢? 那么这是为什么呢? 这是因为事件委托是由 监听事件特性 + 指定上下文 来完成的, 是比dom层api更高一级实现的特性。看到这里懂了吧

    简陋实现

    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="event">11
            <li>li</li>
            <a>href</a>
        </div>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('event').addEventListener('click', function (event) {
                if (event.target.nodeName.toLowerCase() == 'li') {
                    console.log('li标签事件');
                }
            });
        };
    </script>
    </body>
    </html>



    --------------Stay Hungry,Stay Foolish
  • 相关阅读:
    MYSQL ALTER
    初入园子
    java常用基础(一)
    C语言类型转换
    C++用EGE简单实现别踩白块游戏
    CPP常用库函数以及STL
    至我的新博客
    工厂模式
    pl/sql developer 编码格式设置
    单例模式
  • 原文地址:https://www.cnblogs.com/iksjweb/p/6475125.html
Copyright © 2011-2022 走看看