javascriptaddEventListener事件方法

Posted 2020-10-17 carsonwuu

addEventListener事件方法

一、事件函数调用语法：

element.addEventListener(event, function, useCapture)

 

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
function	必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

 

 

 

 

 

 

 

 

 

二、事件触发方式（event）：

click	鼠标左键单击
mouseover	鼠标移动到上面
mouseout	鼠标离开
mousemove	鼠标移动

 

 

 

三、兼容性：

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下实例演示了跨浏览器的解决方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

 

四、移除事件语法：

removeEventListener(event,function);

 

五、实例：

　　　　　　注册事件、移除事件

<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);//注册事件
function myFunction() 
{
    document.getElementById("demo").innerhtml = "Hello World";
}
document.getElementById("myBtn").removeEventListener("click", myFunction);//移除事件
</script>