关于取消DOM 0级事件和2级事件时的小坑

请看下面代码：

<body>
	<button id="btn">click</button>	
</body>
<script>
	var btn = document.getElementById("btn");
	function show1(){
		alert("aaaaaa");
	}
	btn.addEventListener("click",show1,false);
	btn.removeEventListener("click",show1,false);
</script>

　　

以及：

<body>
	<button id="btn">click</button>	
</body>
<script>
	var btn = document.getElementById("btn");
	function show1(){
		alert("aaaaaa");
	}
	btn.onclick = show1;
	btn.onclick = null;
</script>

　　

之所以对于上面这段代码有点以后是因为：

　　JavaScript是脚本语言，那么执行的时候就因该是从上到下依次执行每条语句，那么在绑定事件处理程序的之后，在取消事件处理程序之前，绑定的事件处理程序就已经执行了，而取消一个已经执行的事件，应该是无用的，但是确实实现了。

上面是我最初的错误观念，正确的说法应该是：

　　JavaScript是脚本语言，那么执行的时候就因该是从上到下依次执行每条语句，那么在绑定事件处理程序的之后，在取消事件处理程序之前，绑定的事件处理程序并没有执行，因为没有触发，执行的是绑定事件操作，绑定事件的操作已经成功执行了，所以后面将一个没有触发的事件程序取消，是可行的。

　　除非是绑定的事件处理程序已经触发，那么就肯定不能取消了，只能在事件处理程序触发之前取消才有意义。

 

比如下面这个例子，就没多大意义：

<body>
	<button id="btn">click</button>	
</body>
<script>
	var btn = document.getElementById("btn");
	function show1(){
		alert("aaaaaa");
	}
	window.onload = function(){
		btn.onclick = show1;
	}
	alert("xxxxx");
	btn.onclick = null;
</script>

　　页面加载过程中，先执行alert("xxxx")，然后取消事件处理程序，然而此时并没有绑定事件，只有在文档加载完毕才绑定事件处理程序，所以，事件处理程序实际上是取消成功的，只不过后面又加上了。

 

posted @ 2018-05-21 22:57  寻觅beyond  阅读(402)  评论(0)    收藏  举报
返回顶部