javaScript绑定事件委托 demo

Posted 参天树

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript绑定事件委托 demo相关的知识,希望对你有一定的参考价值。

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行。

由此 事件委托 可以优化事件绑定行为、。

事件逐层冒泡 直到被父级元素捕获。 事件代理  给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件。

DOM 标准 事件三个阶段:

捕获

到达目标、

冒泡

IE 不支持捕获, 但冒泡够用了。

event.currentTarget 事件处理程序当前正在处理事件的那个元素

event.target 事件真正的目标

event.type 出发事件类型 // click mouseover mouseout

 

this 始终等于currentTarget, 而 target 则只包含事件的 实际目标

var btn = document.getElementById(‘myBtn‘);

     btn.onclick = function ( event ) {

    alert( event.currentTarget === this );  //true

    alert( event.target == this  );  // true

     }

 

//如果事件处理程序 存在 按钮的父节点中  这些值 不同

document.body.onclick = function ( event ) {

  alert( event.currentTarget === document.body ); // true;

  alert( this === document.body );// true

 

  alert( event.target === document.getElementById( ‘myBtn‘) ); //true;

 

}

 

 

 

例如:

<body>

<div> <a href="">btn</a></div>

<div> <a href="" id="doSomething">btn</a></div>

<div> <a href="" id="goWhere">btn</a></div>

</body>

-----------------------------------------------

document.getElementByTagName(‘body‘).onclick = function (e) {

  //浏览器 target

     e = e || window.event;

    var target = e.target || e.srcElement;

   if ( target.nodeName !== ‘A‘){ return;  }

  if (target.id == ‘doSomething‘) {

    alert(‘doSomething‘);

      } else if (target.id == ‘goWhere‘) {

    alert(‘goWhere‘);

  } else {

    alert(‘other A click‘);

  }

  if (typeof e.preventDefault === ‘function‘) {

    e.preventDefault();

    e.stopPropagation();

     } else {

    e.returnValue = false;//IE 默认true false 取消事件的默认行为

           e.cancelBubble = true;//IE 默认false, 但设置true 可以取消事件冒泡

  }

}

 

以上是关于javaScript绑定事件委托 demo的主要内容,如果未能解决你的问题,请参考以下文章

事件绑定事件监听事件委托

理解Javascript中的事件绑定与事件委托

JS 中的事件绑定事件监听事件委托

JS 事件绑定事件监听事件委托详细介绍

jq事件绑定

javascript 事件委托 和jQuery事件绑定onoff 和one