jQuery事件处理函数之.on( events [, selector ] [, data ], handler(eventObject) )详解

朱雀 2022-05-29 06:55 130阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    	</head>
    	 <style>
    		  p.mimi {color: red;}
    		  span.mimi {color: blue;}
    		  .kaka {
    		    color: #000;
    		    padding: .5em;
    		    border: 1px solid #444;
    		  }
    		  .active {
    		    color: #900;
    		  }
    		  .inside {
    		    background-color: aqua;
    		  }
    	  </style>
    	<body>
    		<table id="dataTable" border="1">
    			<tbody >
    				<tr>
    					<td>啦啦</td>
    					<td>呵呵</td>
    				</tr>
    				<tr>
    					<td>111</td>
    					<td>222</td>
    				</tr>
    			</tbody>
    		</table>
    		<hr />
    		
    		<button class="lol">点我试试</button><br />
    		<button class="lol">有种再点一次</button>
    		<hr />
    		
    		<p id="test">test</p><br />
    		<hr />
    		
    		<p id="myfh">myfh</p><br />
    		<hr />
    		
    		<p class="mimi">Has an attached custom event.</p>
    		<button class="mimi">Trigger custom event</button>
    		<span class="mimi" style="display:none;"></span>
    		<hr />
    		
    		
    		<div class="kaka">test div</div>
    		<script type="text/javascript">
    			/**
    			 * .on(events[,selector][,data],handler(eventObject))   返回jQuery
    			 * 描述：在选定的元素上绑定一个或多个事件处理函数
    			 * 
    			 * events 类型：String
    			 * 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，
    			 * 如"click""keydown.myPlugin"或者".myPlugin"
    			 * 
    			 * selector 类型：String
    			 * 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果
    			 * 选择器是null，或者忽略了该选择器，那么被选中的元素总是能触发事件
    			 * 
    			 * data 
    			 * 类型：Anything
    			 * 当一个事件被触发时，要传递给事件处理函数的event.data
    			 * 
    			 * 
    			 * handler(eventObject)
    			 * 类型：Function()
    			 * 事件被触发时，执行的函数，若该函数只是要执行return false的话，
    			 * 那么该参数位置可以直接简写成false
    			 * 
    			 * 
    			 * .on()方法事件处理程序当前选定的jQuery对象中的元素，在jQuery1.7中，on()
    			 * 方法提供绑定事件处理的所有功能，为了帮助从旧的jQuery事件方法转换过来，查看 .bind(), .delegate(), 和 .live().
    			 * 
    			 * 要删除.on()绑定的事件，请参阅.off();要绑定一个事件，并且只运行一次，然后删除自己， 请参阅.one()
    			 * 
    			 * 
    			 * */
    			
    			/**
    			 * Event names and namespaces(事件名称和命名空间)
    			 * 任何事件的名称，可以作为events的参数，
    			 * 事件名称可以添加指定的events namespaces（命名空间）来简化
    			 * 删除或触发事件。
    			 * 例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间
    			 * myPlugin 和 simple。通过上述方法绑定的 click 事件处理，
    			 * 可以用.off("click.myPlugin") 或 .off("click.simple")
    			 * 删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在
    			 * 该元素上的“click（点击）” 事件。命名空间类似CSS类，因为它们
    			 * 是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字
    			 * 空间是供 jQuery 使用的。
    			 * 
    			 * 在.on()方法的第二种用法中，events参数是一个JavaScript对象或者
    			 * 键值对。键等同于events参数，用空格分隔的事件名称字符串和可选
    			 * 命名空间。每个键的值是一个函数（或false的值），相当于handler参数，
    			 * 但是该值并不是方法中的最后一个参数。
    			 * 
    			 * */
    			
    			/**
    			 * Direct and delegated events(直接和委托的事件)
    			 * 
    			 * 事件处理只能被绑定在当前被选中的元素上，而且，在代码调用.on()
    			 * 的时候，他们必须已经存在。为了确保目前的元素可以被选择（即，存在），
    			 * 最好将脚本放在元素的HTML标记后面或者在document的ready事件中进行
    			 * 事件绑定，或者，使用委派事件绑定事件处理程序。
    			 * 
    			 * 委托事件
    			 * 委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件，
    			 * 在确保所选的元素已经存在的情况下，进行事件绑定时，可以使用委派事件，
    			 * 以避免频繁的绑定事件及解除绑定事件。
    			 * 
    			 * 除了可以给未创建的后代元素绑定事件外（即上面提到的优势），
    			 * 代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。
    			 * 例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：
    				$( "#dataTable tbody tr" ).on( "click", function() {
    				  console.log( $( this ).text() );
    				});
    			 * 
    			 * */
    			//注意: 委托事件不能用于SVG.
    			//例子一
    			$("#dataTable tbody" ).on( "click", "tr", function() {
    			  console.log( $( this ).text() );
    			});
    			
    			/**
    			 * The event handler and its environment(事件处理程序和它的环境)
    			 * handler参数必须是一个函数（或flase），除非你传递一个对象给events参数。
    			 * 
    			 * !!!  当浏览器触发一个事件，或者其他JavaScript调用jQuery的.trigger()方法，
    			 * jQuery传递一个Event对象给这个处理程序，他可以用来分析和改变事件的状态。
    			 * 
    			 * */
    			
    			/**
    			 * 默认情况下，大多数事件的冒泡从最初的event target（目标元素）开始的，直到
    			 * document元素。每个元素都沿着DOM层级这条路，jQuery会调用任何匹配的已经被绑定
    			 * 的事件处理程序。一个处理程序可以调用event.stopPropogation()防止事件向上冒泡
    			 * 文档树（从而防止这些元素的处理程序运行）。任何绑定到当前元素上的其他处理程序
    			 * 都将运行，为了防止这种情况，可以调用event.stopImmediatePropogation()。（绑定
    			 * 在元素上的事件被调用的顺序和它们被绑定的顺序是一致的）
    			 * 
    			 * 类似地，一个处理程序可以调用的event.preventDefault()取消浏览器默认操作行为;
    			 * 例如，一个链接上有一个 默认的click事件。并非所有的浏览器事件的默认操作，并非
    			 * 所有的默认操作可以被取消。有关详细信息，请参阅W3C Events Specification
    
    			*	调用event.stopPropagation() 和 event.preventDefault()会从一个事件处理程
    			*	序会自动返回false。也可以直接将 false 当作 handler 的参数，作为 function()
    			*	{ return false; } 的简写形式。因此，下面的写法 $("a.disabled").on("click",
    				false); 将会阻止所有含有 "disabled" 样式的链接的默认行为，并阻止该事件上的
    				冒泡行为。
    				
    				
    				当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。
    			*	对于直接事件而言，this代表绑定事件的元素。对于代理事件而言，this则代表了
    			* 与selector相匹配的元素(注意，如果事件是从后代元素冒泡上来的话，那么 this 
    			* 	就有可能不等于 event.target。)若要使用 jQuery 的相关方法，可以根据当前
    			* 元素创建一个 jQuery 对象，即使用 $(this)。
    			 * */
    			
    			/**
    			 * Passing data to the handler(将数据传递到处理程序)
    			 * 如果data参数给.on()而不是null或者undefined，那么每次触发事件时，
    			 * event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串
    			 * 类型时，那么selector参数必须提供，或明确的传递null，这样的data参数
    			 * 不会误认为是选择器。最好是使用一个对象（键值对），所以可以作为属性
    			 * 传递多个值。
    			 * 
    			 * 
    			 * */
    			
    			function greet(event){
    				document.write("Hello " + event.data.name + "<br />");
    			}
    			
    			$("button.lol").on("click",{name:"Jack"},greet);//Hello Jack   Hello Bob
    			$("button.lol").on("click",{name:"Bob"},greet);//Hello Jack   Hello Bob
    			
    			
    			/**
    			 * event performance （事件性能）
    			 * 许多委派的事件处理程序绑定到 document 树的顶层附近，可以降低性能。
    			 * 每次发生事件时，jQuery 需要比较从 event target（目标元素） 开始到
    			 * 文档顶部的路径中每一个元素上所有该类型的事件。为了获得更好的性能，
    			 * 在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，
    			 * 过多的在 document 或 document.body 上添加代理事件。
    
    jQuery可以非常迅速处理tag#id.class形式的简单选择器，当它们是用来过滤委派事件。所以
    "#myForm", "a.external", 和 "button" 都是快速选择器。若代理事件的选择器使用了过于
    复杂的形式，特别是使用了分层选择器的情况，虽然说这样做会大大的降低性能，但是对于大多数
    应用而言，它的速度依然是足够快的。通过为寻找更合适的元素绑定事件的方法，就可以很简单的
    避免使用分层选择器的情况。例如，使用$("#commentForm").on("click", ".addNew", addComment)
    而不是$("body").on("click", "#commentForm .addNew", addComment)。
    			 * 
    			 * 
    			 * */
    			
    			/**
    			 * Additional notes（其他注意事项）
    			 * 
    			 * */
    			var $test = $("#test");
    			function handler01(){
    				console.log("handler01");
    				$test.off("click",handler02);
    			}
    			
    			function handler02(){
    				console.log("handler02");
    			}
    			
    			$test.on("click",handler01);
    			$test.on("click",handler02);
    			/**
    			 * 在上面的代码，handler2第一次无路如何都会被执行，即使使用.off()删除。
    			 * 然而，该处理函数在下一次click事件被触发时将不执行。*/
    			
    			
    			
    			//传入数据测试
    			function fh(e){
    				console.log(e.data.foo);
    			}
    			$("#myfh").on("click",{foo:"fish"},fh);//fish
    			
    			//取消表单的提交动作，通过返回 false 的方法来防止事件冒泡：
    			$("submit").on("click",false);
    			
    			//Example: 添加并触发自定义事件（非浏览器事件）。
    			$("p.mimi").on("myCustomEvent",function(eve,myName){
    				$(this).text(myName + ",hi here!");
    				$("span.mimi")
    					.stop()
    					.css( "opacity", 1 )
    				    .text( "myName = " + myName )
    				    .fadeIn( 30 )
    				    .fadeOut( 1000 );
    			});
    			$("button.mimi").click(function(){
    				$("p.mimi").trigger("myCustomEvent",["John"]);
    			});
    			
    			//使用 对象 同时添加多个事件处理函数。
    			$("div.kaka").on({
    				"click":function(){
    					$(this).toggleClass("active");
    				},
    				"mouseenter":function(){
    					$(this).addClass("inside");
    				},
    				"mouseleave":function(){
    					$(this).removeClass("inside");
    				}
    			});
    		</script>
    	</body>
    </html>