EventTarget方法：addEventListener() 事件监听

最新推荐文章于 2023-12-06 09:53:11 发布

怪弹幕

最新推荐文章于 2023-12-06 09:53:11 发布

阅读量992

点赞数

分类专栏： CSS笔记文章标签： javascript

本文链接：https://blog.csdn.net/SORYUSHIKINAMI/article/details/106062113

版权

CSS笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<!-- <link rel="stylesheet" href=""> -->
	<style type="text/css">
		div {
			padding: 50px;
		}

		#div1{
			background-color: pink;
		}

		#div2 {
			background-color: violet;
		}

		#div3 {
			background-color: purple;
		}

	</style>
	<script tpye="text/javascript">
		function fn1(){
			alert('1');
		}
		function fn2(){
			alert('2');
		}
		function fn(){
			alert('3');
		}

// <!-- 	事件监听：IE浏览器下 没有
// 	标准浏览器：谷歌、火狐 有

// 	事件监听形式二：
// 	IE:----------------捕获事件！
// 		obj.attachEvent(事件名称，函数/事件执行)；
// 			1、事件名称：需要加上on；
// 			2、没有捕获；
// 			3、IE：标准IE》IE8 ；函数执行顺序》正序；
// 			非标准》IE5、6、7、9执行顺序是倒叙；
// 			4、this 统一指代window；
// 	标准浏览器：---------添加事件监听！
// 		obj.addEventListener(事件名称，函数/	事件执行，**是否捕获**)；
//在旧版本的DOM规范中，第三个参数addEventListener()是一个布尔值，指示是否使用捕获。随着时间的推移，很明显需要更多的选择。不是向函数添加更多参数（在处理可选值时使事情变得非常复杂），而是将第三个参数更改为一个对象，该对象可以包含定义选项值的各种属性，以配置删除事件侦听器的过程。

//因为旧版浏览器（以及一些不太旧的浏览器）仍假设第三个参数是布尔值，所以您需要构建代码以智能地处理此场景。您可以通过对您感兴趣的每个选项使用特征检测来执行此操作。
// 			1 事件名称：不需要加on，如onclick→→click
// 			2、有捕获
// 			3、标准浏览器下函数执行顺序：正序；
// 			4、this指代事件的对象
// 
//	方式二：
// 	false：冒泡 ；true： 捕获
// 	document.addEventListener('click',fn1,false);
// 	document.addEventListener('click',fn2,false);




// 封装事件监听
		function bind(obj,evname,fn){
			// alert(111)
			if(obj.addEventListener){
				obj.addEventListener(evname,fn,false);
			}else{
				obj.attachEvent('on'+evname,function(){
					// ie浏览器中this指代的对象为window，故需要修改，
					// fn.call()==document.οnclick=fn
					// 通过call函数可以使IE浏览器确定函数调用对象。
					fn.call(obj);
				});
			}

		}
		// bind(document,'click',fn1);
		// bind(document,'click',fn2);








		// 取消事件绑定：
		// IE:obj.attachEvent(事件名称，函数)---> obj.detachEvent(事件名称，函数)

		// 标准浏览器：谷歌、火狐：
		// obj.addEventListener(事件名称，函数/事件执行，是否捕获)--->obj.removeEventListener(事件名称，函数/事件执行，是否捕获)
		window.onload=function(){
			var div1 = document.getElementById('div1');
			var div2 = document.getElementById('div2');
			var div3 = document.getElementById('div3');

			function fn1(){
				alert(this.id);
			}

			// div1.οnclick=fn1;
			// div2.οnclick=fn1;
			// div3.οnclick=fn1;
			// 结果为3 2 1
			// div1.addEventListener('click',fn1,true);
			// div2.addEventListener('click',fn1,true);
			// div3.addEventListener('click',fn1,true);

			// div3.removeEventListener('click',fn1,true);
			// 取消事件绑定：只有1 2输出





			//addeventlistener第三个参数，冒泡与捕获的区别
			
			// false：冒泡---->结果为3  2  1； true：捕获---->结果为1 2 3
			// false代表退出返回结果（进入div1-2-3不返回，退出时开始返回 3 2 1
			// true代表进入时打印结果 1 2 3 
			
			div1.addEventListener('click',function(){
				alert('1');

			},false);

			div2.addEventListener('click',function(){
				alert('3');

			},false);

			div3.addEventListener('click',function(){
				alert('2');

			},true);

			

			// 取消绑定无效，匿名函数创建两次地址不相同，无法取消
			div3.removeEventListener('click',function(){
				alert('1');

			},false);

			div2.removeEventListener('click',function(){
				alert('3');

			},false);

			div1.removeEventListener('click',function(){
				alert('2');

			},true);

		}
		// 结果为2  3  1；


	</script>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<div id="div3">

			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
语法
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
参数部分
type
一个区分大小写的字符串，表示要侦听的事件类型。
listener
当发生指定类型的事件时接收通知（实现Event接口的对象）的对象。这必须是实现EventListener接口的对象，或JavaScript函数。
options （可选）
一个options对象，它指定有关事件侦听器的特征。可用选项包括：
capture：Boolean，表示在将这种类型的事件将被调度到已注册的listener，在被调度到DOM树下面的任何EventTarget之前。
once：Boolean，表示listener应该在添加后最多调用一次。如果为true，则会在调用时自动删除listener。
passive：Boolean，如果为true，则表示由listener指定的函数永远不会调用preventDefault()。如果被动侦听器进行了调用preventDefault()，则除了生成控制台警告之外，用户代理将不执行任何操作。
mozSystemGroup：Boolean，表示应将侦听器添加到系统组。仅适用于在XBL中运行的代码或Firefox浏览器的chrome中。
useCapture （可选）
一个Boolean，指示是否在将这种类型的事件将被调度到已注册的listener，在被调度到DOM树下面的任何EventTarget之前。向上冒泡树的事件不会触发指定使用捕获的侦听器。当两个元素都已为该事件注册了句柄时，事件冒泡和捕获是两种传播事件的方式，这些事件发生在嵌套在另一个元素中的元素中。事件传播模式确定元素接收事件的顺序。如果未指定，则useCapture默认为false。
注意：对于附加到事件目标的事件侦听器，事件处于目标阶段，而不是捕获和冒泡阶段。无论useCapture参数如何，目标阶段中的事件将按照它们注册的顺序触发元素上的所有侦听器。
注意： useCapture并非总是可选的。理想情况下，您应该将其包含在最广泛的浏览器兼容性中。
wantsUntrusted
Firefox（Gecko）特有的参数。如果为true，侦听器接收由Web内容调度的合成事件（在浏览器chrom中默认为false，常规网页中默认是true）。此参数对于加载项中的代码以及浏览器本身很有用。

怪弹幕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EventTarget方法：addEventListener() 事件监听

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title>  <style type="text/css"> d
复制链接

扫一扫

专栏目录