Event

最新推荐文章于 2021-11-02 21:55:46 发布

我一定要成为架构师

最新推荐文章于 2021-11-02 21:55:46 发布

阅读量313

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/weixin_43907332/article/details/86838182

版权

Java Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

事件冒泡机制
jQuery的$ (document).ready()和window.onload的差别
jQuery与dom不同
模拟操作（trigger触发）
- 模拟单击
- 自定义事件

事件冒泡机制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{
	margin:0;
	padding:0;
}
	
body { 
	font-size: 13px; 
	line-height: 130%; 
	padding: 60px; 
}

#content { 
	width: 220px; 
	border: 1px solid #0050D0;
	background: #96E555 
}

span { 
	width: 200px; 
	margin: 10px; 
	background: #666666; 
	cursor: pointer;
	color:white;
	display:block;
}

p {
	width:200px;
	background:#888;
	color:white;
	height:16px;
}
</style>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>

<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<div id="msg"></div>


</body>
</html>

在这里插入图片描述

停止事件冒泡

event.stopPropagation(); // 阻止事件冒泡

	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});

	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});

	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});

在这里插入图片描述

阻止默认行为

event.preventDefault(); //阻止默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
		     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
		     event.preventDefault();  //阻止默认行为 ( 表单提交 )
		 }

   })
})
</script>


</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>
</html>

在这里插入图片描述

return false;

他们两个都可以用return false替代。


<script type="text/javascript">
$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})

$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
		     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
		     return false;
		 }
   })
})

jQuery的$ (document).ready()和window.onload的差别

onload要把页面加载后再执行，而$ (document).ready()是吧页面的结构加载好后就可以执行了，所有他的执行时间比window.onload要快

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

   var startTime = new Date().getTime();

   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("#div1");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("#div1");
  }
</script>
</head>

<body  onload="test2();">
	<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4118960086,2125569760&fm=27&gp=0.jpg" style="width:200px;height:200px;"/>

	<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg" style="width:200px;height:200px;"/>

<div id="div1"></div>

</body>

</html>

在这里插入图片描述

jQuery与dom不同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-6-1</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	})
</script>



</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

在这里插入图片描述
如果在dom里后面的属性会把前面的覆盖掉，只会显示我的绑定函数3，但是jQuery就可以多个事件绑定一个按钮。

$('#delAll').click(function(){
			  $('#btn').unbind(); //$("#btn").unbind();
	   });

解除所有绑定
单个接触绑定需要给每一个事件一个索引，所以myFun1=function(){$ (’#test’).append("< p>我的绑定函数1</ p>");});然后再把myFun1附加到button上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("click", myFun1 = function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", myFun2 = function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", myFun3 = function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });

	   $('#delTwo').click(function(){
			  $('#btn').unbind("click",myFun2);
	   });
	})
</script>

</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>
</body>
</html>

one事件是一次性的，点击第二次就没有效果了

<script type="text/javascript">
	$(function(){
	   $('#btn').one("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).one("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).one("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	})
</script>

模拟操作（trigger触发）

模拟单击

在浏览器加载完成后模拟点击事件，模拟用户单击，实际上是触发单击。


$('#btn').trigger("click");
$('#btn').click();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>


<script type="text/javascript">
	$(function(){
	   $('#btn').bind("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });

	   //$('#btn').trigger("click");

	   $('#btn').click(); //同样的效果
	})
</script>


</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

自定义事件

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("myClick", function(){
					 $('#test').append("<p>我的自定义事件.</p>");
			  });


	   $('#btn').click(function(){
			$(this).trigger("myClick");
	   }).trigger("myClick");
	})
</script>

我一定要成为架构师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Event

文章目录事件冒泡机制停止事件冒泡阻止默认行为return false;jQuery的$ (document).ready()和window.onload的差别jQuery与dom不同模拟操作（trigger触发）模拟单击自定义事件事件冒泡机制&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫