jquery之事件切换，事件处理，事件委派

最新推荐文章于 2023-08-10 16:39:43 发布

kevin_love_it

最新推荐文章于 2023-08-10 16:39:43 发布

阅读量441

点赞数

分类专栏： javaScript/jquery 文章标签： jsp css jquery html javascript

本文链接：https://blog.csdn.net/kevin_love_it/article/details/78641023

版权

javaScript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

事件切换，事件处理，事件委派

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="../../document/lib/jquery-3.2.1.min.js"></script>
	<title>jquery event01</title>
	<style>
		.hover {
			color:red;
			font-size:24px;
		}		
	</style>
</head>
<body>
	<h2>jquery event</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<h3>页面载入，事件处理，事件切换，事件委派</h3>
		<!-- <button id="old">.trigger("focus")</button>
		<button id="new">.triggerHandler("focus")</button><br/><br/>
		<input type="text" value="To Be Focused"/>

		<div class="clickme">1</div> -->
		<table>
			<tr>
				<td>hello</td>
			</tr>
		</table>
	<script type="text/javascript">
	// 页面载入
	// ready(fn)
	// $(document).ready(function(){
	// 	alert("loaded");
	//  });
	// $(function($){
	// 	alert("load2");
	// });

	// 事件处理 
	// on(eve,[sel],[data],fn)1.7+ 在选择元素上绑定一个或多个事件的事件处理函数。
	// $("form").on("submit", false)

	// off(eve,[sel],[fn])1.7+ 在选择元素上移除一个或多个事件的事件处理函数。
	// $("p").off( "click", "**" );
	// $("p").off();

	// bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。
	// 绑定多个事件
	// $("button").bind({
	// 	click:function(){$("p").slideToggle();},
	// 	mouseover:function(){$("body").css("background-color","red");},  
	// 	mouseout:function(){$("body").css("background-color","#FFFFFF");}  
	// });
	// $("form").bind("submit", function() { return false; })

	// one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
	// $("p").one("click", function(){
	// 	alert( $(this).text() );
	// });

	// trigger(type,[data]) 在每一个匹配的元素上触发某类事件。
	// $("p").bind("myEvent", function (event, message1, message2) {
	// 	alert(message1 + ' ' + message2);
	// });
	// $("p").trigger("myEvent", ["Hello","World!"]);

	// triggerHandler(type, [data]) 
	// 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
	$("#old").click(function(){
		$("input").trigger("focus");
	});
	$("#new").click(function(){
		$("input").triggerHandler("focus");
	});
	$("input").focus(function(){
		$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
	});

	// unbind(t,[d|f]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
	// $("p").unbind( "click" )
	
	//---------------------------------------------------------------------------------------
	// 事件委派

	// .live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：
	// 1.生成一个click事件传递给 来处理 
	// 2.由于没有事件处理函数直接绑定在 <divgt; 上，所以事件冒泡到DOM树上
	// 3.事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
	// 4.执行由 .live() 绑定的特殊的 click 事件处理函数。
	// 5.这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
	// 6.如果找到了匹配的元素，那么调用原始的事件处理函数。

	// 由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
	//---------------------------------------------------------------------------------------

	// live(type,[data],fn)1.7-
	// jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
	// $('.clickme').bind('click', function() {
	// 	alert("Bound handler called.");
	// });

	// $("body").append("<span class='clickme'>2</span><br>");
	// $('.clickme').on('click', function() {
	// 	alert("Live handler called."); 
	// });

	// live()方法已经被弃用，替代
	//jQuery1.9-
	// $("#panel").find("div").live("click",function(){
	// 	alert("x");
	// }).addClass("x");

	// //jQuery1.9+
	// $("#panel").on("click","div",function(){
	// 	alert("x");
	// }).find("div").addClass("x"); 　


	// die(type,[fn])1.7- 从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
	// 从 jQuery 1.7 开始，不再建议使用 .die() (以及它的互补方法 .live())。请使用 .off() 来代替，用于移除通过 .on() 绑定的事件处理。
	// function aClick() {
	// 	$("div").show().fadeOut("slow");
	// }
	// $("#unbind").click(function () {
	// 	$("#theone").die("click", aClick)
	// });

	// 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
	// delegate(s,[t],[d],fn) 
	// undelegate([s,[t],fn])
	// $("table").delegate("td", "hover", function(){
	// 	$(this).toggleClass("hover");
	// });
	// $("p").undelegate( "click" );


	// 事件切换
	// hover([over,]out)
	// 鼠标悬停的表格加上特定的类
	// $("td").hover(
	// 	function () {
	// 		$(this).addClass("hover");
	// 	},
	// 	function () {
	// 		$(this).removeClass("hover");
	// 	}
	// );

	// $("td").bind("mouseenter mouseleave",handlerInOut);
	// $("td").hover(handlerInOut);
	// function handlerInOut(){
	// 	$(this).css({"color":"red","font-size":"24px"});
	// }

	// toggle([spe],[eas],[fn])1.9* 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
 	// 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
 	// $('td').toggle();

 	// $('#foo').toggle(showOrHide);
 	//相当于
 	// if (showOrHide) {
 	// 	$('#foo').show();
 	// } else {
 	// 	$('#foo').hide();
 	// } 
	</script>
	</div>
</body>
</html>