JavaScript事件兼容(事件介绍的补充)及事件闭包

最新推荐文章于 2022-08-31 10:28:09 发布

qq_43552118zx

最新推荐文章于 2022-08-31 10:28:09 发布

阅读量142

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_43552118/article/details/84977591

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.事件兼容

1. 事件绑定:addeventListener():用于注册处理程序,IE 中使用 attachEvent

语法格式:addeventListener(参数1,参数2,参数3):参数1-----表示事件类型; 参数2-----表示函数名称; 参数3-----表示是否冒泡(value为true/false)

2. 事件移除:removeEventListerner()

案例1:事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var bn=document.getElementById('btn');
				bn.addEventListener('click',bang,false);
				function bang(){
//					alert('你已经注册了绑定事件');
					console.log('你已经注册了绑定事件');
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="事件的绑定" />
	</body>
</html>

案例2:事件移除:通过dom标准提供的添加事件监听程序的方式可以给一个元素添加多个事件

想要移除事件必须先添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			var btn1=document.getElementById('btn1');
			var btn2=document.getElementById('btn2');
//			通过dom标准提供的添加事件监听程序的方式可以给一个元素添加多个事件
//			btn2.addEventListener('click',function(){
//				alert('第一个事件');
//              console.log('第一个事件');
//			},false);
//			btn2.addEventListener('click',function(){
//				alert('第一个事件');
//              console.log('第一个事件');
//			},false);
//			想要移除添加的事件处理函数就不能使用匿名函数
            btn2.addEventListener('click',show,false)
            function show(){
//          	alert('第一个事件');
                console.log('第一个事件');
            }
            btn2.removeEventListener('click',show,false);
		}
			
			
		</script>
	</head>
	<body>
		<button id="btn1">按钮 1</button>
		<button id="btn2">按钮 2</button>
	</body>
</html>

3. 事件对象Event

(1). 概念:事件对象封装了事件发生的详细信息,如(鼠标、键盘事件) 。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

常用的鼠标事件:

常用的键盘事件

(2). event事件的产生:

例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 事件通常与函数结合使用，函数不会在事件发生前被执行

(3). IE 中的事件对象： IE 中的事件对象是一个隐式可用的全局对象：event，它是 window 对象的一个属性。

标准 DOM 的事件对象：在标准 DOM 浏览器检测发生了某个事件时，将自动创建一个 Event 对象，并隐式地将该对象作为事件处理函数的第一个参数传入

       获取触发事件的目标对象: e.target || e.srcElement
       获取当前的事件类型: e.type
       返回引发事件的元素名称: e.tagName
       获取事件触发时的具体时间: e.timestamp
       获取当前所绑定的事件元素: e.currentTarget

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//使用事件对象event 提供关于事件的相关详细信息
			window.onload=function(){
				var img1=document.getElementById('img1');
				img1.onclick=heandle;
			}
			function heandle(oEvent){
				if(window.event){
					oEvent=window.event;
				}
				//兼容低版本的IE
				var oTarget;
				if(oEvent.srcElement){
					//获取触发事件的元素
					oTarget=oEvent.srcElement;
				}else{
					oTarget=oEvent.target;
				}
				//返回事件目标的名称 使用属性tagName
				alert(oTarget.tagName); //获取事件目标 的名称
			}
		</script>
	</head>
	<body>
		<img src="img/bgImage_01.png" id="img1" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/Demo1.css"/>
		<script type="text/javascript">
			window.onload = function() {
				document.getElementById("body").addEventListener("click",eventHandler);
			}
			//event：提供事件处理时的具体时间
			//event.timeStamp  表示获取事件触发时的具体时间
			function eventHandler(event) {
				console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" +event.target.id +" 当前节点："+event.currentTarget.id);
			}
			
		</script>
	</head>
	<body id="body">
		<div id="box1" class="box1">
			<div id="box2" class="box2">
				<span id="span">This is a span.</span>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var imgs=document.getElementById('img01');
				imgs.onclick=events;
				imgs.onmousedown=events;
				imgs.onmouseenter=events;
				imgs.onmouseleave=events;
				imgs.onmouseout=events;
			}
			function events(oevent){
				if(window.event){
					oevent=window.event;
			}
			var divs=document.getElementById('dis');
			divs.innerHTML+=oevent.type;
		}
		</script>
	</head>
	<body>
		<img src="../img/bgImage_01.png" alt="" id="img01"width="200px"height="100px"/>
		<div id="dis"></div>
	</body>
</html>

(4)阻止事件冒泡
e.stoppropagation();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/Demo2.css"/>
		<script type="text/javascript">
			window.onload=function(){
			  document.getElementById('box1').addEventListener('click',function(event){
			  	alert('你点击了box1');
			  	event.stopPropagation();
			  });
			  document.getElementById('box2').addEventListener('click',function(event){
			  	alert('你点击了box2');
			  	event.stopPropagation();
			  });
			  document.getElementById('span').addEventListener('click',function(event){
			  	alert('你点击了最里面的span');
			  	event.stopPropagation();
			  });
				
			}
		</script>
	</head>
	<body>
		<body id="body">
		<div id="box1" class="box1">
			<div id="box2" class="box2">
				<span id="span">This is a span.</span>
			</div>
		</div>
	</body>
</html>

(5)阻止默认
event.preventDefault();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//以下两个方法都是用来阻止默认 事件的发生
			//w3c 的方法是 e.preventDefault()，
			//IE 则是使用 e.returnValue =false;
			//通过传统的方式设置  阻止默认
				var a1=document.getElementsByTagName('a')[0];
				a1.onclick=function(event){
					//alert('页面跳转,触发事件');
					event.preventDefault(); //阻止默认行为
				}
				a1.addEventListener('click',function(e){
					e.preventDefault();  //阻止默认
					if(e.preventDefault()){  //W3c标准
						e.preventDefault();
					}else{
						window.event.returnValue=false;  //IE提供阻止默认的方式
					}
				})
			}
			
		</script>
	</head>
	<body>
		<a  href="http://www.yltedu.com" target="_blank">英莱特科技</a>
	</body>
</html>

三,函数闭包

(1) 闭包概念:是指用权限访问另一个函数中作用域中变量/或者说一个函数可以访问另一个函数中局部变量（即闭包就是能够读取其他函数内部变量的函数）

（2）变量的作用域：要理解闭包，首先必须理解 Javascript 特殊的变量作用域。变量的作用域包括两种：全局变量和局部变量。 Javascript 语言的特殊之处，就在于函数内部可以直接读取全局变量。

任何一个函数都可以视为一个闭包,但是嵌套的函数闭包的作用更加强大(产生一个作用域链 scope chain)

常用的关键字 return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
//			闭包: 在js中任何一个函数都是一个闭包,但是嵌套的函数闭包作用会更大;
//			闭包: 一个函数中的变量 可以被其他函数所访问
			
//			在了解闭包之前  一定得先明白变量的作用域: 分为两种
//			全局变量和局部变量
//			函数内部声明变量的时候，一定要使用 var 命令。
//			如果不用的话，你实际上声明了一个全局变量！
			
			//问题: 如何从外部读取函数内部的变量?
			//解决: 在 函数体内嵌套函数
//			function snake(){ 	  //创建一个蛇对象			
//				var color='white';  //创建属性
//				//var length=30;
//				var width=20;
//				var height=20;
//				function snake1(){
					var color_01='red';
//					alert(color);
//				}
//				snake1();
//			}
//			snake();  //输出color的结果为: white
			//以上函数嵌套  是 JS中特殊的作用域立链  scope  chain
			//父对象的所有变量，对子对象都是可见的，反之则不成立
			
			function snake(){ 	  //创建一个蛇对象			
				var color='white';  //创建属性
				var width=20;
				var height=20;
				function snake1(){
					return color;
				}
//				var color_01=snake1();  return color_01;
				return snake1();
			}
			alert(snake());
		</script>
	</head>
	<body>
	</body>
</html>

qq_43552118zx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件兼容(事件介绍的补充)及事件闭包

一.事件兼容1. 事件绑定:addeventListener():用于注册处理程序,IE 中使用 attachEvent语法格式:addeventListener(参数1,参数2,参数3):参数1-----表示事件类型; 参数2-----表示函数名称; 参数3-----表示是否冒泡(value为true/false)2. 事件移除:removeEventListerner()案...
复制链接

扫一扫

专栏目录