黑马程序员技术交流社区

标题: JS中的this和window.event.srcElement到底有什么区别？ [打印本页]

作者: 维纳斯之叶 时间: 2012-9-15 21:02
标题: JS中的this和window.event.srcElement到底有什么区别？
本帖最后由维纳斯之叶于 2012-11-17 08:39 编辑

JS中的this和window.event.srcElement到底有什么区别？老师说的那句话不太明白：this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象，事件冒泡。真心求教，谢谢。。

作者: 吴瑞祥 时间: 2012-9-15 21:43
适用范围差别吧，后面那个是在特定地方有效，而this在任何地方都有效

作者: 静风飘飘 时间: 2012-9-15 22:26
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 则只固定指代最原始的触发事件的事件源对象。

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

作者: 王锋华 时间: 2012-9-16 09:49
我们先看一个简单的例子：

<input type="text" onblur="alert(this.value)"/>完全没有问题。

那么什么情况下不可以用？

fuction method()

{

alert(this.value);

}

<input type="text" onblur="method()"/>这个就不可以，因为method()是被响应函数调用的函数。

那么这种情况下怎么办？

方法一:

fuction method(btn)

{

alert(btn.value);

}

<input type="text" onblur="method(this)"/>没问题！

方法二：

fuction method()

{

alert(window.event.srcElement.value);

}

<input type="text" onblur="method()"/>没问题！window.event.srcElement取得触发事件的控件

我们在看一个稍微绕一点的例子

<head>
   <script type="text/javascript">
      function InitEvent() {
         var inputs = document.getElementsByTagName_r("input");
         for (var i = 0; i < inputs.length; i++) {
               inputs[i].onblur = OnblurEvent;
         }
      }

      function OnblurEvent() {
         // OnblurEvent是onblur的响应函数，而不是被响应函数调用的函数
         // 所以可以用this来获取发生事件的对象
         if (this.value.length > 0) {
               this.style.backgroundColor = "white";
         }
         else {
               this.style.backgroundColor = "red";
         }
      }
   </script>
</head>
<body onload="InitEvent()">
   <input id="Text1" type="text" />
   <input id="Text2" type="text" />
   <input id="Text3" type="text" />
</body>
</html>

正如红色注释解说，上面可以用this获得当前触发事件的input。

作者: 维纳斯之叶 时间: 2012-9-16 10:00
本帖最后由维纳斯之叶于 2012-9-16 10:04 编辑

静风飘飘发表于 2012-9-15 22:26
window.event.srcElement 属性可以用来获得触发事件的源对象，我自己碰到过的用得最多的其中一个场合就是： ...

恩恩，谢谢你，还有就是我运行你的代码时触发了tr的onclick事件，没有错的，不知道你上面为什么说没有触发，我试过了，不是兼容性的问题。。

作者: 维纳斯之叶 时间: 2012-9-16 10:07

王锋华发表于 2012-9-16 09:49
我们先看一个简单的例子：

完全没有问题。

要不要直接找度娘啊~~~这个问题我已经百度过n遍了~~~~:victory:

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2