这里写目录标题
一、事件监听器addEventListener()
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
使用方法:element.addEventListener(event, function, useCapture)
参数说明
参数 | 描述 |
---|---|
event | 必须。字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。 |
function | 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。参数:① true - 事件句柄在捕获阶段执行②false- false- 默认。事件句柄在冒泡阶段执行 |
实例
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
注意如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent()
方法替代。
兼容性
IE 8及更早的版本,和Opera 7.0及更早的版本,不支持 addEventListener() 和 removeEventListener() 方法,他们使用的是一下方法代替:
添加事件:
attachEvent(event, function)
移除事件:
detachEvent(event, function)
二、on方法
Javascript中可以对一些页面的事件设定触发值,例如常用的点击 onclick
,鼠标移动 onmousemove
,或者移动端屏幕点击 ontouchstart
,其它类似的还有 onmousedown
, onmouseup
, onchange
, onfocus,
onmouseenter
, ontouchmove
, ontouchend
等等,可以对其设定值来实现事件触发后执行的操作,例如:
<h1 onclick="alert("hello");">Click me</h1>
<h1 onclick=(function(){alert("hello");})()>Click me</h1>
三.区别addEventListener与on区别
为某元素设定事件触发函数时,可能会觉得addEventListener和on事件的功能差不多,但是,addEventListener除了可以设置元素触发顺序外,还能多次绑定事件,因为 on 事件多次绑定的话会出现覆盖。即后绑定的on方法覆盖之前绑定的on方法,导致之前绑定的on方法失效
测试addEventListener
var dib1 = document.getElementById("div1");
div1.addEventListener('click', function(){
alert("message1");
});
div1.addEventListener('click', function(){
alert("message2");
});
上述addEventListener方法,点击后悔依次出现message1与message2
测试on
div1.onclick = function(){
alert("message1");
};
div1.onclick = function(){
alert("message2");
}
上述只会出现message2信息
————————————————
上述文章部分参考 https://blog.csdn.net/knigh_yun/article/details/80539193与w3c文章https://www.runoob.com/jsref/met-element-addeventlistener.html