jquery 的on方法中this指向触发事件的最底层dom元素

最新推荐文章于 2024-04-23 15:57:32 发布

zhifeng687

最新推荐文章于 2024-04-23 15:57:32 发布

阅读量3.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_26222859/article/details/51419181

版权

前端专栏收录该内容

82 篇文章

订阅专栏

从jQuery1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。即使是在执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。此外，该函数还可以为同一元素、同一事件类型绑定多个事件处理函数。

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

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

语法

   $( 
  selector).on( 
  event,childSelector,data,function) 
 

关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

参数function中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

on()还会为function传入一个参数：表示当前事件的Event对象。

引自：jQuery.on() 函数详解

jquery 的on方法获取发生事件的元素对象

方式一：使用$(this)获取

  $(function(){    
  $("li").live("click",function(event){    
    $("#temp").html("clicked: " + event.target.nodeName);    
    $(this).css("color","#FF3300");    
    event.stopPropagation();    
  })    
});

方式二：使用处理函数的参数获得

$(function(){    
$("li").live("click",function(event){    
    $("#temp").html("clicked: " + event.target.nodeName);    
    $(event.target).css("color","#FF3300");    
 })  
});