DOM二级事件

qq_45783949

已于 2024-05-16 21:23:58 修改

阅读量532

点赞数

分类专栏： HTML 文章标签： javascript

于 2020-07-20 19:36:34 首次发布

本文链接：https://blog.csdn.net/qq_45783949/article/details/107469740

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM2级事件处理程序
添加事件监听器：addEventListener(事件名，处理函数，布尔值)
移除事件监听器：removeEventListener(事件名)
IE下的事件监听器：attachEvent(事件名，处理函数)，
detachEvent(事件名，处理函数)

添加事件监听器

对同一事件可添加两个以上函数，去掉on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background-color: #CECECE;
			}
			#inner{
				width: 100px;
				height: 100px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			
			//对同一事件可添加两个以上函数 ，去掉on
			outer.addEventListener("click",foo,false);
			outer.addEventListener("click",bar,false);
			function foo(){
				console.log("outer1");
			}
			function bar(){
				console.log("outer2");
			}
			
		</script>
	</body>
</html>

清除事件监听

outer.removeEventListener("click",foo);

事件监听子父级（默认冒泡）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			DOM2级事件处理程序
				添加事件监听器：addEventListener(事件名，处理函数，布尔值)
				移除事件监听器：removeEventListener(事件名)
			IE下的事件监听器：attachEvent(事件名，处理函数)，
						detachEvent(事件名，处理函数)
		</title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background-color: #CECECE;
			}
			#inner{
				width: 100px;
				height: 100px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			
			//对inner进行事件监听
			inner.addEventListener("click",baz,false);
			//对outer进行事件监听
			outer.addEventListener("click",foo,false);
			
			function foo(){
				console.log("outer1");
			}
			
			function baz(){
				console.log("inner");
			}
		</script>
	</body>
</html>

效果：点击子块，控制台输出
inner
----------------------------------------------------------------------------/
outer1

事件监听子父级捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

若将false–>true，效果：点击子块，控制台输出
outer1
-------------------------------------------------------------------------/
inner

事件监听 IE版（js关键代码）

//IE版
			outer.attachEvent("onclick",foo);
			outer.detachEvent("onclick",foo);

事件监听兼容版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background-color: #CECECE;
			}
			#inner{
				width: 100px;
				height: 100px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			function foo(){
				console.log("outer1");
			}
			function bar(){
				console.log("outer2");
			}
			function baz(){
				console.log("inner");
			}
			
			//实现兼容性
			//添加事件监听
			function addEvent(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,false);
				}else{
					obj.detachEvent("on"+type,fun);
				}
			}
			addEvent(outer,"click",foo);
			addEvent(inner,"click",baz);
		</script>
	</body>
</html>

qq_45783949

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM二级事件

DOM2级事件处理程序添加事件监听器：addEventListener(事件名，处理函数，布尔值)移除事件监听器：removeEventListener(事件名)IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)DOM二级事件添加事件监听器对同一事件可添加两个以上函数，去掉on清除事件监听事件监听子父级（默认冒泡）事件监听子父级捕获事件监听 IE版（js关键代码）事件监听兼容版添加事件监听器对同一事件可添加两个以上.
复制链接

扫一扫