jquery的.on()函数需要注意的几点

57 阅读 0 评论 38 点赞

我是靠谱客的博主忧郁冷风，最近开发中收集的这篇文章主要介绍jquery的.on()函数需要注意的几点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jquery 的.on()函数允许元素通过代理的方式绑定事件，也就是说，子元素通过事件冒泡，把事件传递到父元素上进行处理。这也就允许了对动态创建元素的事件绑定。

对于.on()函数，有以下几点值得注意：

绑定的元素应该事先已经存在（目标对象可以先不存在）

使用.on函数可以对动态创建的，暂时不存在的元素绑定事件，比如说页面有一个"<ul></ul>"列表，列表里面的"<li>.....</li>"是通过ajax请求动态创建的，并且绑定了click事件，那么我们可以用以下代码来操作

$('ul').on('click','li',function(){
......
})

但是如果"<ul></ul>"元素本身也是动态创建的，则会有错，需要使用更上级别的，已经存在的父元素来代替<ul>

事件处理函数中的$(this)指的是target元素

在.on()函数的事件处理函数中：

$(this) 指的是target元素，

$(event.target)指的是target元素，

$(event.delegateTarget)指的是代理的父元素

下面的例子可以解释这一点

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").on('click','p',function(event){
$(this).css('color','red');
$(event.target).css('border','1px solid black');
$( event.delegateTarget ).css( "background-color", "yellow" );
});
});
</script>
</head>
<body>
<div>
<p>点我</p>
<p>点我</p>
<p>点我</p>
</div>
</body>
</html>