addEventListener()方法和removeEventListener()方法

最新推荐文章于 2024-06-19 14:30:50 发布

不甜呐

最新推荐文章于 2024-06-19 14:30:50 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript js

@不甜呐

本文链接：https://blog.csdn.net/weixin_55992854/article/details/116651535

版权

JavaScript 专栏收录该内容

24 篇文章 5 订阅

订阅专栏

1.addEventListener()

描述：addEventListener()方法用于向指定元素添加事件
语法：元素节点.addEventListener('type',ListenFunc,useCapture);
参数：
(1)第一个参数表示绑定事件的类型，【没有on!是个字符串】
(2)第二个参数表示监听函数，就是事件发生的时候执行的哪个函数(也可以使用函数名，来引用外部函数)
(3)第三个参数是否采用捕获机制，默认不写和false都代表冒泡机制，true代表捕获
注意：addEventListener()方法允许绑定多个执行函数，并且执行顺序按照绑定顺序执行

2.事件传递

描述：事件不仅能够和触发者进行交互，还能够在特定的情况下沿着domTree逐级传递，
和domTree的各个节点进行交互。这种事件的这种特性称为【事件传递机制】
类型：
(1)事件冒泡：事件从最具体的元素出发，沿domTree逐级向上传递，直到最不具体的节点停止
(2)事件捕获：事件从最不具体的节点开始触发，沿domTree逐级向下传递，直到最具体的元素停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>addEventListener</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				line-height: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<p>点我冒泡</p>
		</div>
		<script type="text/javascript">	
			var p = document.querySelector('p');
			var div = document.querySelector('div');
			var html = document.querySelector('html');
			
			p.addEventListener('click',function(){
				console.log('p被点击了');
			});
			div.addEventListener('click',function(){
				console.log('div被点击了');
			});
			html.addEventListener('click',function(){
				console.log('html被点击了');
			});
		</script>
	</body>
</html>

代码运行效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>addEventListener</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				line-height: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<p>点我捕获</p>
		</div>
		<script type="text/javascript">	
			var p = document.querySelector('p');
			var div = document.querySelector('div');
			var html = document.querySelector('html');
			
			p.addEventListener('click',function(){
				console.log('p被点击了');
			},true);
			div.addEventListener('click',function(){
				console.log('div被点击了');
			},true);
			html.addEventListener('click',function(){
				console.log('html被点击了');
			},true);
		</script>
	</body>
</html>

3.removeEventListener()

描述：本方法可以移除由 addEventListener()方法添加的事件
语法：元素节点.addEventListener('type',ListenFunc，useCapture);
参数：
(1)第一个参数表示移除事件的类型，【没有on!是个字符串】
(2)第二个参数表示移除监听函数
(3)第三个参数为可选参数，指定移除事件的阶段，默认不写和false是事件在冒泡阶段移除， true事件在捕获阶段移除
注意：
(1)如果要移除事件，addEventListener()的执行函数必须使用外部函数
(2)移出事件的函数名要与添加事件的函数名一致，否则无效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>addEventListener</title>
	</head>
	<body>
		<button type="button">你好</button>
		<script>	
			var btn = document.querySelector('button');
			//引用外部函数
			btn.addEventListener('mouseover', myFunction);
			btn.addEventListener('mouseout', mySecondFunction);
			function myFunction() {
			    console.log('鼠标移入');
			};
			function mySecondFunction() {
			    console.log('鼠标移出');
			};
		</script>
	</body>
</html>

//移除按钮的鼠标移出事件
btn.removeEventListener('mouseout',mySecondFunction,false);

4.事件兼容性写法

描述：IE8及更早IE版本，Opera7.0及Opera更早版本不支持addEventListener()和removeEventListener()方法。

对于不支持该函数的浏览器，可以使用attachEvent()方法和detachEvent()方法添加和移除事件。

添加事件兼容性写法：
       var btn = document.getElementById('button');
               if (x.addEventListener) {
               btn.addEventListener('click', myFunction);
               } else if (x.attachEvent) {
               btn.attachEvent('onclick', myFunction);
               }
移除事件兼容性写法：
       var btn = document.getElementById('button');
               if (x.addEventListener) {
               btn.removeEventListener('click', myFunction);
               } else if (x.attachEvent) {
               btn.deachEvent('onclick', myFunction);
               };

不甜呐

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
addEventListener()方法和removeEventListener()方法

1.addEventListener()描述：addEventListener()方法用于向指定元素添加事件语法：元素节点.addEventListener('type',ListenFunc,useCapture);参数： (1)第一个参数表示绑定事件的类型，【没有on!是个字符串】 (2)第二个参数表示监听函数，就是事件发生的时候执行的哪个函数(使用函数名，来引用外部函数) (3)第三个参数是否采用捕获机制，默认不写和false都代表冒泡机...
复制链接

扫一扫

专栏目录