java的event学习

最新推荐文章于 2024-05-16 17:07:00 发布

wenzhu0_0

最新推荐文章于 2024-05-16 17:07:00 发布

阅读量560

点赞数

分类专栏： jsp

jsp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.获取事件发生的目标

需要根据不同的浏览器进行判断，需要根据不同的浏览器进行判断，微软的只知道window.event

IE不知道target而是使用srcElement来代替

模式的DOM0，会产生事件冒泡，可以通过event.stopPropagation()来取消事件的冒泡机制//IE是通过这个变量来取消冒泡 event.cancelBubble = true;

DOM0模型不支持事件捕获，而且DOM0带来的第二个问题是事件会被覆盖

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			var all = $("*");
			all.each(function(){
				var rel = this;
				this.onclick = function(event) {
					//1、获取事件发生的目标
					//需要根据不同的浏览器进行判断，微软的只知道window.event
					event = event?event:window.event;
					//IE不知道target而是使用srcElement来代替
					var target = event.target?event.target:event.srcElement;
					print("事件源:"+target.id+","+target.tagName+",事件对象:"+this.id+"-->"+this.nodeType);
					//模式的DOM0，会产生事件冒泡，可以通过event.stopPropagation()来取消事件的冒泡机制
					event.stopPropagation();
					//IE是通过这个变量来取消冒泡
					event.cancelBubble = true;
					//DOM0模型不支持事件捕获，而且DOM0带来的第二个问题是
				}
			});
			// for(var i=0;i<all.length;i++) {
				// all[i].onclick = function(event) {
					// //1、获取事件发生的目标
					// //需要根据不同的浏览器进行判断，微软的只知道window.event
					// event = event?event:window.event;
					// //IE不知道target而是使用srcElement来代替
					// var target = event.target?event.target:event.srcElement;
					// alert(this.id);
					// print("事件源:"+target.id+","+target.tagName+",事件对象:"+this.id);
				// }
			// }
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<div id="content"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//DOM0模型带来最大的问题是，事件会被覆盖
			$("#child")[0].onclick = function(){
				print("abc");	
			}
			$("#child")[0].onclick = function(){
				print("bcd");	
			}
			$("#child")[0].onclick = function(){
				print("efg");	
			}
			$("#child")[0].onclick = function(){
				print("hijk");	
			}
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<div id="content"></div>
</body>
</html>

2.使用了DOM2之后，可以满足事件不被覆盖了，而且还提供了一个参数用来说明是进行事件冒泡还是捕获

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//使用了DOM2之后，可以满足事件的覆盖了，而且还提供了一个参数用来说明是进行事件冒泡还是捕获
			$("#child")[0].addEventListener("click",function(){
				print("abc");				
			});
			$("#child")[0].addEventListener("click",function(){
				print("bcd");				
			});
			$("#child")[0].addEventListener("click",function(){
				print("efg");				
			});
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<div id="content"></div>
</body>
</html>

3、使用JQuery把浏览器之间的问题全部屏蔽了，但是依然存在事件,，可以使用以下函数取消事件冒泡event.stopPropagation();

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#child").bind("click",function(event){
				//使用JQuery把浏览器之间的问题全部屏蔽了
				//所使用的事件模型是DOM2
				print(event.target);
			});
			
			//使用JQuery可以有效的通过第二个参数来传递相应的JSON参数进去
			$("#child").bind("click",{"name":"zs",age:12},function(event){
				//使用JQuery把浏览器之间的问题全部屏蔽了
				//通过event.data可以获取传入的参数值
				print(event.data.name+"aaa");
			});
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<div id="content"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$("*").bind("click",function(event){
				print(event.currentTarget.id+"--"+event.target.id);
				//对于JQuery依然存在事件，可以使用以下函数取消事件冒泡
				event.stopPropagation();
				//如果对于form或者a可能不希望继续提交或者继续访问超链接，
				//可以通过event.preventDefault阻止事件继续向下走
				//特别注意：这个和事件冒泡没有任何的关系
				event.preventDefault();
			})
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<a href="ccc">abc</a>
	<div id="content"></div>
</body>
</html>

4、jquery的one函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//仅仅只会执行一次
			$("*").one("click",function(event){
				print(event.currentTarget.id+"--"+event.target.id);
			})
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<a href="ccc">abc</a>
	<div id="content"></div>
</body>
</html>

5jquery的trigger可以在其他的对象中调用另外一个事件,可以为事件传递参数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//仅仅只会执行一次
			$("*").bind("click",function(event,a,b){
				print(event.currentTarget.id+"--"+event.target.id+":"+(a+b));
			});
			
			$("a[href='ccc']").bind("click",function(event){
				/*
				 * 使用trigger带来的好处有两个
				 * 1、可以在其他的对象中调用另外一个事件
				 * 2、可以为事件传递参数
				 * 使用trigger依然也存在事件冒泡
				 */
				$("#child").trigger("click",[2,3]);
				event.preventDefault();
			});
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<a href="ccc">abc</a>
	<div id="content"></div>
</body>
</html>

6jquery的triggerHandler

使用triggerHandler带来的好处是可以直接让调用的事件
               * 不冒泡，不提交，带来的好处就是
               * 写事件我们可以完全按照最正常的方式来写，不用考虑事件传递
               * 在特殊的使用通过triggerHandler来调用就会阻止事件传递

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//仅仅只会执行一次
			$("*").not("a[href='ccc']").bind("click",function(event,a,b){
				print(event.currentTarget.id+"--"+event.target.id+":"+(a+b));
			});
			
			$("a[href='ccc']").bind("click",function(event){
				/*
				 * 使用triggerHandler带来的好处是可以直接让调用的事件
				 * 不冒泡，不提交，带来的好处就是
				 * 写事件我们可以完全按照最正常的方式来写，不用考虑事件传递
				 * 在特殊的使用通过triggerHandler来调用就会阻止事件传递
				 */
				$("#child").triggerHandler("click",[2,3]);
				event.preventDefault();
			});
			/**
			 * JQuery中的其他很多事件多可以直接通过名称来完成调用
			 */
			$("#child").mouseover(function(event){
				$(this).css("color","#f00");
			});
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<a href="ccc">abc</a>
	<div id="content"></div>
</body>
</html>

7jquery的bind和unbind

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//可以通过空格绑定多个事件
			$("#child").bind("mouseover.test mouseout.test",function(event){
				$(this).toggleClass("bgc");
			});
			//取消了mouseout事件
			//$("#child").unbind("mouseout");
			
			//可以为一组事件增加一个命名空间,在事件之后通过.来增加，
			//在移除事件的时候，可以直接通过命名空间一起移除
			$("a[href='ccc']").bind("click.test",function(event){
				print("a");
				event.preventDefault();
			});
			//移除一组事件
			$("*").unbind(".test");
			function print(txt) {
				$("#content").append(txt+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent">
		<div id="child">
			点了看一下
		</div>
	</div>
	<a href="ccc">abc</a>
	<div id="content"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".ccc").bind("click",function(event){
				alert($(this).html());
			});
			//基于bind所带来的问题是，当新增加元素的时候，没有办法为新元素绑定事件
			//需要重新使用bind来bind方法来绑定。
			$("#content").append("<div class='ccc'>bbbbb</div>");
		});
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
	</div>
</body>
</html>

8使用了Live事件之后，就有效解决了新元素无法绑定的问题, live事件存在的原理是通过事件委托的方式, 事件委托是通过冒泡机制实现的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".ccc").live("click",function(event){
				alert($(this).html());
			});
			/*
			 *  使用了Live事件之后，就有效解决了新元素无法绑定的问题
			 *  live事件存在的原理是通过事件委托的方式
			 *  事件委托是通过冒泡机制实现的
			 */
			$("#content").append("<div class='ccc'>bbbbb</div>");
		});
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
	</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//第二个参数可以指定相应的上下文，说明事件委派的根对象是什么
			//但是以下写法很难看，所以jquery在1.3之后提供delegate的方法来替代
			$(".ccc","#content").live("click",function(event){
				alert($(this).html());
			});
			/*
			 *  使用了Live事件之后，就有效解决了新元素无法绑定的问题
			 *  live事件存在的原理是通过事件委托的方式
			 *  事件委托是通过冒泡机制实现的
			 */
			$("#content").append("<div class='ccc'>bbbbb</div>");
			$("#abc").append("<div class='ccc'>bbbbb</div>");
		});
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
	</div>
	<div id="abc"></div>
</body>
</html>

9事件委托的原理

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//closest就是向上找，如果自己满足就返回，如果自己不满足，继续向上走
			//$("#ll").closest("ul").css("color","#ff0");
			//由于closest可以从自己找，所以closet非常适合做事件委派
			//$("#ll").closest("li").css("color","#ff0");
			/*
			 * 事件委托的原理
			 * 此时每一个事件只要被点击到，他都会冒泡到document去
			 * 所以以下事件会被处理
			 * 在处理时，判断一下该事件是否是我要处理的对象就可以了
			 * 
			 */
			$("#content").bind("click",function(event){
				var obj = $(event.target).closest(".ccc");
				if((obj[0])==event.target) {
					alert("abc");
				}
			});
			/*
			 * 对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题
			 * 1、每个事件都会冒泡到document上面去，开销变大
			 * 2、使用Live不支持一些特殊的事件
			 * 对于live方法而已，它提供了第二参数来说明绑定的上下文
			 */
			/*
			 *  使用了Live事件之后，就有效解决了新元素无法绑定的问题
			 *  live事件存在的原理是通过事件委托的方式
			 *  事件委托是通过冒泡机制实现的
			 */
			$("#content").append("<div class='ccc'>bbbbb</div>");
			$("#abc").append("<div class='ccc'>bbbbb</div>");
		});
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
		<ul>
			<li>bcd</li>
			<li>
				<ul>
					<li>dddd</li>
					<li id="ll">abc</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="abc"></div>
</body>
</html>

10JQuery在1.8之后就统一使用on和off来替代bind,live和delegate

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			/*
			 * 由于live事件写法很怪，所以在1.4之后提供了delegate来完成事件委派
			 * $("#content")表示的是作用域，第一个参数表示的是绑定对象
			 * 此时live就不再被使用了，在未来的版本live会被取消
			 * 目前如果要做事件委派可以有多种方法，使得事件的调用选择很多，JQuery在1.8之后
			 * 就统一使用on和off来替代bind,live和delegate
			 */
			$("#content").delegate(".ccc","click",function(event){
				alert($(this).html());
			});
			$("#content").append("<div class='ccc'>bbbbb</div>");
			$("#abc").append("<div class='ccc'>bbbbb</div>");
		});
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
	</div>
	<div id="abc"></div>
</body>
</html>

11 jquery的on和off方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		.bgc{
			background: #f00;
			color:#fff;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//此时on的第二个参数没有设定，就认为是对.ccc绑定
			//这显然就是模拟了bind
			//$(".ccc").on("click",runc);
			//当第二参数有值的时候，调用的对象就作为委派根对象
			$("#content").on("click",".ccc",runc);
			//以上模拟的是bind
			$("#content").append("<div class='ccc'>dddddd</div>");
			$("#abc").append("<div class='ccc'>dddddd</div>")
		});
		function runc(event) {
			alert($(this).html());
		}
	</script>
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
	</div>
	<div id="abc"></div>
</body>
</html>

12jquery的鼠标事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<style type="text/css">
		#parent1,#parent2 {
			height:200px;
			width:300px;
			background:#8e7;
			margin:40px;
		}
		#child1,#child2 {
			height:60px;
			width:150px;
			background: #843;
			position:relative;
			left:30px;
			top:30px;
		}
	</style>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			
			/*
			 * 当时有mouseover的时候，如果从父类移到子类依然也会得到
			 * 一个父类的mouseout事件，很多时候这种处理是不需要的
			 * 所以在JQuery中通过mouseenter和mouseleave来替换
			 */
			// $("#parent1").on("mouseover mouseout",function(event){
				// print(event.type+","+this.id);
			// });
// 			
			// $("#child1").on("mouseover mouseout",function(event){
				// print(event.type+","+this.id);
			// });
			
			//在JQuery中通常建议使用mouseenter和mouseleave来代替mouseover和mouseout
			$("#parent2").on("mouseenter mouseleave",function(event){
				print(event.type+","+this.id);
			});
			
			$("#child2").on("mouseenter mouseleave",function(event){
				print(event.type+","+this.id);
			});
			
			//使用hover可以有效的实现mouseenter和mouseover的轮换
			$("#parent1").hover(function(event){
				print(event.type+","+this.id);
			},function(event){
				print(event.type+","+this.id);
			});
			
			$("#child1").hover(function(event){
				print(event.type+","+this.id);
			},function(event){
				print(event.type+","+this.id);
			});
			
			function print(text) {
				$("#content").append(text+"<br/>");
			}
		});
	</script>
</head>
<body id="body">
	<div id="parent1">
		parent1
		<div id="child1">chidl1</div>
	</div>
	
	<div id="parent2">
		parent2
		<div id="child2">chidl1</div>
	</div>
	
	<div id="content"></div>
</body>
</html>

wenzhu0_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java的event学习

1.获取事件发生的目标需要根据不同的浏览器进行判断，需要根据不同的浏览器进行判断，微软的只知道window.eventIE不知道target而是使用srcElement来代替模式的DOM0，会产生事件冒泡，可以通过event.stopPropagation()来取消事件的冒泡机制//IE是通过这个变量来取消冒泡 event.cancelBubble = true;
复制链接

扫一扫