DOM2级事件处理程序详解以及兼容性写法

最新推荐文章于 2022-07-08 16:19:44 发布

源@

最新推荐文章于 2022-07-08 16:19:44 发布

阅读量214

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48727085/article/details/108244446

版权

<!DOCTYPE HTML>
<html lang = 'en'>
	<head>
		<meta charset = 'UTF-8'/>
		<title>Document1</title>
		<style>
			.a{
				width:200px;
				height:200px;
				background-color:red;
			}
			.b{
				width:100px;
				height:100px;
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div class = 'a'>
			<div class = 'b'></div>
		</div>
		<script>	
			var a = document.getElementsByTagName('div')[0];
			var b = document.getElementsByTagName('div')[1];
			//这后面的false代表是否冒泡
			//addEventListener('click', foo, false);
			//b.addEventListener('click', foo2, false);
			//a.addEventListener('click', foo2, false)
			//移除事件监听器
			//a.removeEventListener('click', foo);
			

			//ie里面的写法
			//a.attachEvent('onclick', foo);
			//a.detachEvent('onclick', foo);
			/*function foo(){
				console.log('a');
			}
			function foo2(e){
				var evt = e || event;
				console.log('a2');
				evt.cancelBubble = true;
			}*/
			//Dom2级事件处理程序利用添加事件监听器能同时给一个dom元素添加
			//两个程序，并且可以同时执行
			//而普通的dom元素值可以执行一个事件，并且后面一个事件覆盖前面一个事件
			/*a.onclick = function(){
				console.log('a');
			}
			a.onclick = function(){
				console.log('a2');
			}*/

	
			//兼容性写法	
			//obj : 事件绑定在谁身上 type ： 事件名称  fun具体的函数
			function adEvent(obj, type, fun){
				if(obj.addEventListener){
					obj.addEventListener(type, fun, false);
				}else{
					obj.attachEvent('on' + type, fun);
				}
			}
			function removeEvent(obj, type, fun){
				if(obj.removeEventListener){
					obj.removeEventListener(type, fun)
				}else{
					obj.detachEvent('on' + 'type', fun)
				}
			}
			adEvent(a,'click', foo);
			removeEvent(a, 'click', foo);
			function foo(){
				console.log('ok')
			}
		</script>
	</body>
</html>

源@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM2级事件处理程序详解以及兼容性写法

<!DOCTYPE HTML><html lang = 'en'> <head> <meta charset = 'UTF-8'/> <title>Document1</title> <style> .a{ width:200px; height:200px; background-color:red; } .b{ width:100px; heigh
复制链接

扫一扫