晕了，this和event.target的区别是什么啊
时间：2009-07-21
来源：互联网
请问this和event.target有什么区别，比如：
$("li:has(ul)").click( function(event){$(this).children().show() });
和
$("li:has(ul)").click( function(event){$(event.target).children().show() });
这两句话有什么区别
$("li:has(ul)").click( function(event){$(this).children().show() });
和
$("li:has(ul)").click( function(event){$(event.target).children().show() });
这两句话有什么区别
作者: 4875580 发布时间: 2009-07-21
事件是可以向上传播的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的DOM元素
举例来说，假设你的li里有个span元素，然后你单击了这个span元素，处理事件时，this是li，event.target是span
举例来说，假设你的li里有个span元素，然后你单击了这个span元素，处理事件时，this是li，event.target是span
作者: keakon 发布时间: 2009-07-22
keakon ：
我还是不太理解你说的，我直接把全部代码都贴出来吧：
在toggle方法里用的都是$(this)，很奇怪的是，比如说点击 Item 3.1 ，Item 3列表也会缩回，但是Item 3.1不包含在$("li:has(ul)")里啊，所以没有对其添加事件监听啊。
另外，如果将toggle方法里的$(this)都换成$(event.target)的话，就没有任何问题了，仅仅对$("li:has(ul)")里的元素添加了事件监听。
这是怎么回事情呢？？？
我还是不太理解你说的，我直接把全部代码都贴出来吧：
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>New <div>s Example</title> <script type="text/javascript" src="jquery-1.2.1.js"></script> <script type="text/javascript"> $( function(){ $("li:has(ul)").children().hide(); $("li:has(ul)").toggle( function(event){$(this).children().show(); return false;} ,function(event){$(this).children().hide();return false; }); } ); </script> </head> <body> <fieldset> <li>Item 1</li> <li>Item 2</li> <li> Item 3 <ul> <li>Item 3.1</li> <li> Item 3.2 <ul> <li>Item 3.2.1</li> <li>Item 3.2.2</li> <li>Item 3.2.3</li> </ul> </li> <li>Item 3.3</li> </ul> </li> <li> Item 4 <ul> <li>Item 4.1</li> <li> Item 4.2 <ul> <li>Item 4.2.1</li> <li>Item 4.2.2</li> </ul> </li> </ul> </li> <li>Item 5</li> </ul> </fieldset> </body> </html> |
另外，如果将toggle方法里的$(this)都换成$(event.target)的话，就没有任何问题了，仅仅对$("li:has(ul)")里的元素添加了事件监听。
这是怎么回事情呢？？？
作者: 4875580 发布时间: 2009-07-22
你点击Item 3.1时，Item 3.1没有绑定click事件，所以向上传播给父元素Item 3，因此Item 3会缩回
这个传播过程直到遇到根元素或手动停止（如return false）
你虽然使用了return false，但因为Item 3.1没有绑定click事件，所以不能阻止事件向上传播
这个传播过程直到遇到根元素或手动停止（如return false）
你虽然使用了return false，但因为Item 3.1没有绑定click事件，所以不能阻止事件向上传播
作者: keakon 发布时间: 2009-07-22
啊~这么回事情啊 我终于明白了 太感谢你了 keakon ！！！ :)
作者: 4875580 发布时间: 2009-07-22
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
