HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應毫痕。我們可以在事件發(fā)生時執(zhí)行 JavaScript数尿，比如當用戶在 HTML 元素上點擊時赦肃。
HTML 事件的例子：
- 當用戶點擊鼠標時 -
onclick - 當網頁已加載時 -
onload - 當鼠標移動到元素上時 -
onmouseenter - 當輸入字段被改變時 -
onchange - 當提交 HTML 表單時 -
onsubmit - 當用戶觸發(fā)按鍵時 -
onkeydown
事件屬性
我們可以通過事件屬性來為HTML元素添加事件監(jiān)聽适室。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="myFun()">
<h2 onclick="alert('我被點擊了')">點我觸發(fā)點擊事件</h2>
<h2 ondblclick="alert('我被雙擊了')">點兩下觸發(fā)雙擊事件</h2>
<script>
function myFun(){
console.log('加載完成勿负！');
}
</script>
</body>
</html>
使用DOM分配事件
可以通過JavaScript給DOM分配事件馏艾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="myId">點我觸發(fā)點擊事件</h2>
<h2 id="myId2">點兩下觸發(fā)雙擊事件</h2>
<script>
document.getElementById('myId').onclick = function(){
alert("我被點擊了");
}
document.getElementById('myId2').ondblclick = function(){
alert("我被雙擊了");
}
</script>
</body>
</html>
事件句柄
通過添加或刪除事件句柄，實現為DOM分配事件和阻止事件奴愉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="myId">點我觸發(fā)點擊事件</h2>
<h2 id="myId2">點兩下觸發(fā)雙擊事件</h2>
<script>
document.getElementById('myId').addEventListener('click',function(){
alert("我被點擊了");
});
document.getElementById('myId2').addEventListener('dblclick',function(){
alert("我被雙擊了");
});
</script>
</body>
</html>
當然也可以移除事件監(jiān)聽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="myId" onclick="alert('我被點擊了');">點我觸發(fā)點擊事件</h2>
<script>
document.getElementById('myId').removeEventListener('click',function(){
alert("點擊事件被攔截或者被修改");
});
</script>
</body>
</html>
