Java Script 之 addEventListener
addEventListener ，字面上理解就是，給事件添加一個監聽器，為什麽這樣做？就是想讓這個事件發生時，我們能及時的知道，同時伴隨著幹一些其他的事。
先給個題目：我們再屏幕上給出一個按鈕， 我們希望當用戶移動鼠標，光標碰到按鈕時，屏幕上自動顯示，"鼠標經過!"，鼠標點擊，屏幕接著顯示"鼠標點擊!"，光標離開時，屏幕上接著"鼠標離開!"。
仔細一想，這就是 事件監聽器 (EventListener) 最佳發揮的地方。
直接給出代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加多個事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction()
{
document.getElementById("demo").innerHTML += "鼠標經過!<br>"
}
function mySecondFunction()
{
document.getElementById("demo").innerHTML += "點擊!<br>"
}
function myThirdFunction()
{
document.getElementById("demo").innerHTML += "鼠標離開!<br>"
}
</script>
</body>
</html>
點擊這裏運行！
分析:
基本語法是：
element.addEventListener(event, function, useCapture)event: 事件，例如上面的 mouseout 就是鼠標移出，這是需要記住的.
function: 觸發函數，就是這個事件發生後，我們做出什麽響應。 (上面的響應是，在一個p標簽中 不斷添加提示語)
Java Script 之 addEventListener