【javascript】addEventListener事件方法

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>