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

80 阅读 0 评论 53 点赞

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

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

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

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

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

复制代码

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

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

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

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

$(this) 指的是target元素，

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>