文章目錄

JQuery的事件代理主要用来解决通过js添加的HTML元素无法监听事件的问题。

JQuery event delegation中给了如下一个简单例子,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://domain4.com">Item #4</a></li>
</ul>
</div>
<script>
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );
</script>

</body>
</html>

点击item1到item4,对于click事件都会有响应,在console中可以看到输出,而点击item5时click事件不会响应,这是因为将click事件绑定时,item5还没有生成。

解决这个问题的方法是使用事件代理,原理是利用了事件传播机制。也就是在某一个元素中的事件,如果没有得到处理,一直会向父节点触发,直到根节点。如上面的a元素的click事件,如果没有被捕获,一直会向上触发,路径如下

  • <a>
  • <li>
  • <ul #list>
  • <div #container>
  • <body>
  • <html>
  • document root

<ul #list>元素上添加click事件,就可以看到效果。

1
2
3
4
$( "#list" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

最后,如果使用事件代理,我们可以把它绑定到<ul #list>元素,然后通过’a’去找到<a>元素,这样就可以监听通过js添加的HTML元素。

1
2
3
4
$( "#list" ).on( "click",  'a', function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

文章目錄