Javascript 中的 this 和 event.srcElement 的区别

学习交流，欢迎转载。转载请注明文章来源：http://www.cnblogs.com/lgjspace/archive/2011/08/09/2131643.html

　　window.event.srcElement 属性可以用来获得触发事件的源对象，我自己碰到过的用得最多的其中一个场合就是：在需要让多个事件共享一个事件响应函数时，可以遍历所有相关的对象，把每个相关对象和 window.event.srcElement 对象进行比较，如果相等，则说明该相关对象就是触发事件的源对象，否则则不是事件的触发源。

　　而 this 的用法很多，其中和 srcElement 最为相似的一个用法是：在事件的响应函数中可以用 this 来表示发生事件的控件，但这有一个很重要的限定条件，必须在事件响应函数中使用 this 才有这样的功效，在事件响应函数中所调用的函数里头使用 this 就没有了这种指代效果。为了后面更好地说明 this 和 window.event.srcElement 的区别，可以看看本人的一篇相关文章《js 中 this 用作“指代发生事件的源对象”时的适用范围》先了解一下 “事件响应函数” 和 “事件响应函数所调用的函数” 的区别。

　　如果单从上面的简单描述来看，this 和 window.event.srcElement 两者好像没什么不一样，其实区别还是有的。为了更容易理解，先列出下面这段代码，结合代码谈一谈它们的一些区别：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5 </head>
 6 <body onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
 7     <div onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
 8         <table onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
 9             <tbody onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
10                 <tr onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
11                     <td onclick = "alert('this.tagName = ' + this.tagName + '，event.srcElement.tagName = ' + event.srcElement.tagName);">
12                         第 01 行 第 01 列
13                     </td>
14                 </tr>
15             </tbody>
16         </table>
17     </div>
18 </body>
19 </html>

　　这段代码十分简单，就是一个简单的事件冒泡代码。页面中的 body 标签中一次嵌套 div、table、tbody、tr、td，分别在这些元素标签中添加响应事件代码，分别用

this 和 window.event.srcElement 来实现打印元素自身的标签名。运行该页面代码，鼠标点击文本“第 01 行第 01 列”，页面会依次弹出窗口，依次打印显

示：“this.tagName = TD，event.srcElement.tagName = TD”、“this.tagName = TBODY，event.srcElement.tagName = TD”、“this.tagName = TABLE，

event.srcElement.tagName = TD”、“this.tagName = DIV，event.srcElement.tagName = TD”和“this.tagName = BODY，event.srcElement.tagName = TD”。在这里插个题外话，这打印结果比较奇怪，整个事件冒泡过程没有触发到 TR 元素的 onclick 事件，个人估计是由于 TR 有自身的特殊性，它并不指代一种元素实体，只是限定布局位置的元素，然而，真正原因还有待查证，毕竟这不是本文讨论的重点。
　　从打印的结果可以清楚对比得出，随着事件的逐渐往外层冒泡，用 this 方式来获取的元素对象也随着引发事件的元素的改变而改变，而用 window.event.srcElement 方式来获取的元素对象则一直都只是最里层的 TD，即最原始的触发源的元素对象。
　　由以上的对比和描述不难得出 this 和 event.srcElement 两者之间的区别，下面再简单总结一下两者的不同：

　　1. this 是 javascript 的关键字，而 window.event.srcElement 则是 DOM 中的一个属性。

　　2. this 必须只有在事件响应函数中使用才会有 “表示当前发生事件的控件” 的指代效果，而 event.srcElement 则在任何位置下引用都能指代触发事件的事件源。

　　3. this 指代的只是当前引发（发生）事件的控件对象，而不一定是触发事件的最原始的事件源对象，而 event.srcElement 则只固定指代最原始的触发事件的事件源对象。

　　这些都是个人学习总结得出的结论，不敢保证完全正确，如有任何错漏，肯定各位高手不吝回帖指点，欢迎拍砖！