W3C事件处理函数

最新推荐文章于 2023-04-03 17:27:35 发布

「已注销」

最新推荐文章于 2023-04-03 17:27:35 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： w3c 浏览器 dom ie function

本文链接：https://blog.youkuaiyun.com/yuanjin1988/article/details/41986561

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文深入解析DOM2级事件的使用方法，包括addEventListener和removeEventListener的运用，以及IE事件绑定机制的区别。同时，展示了如何通过事件绑定实现特定功能，包括事件的冒泡与捕获机制。此外，还探讨了IE与现代浏览器事件处理的差异，并提供了实例代码以加深理解。

“DOM2级事件”定义了两个方法
addEventListener() 添加事件
removeEventListener() 删除事件
它们接受3个参数：事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)
IE只支持冒泡

<!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=gb2312">
		 <style type = "text/css">
			.red
			{
				width : 100px;
			   	height : 100px;
				background : red;
			}
			
			.blue
			{
				width : 100px;
				height : 100px;
				background : blue;
			}
		 </style>
		 <script type="text/javascript" src="demo.js"></script>
		<title>事件绑定及深入</title>
	</head> 
	 
	<body> 
			<div id = "box" class = "red">测试Div</div>
	</body>
	
</html>

//无覆盖问题  
window.addEventListener("load",function()  
{  
    alert("ok");  
},false);  
window.addEventListener("load",function()  
{  
    alert("yes");  
},false);  
window.addEventListener("load",function()  
{  
    alert("no");  
},false);

//相同函数屏蔽  
window.addEventListener("load",init,false);  
window.addEventListener("load",init,false);  
window.addEventListener("load",init,false);  
function init()  
{  
    alert("ok");  
}

//可以传递this  
window.addEventListener("load" , function()  
{  
    var box = document.getElementById("box");  
    box.addEventListener("click",function()  
    {  
        alert(this);  
    },false);  
},false);  
window.addEventListener("load" , function()
{
    var box = document.getElementById("box");
    box.addEventListener("click",function()
    {
        alert(this);
    },false);
},false);

//进一步测试可以传递this  
window.addEventListener("load" , function()  
{  
    var box = document.getElementById("box");  
    box.addEventListener("click",toBlue,false);  
},false);  
 
function toRed()  
{  
    this.className = "red";  
    this.removeEventListener("click",toRed,false);  
    this.addEventListener("click",toBlue,false);  
}  

function toBlue()  
{  
    this.className = "blue";  
    this.removeEventListener("click",toBlue,false);  
    this.addEventListener("click",toRed,false);  
}

//额外添加一个方法，不会被覆盖或只执行一次
window.addEventListener("load" , function()
{
    var box = document.getElementById("box");
    box.addEventListener("click",function()
    {
        alert("ok");
    },false)
    box.addEventListener("click",toBlue,false);
},false);


function toRed()
{
    this.className = "red";
    this.removeEventListener("click",toRed,false);
    this.addEventListener("click",toBlue,false);
}


function toBlue()
{
    this.className = "blue";
    this.removeEventListener("click",toBlue,false);
    this.addEventListener("click",toRed,false);
}

IE8和之前的浏览器并不支持，而是采用自己的事件，I9已完全支持

//冒泡和捕获   
//冒泡：从里往外冒；   
  
window.addEventListener("load",function()  
{  
    var box = document.getElementById("box");  
    box.addEventListener("click",function()  
    {  
        alert("div");  
    },false);  

    document.addEventListener("click",function()  
    {  
        alert("document");  
    },false);  
},false);

//冒泡和捕获
//捕获：从外往里进；
window.addEventListener("load",function()
{
    var box = document.getElementById("box");
    box.addEventListener("click",function()
    {
        alert("div");
    },true);

    document.addEventListener("click",function()
    {
        alert("document");
    },true);

},true);

IE事件绑定机制(现代)
attachEvent
detachEvent
IE11 不支持 attachEvent