您的位置：首页 > Web前端 > JQuery

jQuery Direct and delegated events 直接事件与委托事件

2017-04-30 19:08 351 查看

ref: http://api.jquery.com/on/
直接事件：将事件委托直接绑定到dom元素上，当事件发生时触发handler.

委托事件: 将事件委托绑定到dom元素的外层容器上，当事件发生时，冒泡到匹配的外层元素，触发相应handler.

　　采用委托事件的优势有2点： 1.效率高。对子元素数量非常多时，只需要绑定一个handler到父容器。 2. 可以对事件绑定调用时，尚未生成的子元素，仍然有效（只需要保证父容器已存在）。

jquery 使用on方法实现事件绑定。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test jquery on method</title>
<style>
div{ border:solid 1px red; margin: 10px; padding: 10px;}
</style>
<script src="../JsCss/jquery-1.12.4.min.js"></script>
<script>
/*
ref: http://api.jquery.com/on/ jquery on 方法原型: .on( events [, selector ] [, data ], handler )
*/
$(function () {
// delegate event 委托事件
$("#btnAdd").click(function () {
$("#container").append("<div class='sub-container'><b>"+new Date().getTime()+"</b></div>");
});
$("#container").on('click', '.sub-container', function(e){
alert($(this).html());
});
// direct event 直接事件
$("#btnAdd2").click(function () {
$("#container2").append("<div class='sub-container'><b>"+new Date().getTime()+"</b></div>");
});
// If selector is omitted or is null, the event handler is referred to as direct or directly-bound.
$("#container2 .sub-container").on('click', function(e){
alert($(this).html());
});
});
</script>
</head>
<body>
<button id="btnAdd">Add div</button>
<div id="container">
<div>无事件触发</div>
<div class='sub-container'>xxx</div>
</div>

<button id="btnAdd2">Add div</button>
<div id="container2">
<div>无事件触发</div>
<div class='sub-container'>xxx</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航