事件委托和this

一、事件

事件阶段

一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

（1）捕获阶段（Capture Phase）

　　事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

　　或这样描述：

　　任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。浏览器会向下遍历DOM树直到找到触发事件的元素，一旦浏览器找到该元素，事件流就进入事件目标阶段

（2）目标阶段（Target Phase）

　　当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

（3）冒泡阶段（Bubble Phase）

　　事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
　　冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

事件委托

事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处呢：1.提高性能； 2. 易于维护；

比如用document元素来处理按钮的点击行为，用ul元素来处理其子元素li的事件。

有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件，并支持事件捕获和事件冒泡。W3C关于浏览器怎么支持事件的文档：W3C DOM Level 3 Events。一些JS库和框架公开了其它方式，如发布/订阅模型（将在后文提及）。

事件冒泡

（1）为什么要阻止事件冒泡

　　有种可能是，某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。

（2）如何阻止事件冒泡

1. stopPropagation：告诉DOM事件停止冒泡
2. stopImmediatePropagation，它不仅停止冒泡，也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。
3. preventDefault，这个方法会阻止浏览器处理事件的默认行为。一个常见示例就是链接，使用链接执行UI操作是一种常见的做法。然而，当我们不希望链接跟普通被激活的链接一样会在新标签页打开一个新页面，就可以使用preventDefault方法来阻止这个默认行为。

订阅发布模式

　　还有其它实现事件委托的方法可以考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。通常，两个参与者在DOM中并没有紧密的联系，而且可能是来自兄弟的容器。可以给它们共同的祖先元素设置监听处理程序，但是如果共同的祖先元素在DOM树中处于较高层次（离根节点比较近），就会监听很多同辈元素的事件，会造成意想不到的结果；当然，也可能存在逻辑或结构原因要分开这两个元素。

　　发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历，有时也向下遍历，DOM会通知遍历路径上的所有元素事件发生了。在下面的示例中，JQuery通过trigger方法传递事件。

二、this

this 关键字在JavaScript中的一种常用方法是指代码当前上下文。

• 如果this没有被设置，则默认指向全局对象，其通常是window
• 如果一个函数中运行了一个内联函数，比如一个事件监听器，则this指向内联函数的源代码。例如,当设置一个按钮的单击处理程序,this将引用匿名函数内的按钮。
• 如果函数是一个对象的构造函数，this指向新对象。
• 如果函数被定义在一个对象上,然后调用对象时,this指向该对象。
• 在异步编程中，this可以很容易改变过程中一个功能操作。保持处理程序上下文的一个小技巧是将其设置到闭包内的一个变量，当在上下文改变的地方调用一个函数时，如setTimeout，你仍然可以通过该变量引用需要的对象。

例子

（1）如果该函数是被当做某一个对象的方法，那么该函数的this指向该对象；

var car= {
    modelNum: "Benz"
}
function f() {
    alert(this.modelNum+ ":hello world")
}//this就是car这个对象
Benz.sayHi = f
Benz.sayHi() ;

 

（2）函数之内调用 
　　当函数中有 this，其实就意味着它被当做方法调用，之间调用相当于把他当做window对象的方法，this指向window.

function func() {
    alert(this) // this指向window
}
func()

 

总之，如果this没有被设置，则默认指向全局对象，其通常是window 

操作this的另一种方式是通过call、apply和bind。三种方法都被用于调用一个函数，并能指定this的上下文，你可以让代码使用你规定的对象，而不是依靠浏览器去计算出this指向什么。

 

 

参考：

JavaScript面试问题：事件委托和this 

浅谈事件委托和this用法

事件冒泡和事件捕获