JavaScript：DOM事件流总结

最新推荐文章于 2024-03-17 23:56:58 发布

幸福璐

最新推荐文章于 2024-03-17 23:56:58 发布

阅读量582

点赞数

分类专栏： web前端文章标签：前端 javascript dom 对象 java

本文链接：https://blog.youkuaiyun.com/lululul123/article/details/53534025

版权

web前端专栏收录该内容

27 篇文章

订阅专栏

本文深入讲解JavaScript中的事件处理机制，包括事件流的概念、不同类型的事件流（事件冒泡与事件捕获）、添加与删除事件的方法及其浏览器兼容性问题，并探讨如何利用事件对象控制事件传播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次听课或看书之后，都会对自己学的知识做个小总结，希望有助于自己能力的提高，真的发现，学习技术，动手还是最重要的，自己听一遍课或看完书，总是理解不透彻，或者以为懂了东西，真正实践时才发现有很多与自己想的不一样的地方。希望每一次的总结都让自己里前端高级工程师更进一步。

JavaScript和html之间的交互是通过事件来进行交互的。

一、事件流

概念：事件流描述的是从页面中接受事件的顺序。有两种类型的事件流：事件冒泡和事件捕获。

事件冒泡：当我们触发一个事件时候，是从最具体的那个元素（文档中嵌套层次最深的那个节点）开始接收，然后逐级向上传播至最不具体的那个节点。

例子：如下，当我们点击按钮这个事件时，最先被触及的是按钮，之后是div，body，html；

<html>
  <head></head>
  <body>
    <div>
        <input type="button" >按钮</input>
    </div>
  </body>
</html>

事件捕获：和事件冒泡的顺序正好完全相反，如上面的代码，当我们点击按钮时，最先被触发的是html->body->div->按钮。

二、添加事件和删除事件的方法

I、html事件处理程序

该方法直接把事件添加到html框架中的html元素上。这个方法很少被用，因为它有很严重的缺点：使得html和JavaScript紧密的结合，但一个改变另一个必须改变。

<html>
<head>
 <script>
     function here(){
     alert("点击");
     }
 </script>
<head>
<body>
	<div>
	<input type="botton" οnclick="here()">按钮</input>
	</div>
<body>
</html>

II、DOM0级事件处理程序

这是一个常用的，较为传统的方法：把一个函数赋值给一个事件的处理程序属性。

优点：简单，跨浏览器使用。

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>	
    <input type="button" id="btn" value="按钮"></input>
    <script >
    var btn1=document.getElementById('btn');
    btn1.οnclick=function(){
     alert("点击");
     };

     btn1.οnclick=null;//删除事件的方法
 </script>
<body>
</html>

III、DOM2级事件处理程序

IE，Opera浏览器和chorm，firefox浏览器的处理方法不一样：

（1）chrome和firefox等浏览器添加事件和删除事件的方法。

添加事件：Element.addEventListener(A,B,C);

删除事件：Element.removeEventListener(A,B,C);

参数A：要处理的事件的名称，如click,morseover等，不要加on，要记得加单引号。

参数B：事件处理程序的函数，不加括号，不加单引号。

参数C：布尔值，false（以事件冒泡方法处理程序。）

true（以事件捕获方法处理程序。）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>	
    <input type="button" id="btn" value="按钮"></input>   
    <script type="text/javascript">
    var btn1=document.getElementById('btn');
    btn1.addEventListener('click',pro,false);

    btn1.removeEventListener（‘click',pro,false);//删除事件的方法
	function pro(){
		alert("点击");
	}
 </script>
<body>
</html>

（2）IE和OPERA等浏览器添加事件和删除事件的方法

添加事件：Element.attachEvent(A,B);

删除事件：Element.detachEvent(A,B);

参数A：事件处理程序名称，注意加on，加单引号；

参数B：处理事件的函数，不加括号，不加单引号；

<!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" />
</head>
<body>    
    <input type="button" id="btn" value="按钮"></input>
    
    <script type="text/javascript">
    var btn1=document.getElementById('btn');
   btn1.attachEvent('onclick',pro);	
   btn1.detachEvent('onclick',pro);//删除事件
	function pro(){
		alert("点击");
	}
 </script>
<body>
</html>

（3）我们可以看到不同浏览器使用的添加删除事件的方法不一样，为了保证兼容性，我们需要封装一个对象。对象中是处理不同浏览器的添加删除事件的方法。

var eventUtil={
		addHandler:function(element,type,program){
			if(element.addEventListener){
				element.addEventListener(type,program,false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type);
			}else{
				element["on"+type]=program;//js中所有用点的都可以中中括号
			}
		},
		removeHandler:function(element,type,program){
			if(element.removeEventListener){
				element.removeEventListener(type,program,false);
			}else if(element.detachEvent){
				element.detachEvent("on"+type,program);
			}else{
				element['on'+type]=null;
			}
		}
}

三、事件对象

在触发DOM上的事件时，都会产生一个对象，这个对象包含很多信息。如：当我们按键盘上的按键时，这个动作导致的事件对象会包含与该事件相关的信息，例如到底是按了空格还是回车。

I、chorm，firefox等浏览器中的事件对象常用的属性及方法：

属性：object.type:返回事件的类型；如会显示click，mouseover等。

object.target:获取事件的目标（事件来自哪个元素）；如来自input会显示

【object HTMLInputElement】

方法：object.stopPropagation(); 用来取消事件冒泡，如点击的是按钮就是单击按钮，不触及其他。

object.preventDefault();阻止事件的默认行为；如<a></a>的默认行为是跳转，而这个方法可以使得，当我们触及a这个事件时，不发生跳转。

使用方法：在处理兼容性程序中展示；

II、IE等浏览器中的事件对象中常用的属性：

属性：object.type;返回事件的类型；

object.srcElement;获取事件的目标（事件来自哪个元素）；

object.cancelBubble; true表示阻止冒泡，false表示不阻止冒泡。

object.returnValue; true表示不阻止事件的默认行为，false表示阻止事件的默认行为。

III、解决上面的浏览器兼容问题。

下面这点代码包含得到触发事件的类型、知道事件来自那个元素，阻止冒泡，阻止默认行为这些浏览器兼容问题。

var eventUtil={
		getEvent:function(event){
			//非ie浏览器直接进行对象传输，ie浏览器需要window获取。
 		return event?event:window.event;
		},
		getType:function(event){
			return event.type;
		},
		getElement:function(event){
			return event.target||event.srcElement;
		},
		stopMaopao:function(event){
			if(event.stopPropagation){
				event.stopPropagation();
			}else{
				event.cancelBubble=true;
			}
		},
		preventDefault:function(event){
			if(event.preventDefault){
				event.preventDefault();
			}else{
				event.returnValue=false;
			}
		},
		addHandler:function(element,type,program){
			if(element.addEventListener){
				element.addEventListener(type,program,false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type);
			}else{
				element["on"+type]=program;
			}
		},
		removeHandler:function(element,type,program){
			if(element.removeEventListener){
				element.removeEventListener(type,program,false);
			}else if(element.detachEvent){
				element.detachEvent("on"+type,program);
			}else{
				element['on'+type]=null;
			}
		}
}

在新建以js文件，里面是函数的调用：是在文件加载完处理。

window.οnlοad=function(){
	var box=document.getElementById('box');
	var btn1=document.getElementById('btn');
	var lian=document.getElementById('lian');
	eventUtil.addHandler(box,'click',function(e){
		alert("我是父盒子，没有点击，我但是我出来了");
	});
	eventUtil.addHandler(btn1,'click',function(event){
		e=eventUtil.getEvent(event);
		eventUtil.stopMaopao(e);
		//alert(eventUtil.getType(e));
		alert(eventUtil.getElement(e));
		});
	eventUtil.addHandler(lian,'click',function(event){
		e=eventUtil.getEvent(event);
		eventUtil.preventDefault(e);
		});
}

这样html中只有只有html，不会乱。外部引入js即可。

<!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" />
<script src="../js/EventUtil.js"></script>
<script src="../js/script.js"></script>
</head>
<body id="box">    
      <input type="button" id="btn" value="按钮"></input>
      <a id="lian" href="http://www.baidu.com">连接</a>
<body>
</html>

除此之外的一个小注意点：

在js中所有很有使用点的地方都可以使用中括号[]代替。