使用者在浏览网页时会触发很多事件 (Events) 的发生，如点击按钮是一个滑鼠事件、输入讯息是一个键盘事件、网页或图片完成下载时是一个事件、表单栏位值被改变也是一种事件等。
DOM Event 定义很多种事件型态，
让我们可以用 JavaScript 来监听 (listen) 和处理 (event handling) 这些事件:
https://www.w3schools.com/jsref/dom_obj_event.asp
我们可以使用三种方法来定义事件处理程序:
HTML元素属性(Element Attribute)里直接定义
不建议用此方式，因为事件处理程序是JavasScript程序，会不利於程序码的维护
<html>
<body>
<button onclick="alert('Hello world!')">Click me!</button>
</body>
</html>
或
<html>
<body>
<button onclick="showAlert()">Click me!</button>
<script>
function showAlert() {
alert("show function!")
}
</script>
</body>
</html>
透过DOM属性(Property)定义事件
在.js档里面定义 ⇒ 同一个元素只能有一个事件，否则会被覆盖
<button id="myButton">Click me!</button>
function showAlert() {
alert("show function!")
}
function secondAlert() {
alert("show second function!")
}
let btn = document.getElementId("myButton");
btn.onclick = showAlert; //会被secondAlert覆盖
btn.onclick = secondAlert;
透过监听事件addEventListener定义
相较於 DOM 的方法，addEventListener 是可以对一个元素同时指定多个事件处理函数：
<button id="myButton">Click me!</button>
function showAlert() {
alert("show function!")
}
function secondAlert() {
alert("show second function!")
}
let btn = document.getElementById("myButton");
btn.addEventListener("click", showAlert);
btn.addEventListener("click", secondAlert);
<button id="myButton">Click me!</button>
function showAlert() {
alert("show function!")
}
function secondAlert() {
alert("show second function!")
}
let btn = document.getElementById("myButton");
btn.addEventListener("click", showAlert);
btn.addEventListener("click", secondAlert);
btn.removeEventListener("click", showAlert); //删除事件处理程序
<<: 成为工具人应有的工具包-04 VaultPasswordView
Anaconda安装 到Anaconda官网(https://www.anaconda.com/pr...
Day 18 - Android Studio 如何切换Activity(分页) 昨天我们讲了如何使...
现有的验证器不够⽤吗？有几种⽅式可以⾃订验证器： 写⼀个⽅法，挂到 validate ⽅法上： cl...
Odoo模组开发实战 目录 VIEW-Pivot View 第一章 VIEW-Pivot View ...
Let's Start From Scratch 本系列文章的头几篇我决定还是带点基础的东西，但是我...