JS HTML DOM事件
阿新 • • 發佈：2021-01-11
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點選文字!</h1>
</body>
</html>
-
呼叫函式
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點選文字!</h1>
</body>
</html>
-
使用 HTML DOM 來分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
JavaScript HTML DOM EventListener
document.getElementById("myBtn").addEventListener("click", displayDate);
-
addEventListener() 方法用於向指定元素新增事件控制代碼。
-
addEventListener() 方法新增的事件控制代碼不會覆蓋已存在的事件控制代碼。
-
你可以向一個元素新增多個事件控制代碼。
-
你可以向同個元素新增多個同類型的事件控制代碼，如：兩個 "click" 事件。
-
你可以向任何 DOM 物件新增事件監聽，不僅僅是 HTML 元素。如： window 物件。
-
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
-
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以新增事件監聽。
-
你可以使用 removeEventListener() 方法來移除事件的監聽。
向 Window 物件新增事件控制代碼
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
事件冒泡或事件捕獲？
-
在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素
-
在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件
addEventListener() 方法可以指定 "useCapture" 引數來設定傳遞型別,預設值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
element.removeEventListener("mousemove", myFunction);