attachEvent时间监听方式

最新推荐文章于 2023-03-30 09:14:26 发布

hcoke

最新推荐文章于 2023-03-30 09:14:26 发布

阅读量263

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123531460

版权

eventTarget.attachEvent(eventNameWithon,callback)

eventTarget.attachEvent(eventNameWithon,callback)将指定的监听器注册到eventTarget(目标对象上)，当该对象出发指定的事件时，指定的回调函数就会被执行。

该方法接受两个参数：

eventNameWithon：事件类型字符串，比如onclick，onmouseover，这里要带on

callback：事件处理函数，当触发事件时触发函数被调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">1.传统方式注册事件</button>
		<button type="button">2.方法监听注册事件</button>
		<script type="text/javascript">
			var btns = document.querySelectorAll('button');
			btns[0].onclick = function() {
				alert('hi');
			}
			btns[0].onclick = function() {
				alert('hao a u');
			}
			//2.方法监听注册事件  
			//1.里面的事件类型是字符串 必定加引号 且不带on
			//2.同一个元素 同一个事件可以添加多个监听器(事件处理程序)
			// btns[1].addEventListener('click', function() {
			// 	alert(22);
			// })
			// btns[1].addEventListener('click', function() {
			// 	alert(33);
			// })
			btns[2].attachEvent('onclick', function() {
				alert(11);
			})
		</script>
	</body>
</html>

上述方法只在ie9以下生效，否则不显示。

注册事件兼容性解决方案：

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

hcoke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
attachEvent时间监听方式

eventTarget.attachEvent(eventNameWithon,callback)eventTarget.attachEvent(eventNameWithon,callback)将指定的监听器注册到eventTarget(目标对象上)，当该对象出发指定的事件时，指定的回调函数就会被执行。该方法接受两个参数：eventNameWithon：事件类型字符串，比如onclick，onmouseover，这里要带oncallback：事件处理函数，当触发事件时触发函数被调用&
复制链接

扫一扫