JavaScript DOM事件
2021-10-17 本文已影响0人
微语博客
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
HTML 事件的例子：
- 当用户点击鼠标时 -
onclick - 当网页已加载时 -
onload - 当鼠标移动到元素上时 -
onmouseenter - 当输入字段被改变时 -
onchange - 当提交 HTML 表单时 -
onsubmit - 当用户触发按键时 -
onkeydown
事件属性
我们可以通过事件属性来为HTML元素添加事件监听。
<!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('我被点击了')">点我触发点击事件</h2>
<h2 ondblclick="alert('我被双击了')">点两下触发双击事件</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">点我触发点击事件</h2>
<h2 id="myId2">点两下触发双击事件</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">点我触发点击事件</h2>
<h2 id="myId2">点两下触发双击事件</h2>
<script>
document.getElementById('myId').addEventListener('click',function(){
alert("我被点击了");
});
document.getElementById('myId2').addEventListener('dblclick',function(){
alert("我被双击了");
});
</script>
</body>
</html>
当然也可以移除事件监听
<!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('我被点击了');">点我触发点击事件</h2>
<script>
document.getElementById('myId').removeEventListener('click',function(){
alert("点击事件被拦截或者被修改");
});
</script>
</body>
</html>
