浅谈事件绑定与事件委托机制

事件绑定与事件委托机制

事件绑定顾名思义则是在元素标签上绑定相应的行为事件。事件委托也就是说，自身元素的行为事件交由其他父类元素去监管实现。具体js代码我们可以看下面代码实现，

来帮助初学者彻底了解什么是事件绑定与委托。

 

结构层（HTML）

<ul calss="parent">

　　<li class="child"></li>

　　<li class="child"></li>

　　<li class="child"></li>

　　<li class="child"></li>

</ul>

行为层（JavaScript 本文采用ES5标准编写）

(function(){　

//简单的事件委托工具，未考虑IE6下的兼容性，仅供理解委托事物

window.EventUtil = {

　　hadelrs:{},

　　　　on:function(dom,dom1,event,fn){

　　　　//判断是否存在委托，不存在则创建一个dom1的委托事件函数池
　　　　if（this.hadelrs[dom1] ）{
　　　　　　this.hadelrs[dom1] .push(fn);

　　　　} else {
　　　　　　this.hadelrs[dom1] = [fn];
　　　　} 

　　　　//监听受委托的dom根据对应的事件触发对象，来触发dom1事件函数

　　　　document.querySelector( dom) .addEventListener(event, function(evn){

　　　　　　//判断 事件触发是否来源于委托 元素dom1

　　　　　　if(evn.target == document.querySelector(dom1)) {

　　　　　　　　for(var i in EventUtil.hadelrs[dom1]){
　　　　　　　　　　try {

　　　　　　　　　　　 EventUtil.hadelrs[dom1][i]( event);　//执行事件函数

　　　　　　　　　　} catch(err){
　　　　　　　　　　　　console.warn(err);

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　} )

　　},

　　off: function(dom1,fn){

　　　　if(EventUtil.hadelrs[dom1]){

　　　　　　for(var i in EventUtil.hadelrs[dom1]){

　　　　　　　　if(EventUtil.hadelrs[dom1][i] == fn){

　　　　　　　　　　EventUtil.hadelrs[dom1].splice(i,1);  //事件函数池移除事件

　　　　　　　　　　breack;

　　　　　　　　}

　　　　　}

　　　　}

　　}

}}()）

 

//调用实现

EventUtil.on('.parent','.parent li',click,function(e){console.log('----------li--------')})

 

转载于:https://www.cnblogs.com/zerox-cn/p/6074496.html