js注册事件(绑定事件)

m0_63400611

已于 2022-05-18 15:58:30 修改

阅读量752

点赞数 1

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

于 2021-12-07 20:42:12 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121777363

版权

事件监听 addEventListener attachEvent 兼容性 JavaScript

关键词由CSDN通过智能技术生成

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

给元素添加事件,称为注册事件或者绑定事件

传统注册方式

利用on开头的事件onclick
<button onclick = "alert('hi')"></button>
btn.onclick = function() {}
特点:注册事件唯一,同一个元素同一个事件只能设置一个处理函数,后设置的处理函数会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener()是一个方法
IE9之前的IE不支持此方法,可以使用attachEvent()代替
移动端开发推荐
特点:同一个元素同一个时间可以注册多个监听器

addEventListener事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数

该方法接受三个参数:

type:事件类型字符串,比如:click,mouseover,不需要带on(例如onlick,只用写click)
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认为false

语法:

<body>
	
	<button>方法监听注册事件</button>
	
	<script>
		
//		事件监听注册事件 里面的事件类型是字符串 必须带引号 不带on
//		同一个事件可以添加多个监听器(事件处理程序)
		var btn = document.querySelector('button');
		btn.addEventListener('click',function() {
			alert(22);
		})
		btn.addEventListener('click',function() {
			alert(33);
		})
		
	</script>
	
</body>

attachEvent事件监听方式(IE9之后不支持)

eventTarger.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定监听器注册到eventTarget(目标对象)上,当对象触发指定事件时,指定的回调函数就会被执行

该方法接受两个参数:

eventNameWithOn: 事件类型字符串,比如onclick,onmouseover,这里需要带on
callback: 事件处理函数,当目标出发事件时回调函数被调用

语法:

<body>
	
	<button>方法监听注册事件</button>
	
	<script>
		
//		attachEvent IE9以前的版本支持
		var btn = document.querySelector('button');
		btn.attachEvent('onclick', function() {
			alert(11);
		})
		
	</script>
	
</body>

兼容性问题解决方案

function addEventListener(element, eventName, fn) {
			//判断当前浏览器是否支持addEventListener方法
			if(element.addEventListener) {
				element.addEventListener(eventName, fn);
			}else if(element.attachEvent) {
				element.attachEvent('on' + eventName, fn);
			}else {
				//相当于element.onclick = fn;
				element['on' + eventName] = fn;
			}
		}

m0_63400611

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js注册事件(绑定事件)

给元素添加事件,称为注册事件或者绑定事件传统注册方式利用on开头的事件onclick <button onclick = "alert('hi')"></button> btn.onclick = function() {} 特点:注册事件唯一,同一个元素同一个事件只能设置一个处理函数,后设置的处理函数会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式 addEventListener()是一个方法 IE9之前的IE不支持此方法,可以使用attac
复制链接

扫一扫

专栏目录