1.HTML事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML_EVENT</title>
</head>
<body>
<button id="btn" onclick="demo()">button</button>
</body>
<script>
function demo() {
alert("HTML事件处理。")
}
</script>
</html>
2.DOM0级事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM0_EVENT</title>
</head>
<body>
<button id="btn">button</button>
</body>
<script>
var btn=document.getElementById("btn")
btn.onclick=function () {
alert("DOM0 级事件处理。")
}
</script>
</html>
3.DOM2级事件处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM2_EVENT</title>
</head>
<body>
<button id="btn">button</button>
</body>
<script>
var btn=document.getElementById("btn")
function fn1() {
alert("DOM2 级事件处理1")
}
function fn2() {
alert("DOM2 级事件处理2")
}
btn.addEventListener("click",fn1)
btn.addEventListener("click",fn2)
btn.removeEventListener("click",fn1)
</script>
</html>
addEventListener和removeEventListener可以添加和删除事件,采用这种方法的好处是为同一个btn添加多个事件,不会被覆盖,且按照添加的顺序执行。在执行时,removeEventListener的事件不会执行。
注:此处为click,不是onclick。后面的方法不要(),否则不点击btn,会直接执行。