php知识积累

js事件代理

2017-08-28  本文已影响14人  hey_沙子

事件代理在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);
            ......
         }
     }
});
上一篇 下一篇

猜你喜欢

热点阅读