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

Posted 庚武讲堂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Direct and delegated events 直接事件与委托事件相关的知识，希望对你有一定的参考价值。

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>

　　

 

以上是关于jQuery Direct and delegated events 直接事件与委托事件的主要内容，如果未能解决你的问题，请参考以下文章

FASTER CNNS WITH DIRECT SPARSE CONVOLUTIONS AND GUIDED PRUNING

Direct3D 11 Tutorial 3: Shaders and Effect System_Direct3D 11 教程3：着色器和效果系统

FASTER CNNS WITH DIRECT SPARSE CONVOLUTIONS AND GUIDED PRUNING

由于跨域请求，带有 Jquery 文件上传的 Carrierwave_Direct 不会重定向

`O_DIRECT | 有啥区别？ O_SYNC` + write() 和 `O_DIRECT` + write() + fsync()

HLSL