jquery之event.target vs this

nick__zhang

于 2015-11-15 21:22:58 发布

阅读量565

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript/jquery 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/zfng2008/article/details/49852667

javascript/jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML中DIV元素的click事件绑定及JS代码实现，通过两个实例展示了如何使用jQuery处理DOM元素的点击事件，解释了event.target属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<div class="wrap" id="wrap">
<ul class="level1">
 <li class="1">a
  <ul class="level2">
   <li>a1</li>
   <li>a2</li>
  </ul>
 </li>
 <li class="2">b
  <ul class="level2">
   <li>b1</li>
   <li>b2</li>
  </ul>
 </li>
</ul>
</div>

由于DOM元素的事件冒泡机制，当为div.wrap绑定click事件时，点击其任意子元素，都会响应click事件。

js代码（1）：

$(".wrap").on('click', function(event){
    alert($(this).attr("class"));  // 点击div.wrap任意子元素，输出都为wrap
  });

js代码（2）：

$(".wrap").on('click', function(event){
    var node = event.target;
    alert($(node).attr("class"));  // 点击div.wrap任意子元素，会输出具体点击的DOM元素的class
  });

jquery之event.target vs this

html代码：

js代码（1）：

js代码（2）：

总结：event.target永远指向直接接受事件的目标DOM元素。