js事件添加详解

最新推荐文章于 2019-07-10 15:24:22 发布

风火一回

最新推荐文章于 2019-07-10 15:24:22 发布

阅读量483

点赞数

分类专栏： JavaScript 文章标签： on事件 addEventListener事件 attachEvent事件

本文链接：https://blog.csdn.net/mafan121/article/details/46501399

版权

JavaScript 专栏收录该内容

74 篇文章 4 订阅

订阅专栏

对同以元素添加多次同一事件。

使用传统的“on+事件名”，这种方式只适用于DOM对象，对jQuery对象没用。这种情况下只有最后一次添加的事件生效，其他事件均无效。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		document.getElementById("test").οnclick=method1;
		document.getElementById("test").οnclick=method2;
		document.getElementById("test").οnclick=method3;
	});
	function method1(){
		alert("this is  first test");
	}
	function method2(){
		alert("this is  second test");
	}
	function method3(){
		alert("this is  last test");
	}
</script>
</head>
<body>
	<div id="test">测试</div>	
</body>
</html>

显示结果为：

使用addEventListener事件为谷歌浏览器中同一元素添加3次click事件。其显示结果是从前往后依次显示每次事件。

method1——>method2——>method3

浏览器默认的事件添加即为这种方式，不可用jQuery对象操作元素，只能用标准的DOM对象操作元素，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		document.getElementById("test").addEventListener('click',method1,false);
		document.getElementById("test").addEventListener('click',method2,false);
		document.getElementById("test").addEventListener('click',method3,false);
	});
	function method1(){
		alert("this is  first test");
	}
	function method2(){
		alert("this is  second test");
	}
	function method3(){
		alert("this is  last test");
	}
</script>
</head>
<body>
	<div id="test">测试</div>	
</body>
</html>

使用attachEvent事件为IE浏览器中同一元素添加3次click事件。其显示结果是从后往前依次显示每次事件。

注意：在IE6、7、8、9下支持该事件，之后已用add事件替换了attachEvent事件。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		document.getElementById("test").attachEvent('onclick',method1);
		document.getElementById("test").attachEvent('onclick',method2);
		document.getElementById("test").attachEvent('onclick',method3);
	});
	function method1(){
		alert("this is  first test");
	}
	function method2(){
		alert("this is  second test");
	}
	function method3(){
		alert("this is  last test");
	}
</script>
</head>
<body>

风火一回

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件添加详解

对同以元素添加多次同一事件。使用传统的“on+事件名”，这种方式只适用于DOM编程，对jquery没用。这种情况下只有最后一次添加的事件生效，其他事件均无效。例如：Insert title here $(function(){ document.getElementById("test").onclick=method1; document.getElementById
复制链接

扫一扫