javascript的事件绑定与事件委托

昨天有位web前端爱好者问关于javascript事件绑定和事件委托的知识，小编今天就来跟大家交流一下这个知识点！

事件绑定：事件是用户或者浏览器自身进行的特定的行为，这些事件都有自己特定的名字，如：点击，加载，鼠标经过等。用于响应事件并进行特定的处理的函数就是事件处理程序。而事件绑定就是为指定的某个事件绑定指定的事件处理程序。

事件绑定的几种中方法

方法一：绑定元素属性

最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。

例如：

<button οnclick='myFun()'>click me</button>

<script>

function myFun(){

alert('I get it!');

}

</script>

方法二：绑定对象属性

把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。

例如： document.forms[0].myButton.onclick = myFunc;

应该注意一点：在事件触发的时候，没有办法向事件函数传递参数。

方法三： IE支持的attachEvent() 方法

attachEvent() 方法的用法如下所示：

elemObject.attachEvent("eventName", functionReference);

eventName 参数的值是表示事件名称的字符串，比如 onmousedown、onclick。functionReference 参数是一个不带括号的函数引用。

方法四：使用 W3C DOM 的 addEventListener() 方法

W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个addEventListener()方法。HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。

方法的语法如下所示：

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。

第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如click，mousedown，和keypress。

第二个参数listenerReference 参数是一个不带括号的函数引用。

第三个参数captureFlag是boolean类型，指明该结点是否以DOM中所谓的捕捉模式来侦听事件，对于一个典型的事件侦听器来说，第三个参数应该为false。

事件委托：利用事件冒泡机制，在最顶层触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下，可以使用事件委托。

写法如下:

function fn(d) {

document.onclick = function(e) {

var e = e || window.event;

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

if (target.tagName == “LI”) {

// ……

}

}

}

e.srcElement || e.target: 获取事件发生时，最初的那个dom元素。

target.tagName：最初的那个dom元素的标签名字，例如：LI;通过对元素属性的判断，例如标签名，ID ,CLASS等等，来执行不同的处理函数。

这样做比起每一个元素都绑定一个事件，然后为每一个事件再绑定一个函数效率要高很多。

上例：点击任何一个LI都会触发，document的onclick的事件，(注意这里的LI并没有绑定任何的onclick事件)，这样就可以理解为一种“委托”。把事件交给document.让它去处理li点击后应该执行的语句。

前端爱好者们约定，阅读后：

if（‘觉得有帮助’）

｛

分享（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享（‘a piece of cake！’）;

｝

else if('看不懂')

{

回复小编（'help me!'）;

}

图片来源于网络-------