js事件代理

作者: hey_沙子 | 来源:发表于2017-08-28 19:35 被阅读14次

事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

例如:

我们对对台添加的某个元素添加点击事件,动态添加的onclick事件必须要在append追加完元素之后添加进去才管用。但是有些有些事件,不仅仅是onclick事件就可以解决的,如果在onclick事件中还有$('.normal').each(function(){ })等之类的循环,那么我们单纯的靠onclick则解决不了,因为onclick你定位不到具体的某个类的元素上
开始我是这样写的:
动态生成的元素中写了onclick事件,js中

function  aa(){
  $('.normal').each(function(){
     var _this=$(this);
    console.log('操作你的代码');
  })
}

我发现会输出两次到控制台
那么用事件代理就不会出现这些问题,他的原理是找一个不是动态添加的已有元素添加代理
如下我是给class="newshop"加的代理
给exchangeId添加的点击事件

$('.newshop').click(function (ev) {//.exchangId
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if (target.nodeName.toLowerCase() == 'p') {
        if ($(target).parent('dd').hasClass('exchangId'))   {
            var add = $(target);
            ......
         }
     }
});

相关文章

  • JS写事件代理

    js中的事件委托或是事件代理详解

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • js事件代理

    当我们需要对很多元素添加事件的时候,可以通过将事件添加到他们的父节点来触发处理函数。 example: 我们给每个...

  • js事件代理

    事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节...

  • js事件代理

    事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节...

  • js事件代理

    var oUl = document.getElementById('test');oUl.addEventLis...

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • js事件委托/事件代理

    事件委托就是利用事件冒泡,只指定一个时间处理程序就可以管理某一类型的所有事例。 优点:提高性能 JavaScrip...

  • JS事件委托(事件代理)

    什么是事件委托? 举个例子,我们要实现点击 li 时打印其id 一般我们会给每一个li绑定一个事件处理函数 这种方...

  • js 事件委托 事件代理

    js 事件委托 事件代理 JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序...

网友评论

    本文标题:js事件代理

    本文链接:https://www.haomeiwen.com/subject/dkocdxtx.html