【Day 24】JavaScript 事件处理

说明:事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件後，如果需要，您可以某种方式对事件做出回应。例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。

再举几个可能发生的不同事件：

用户在某个元素上点击鼠标或悬停游标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭影片。
发生错误。

事件处理程序有以下几种:

a.在HTML档案中的元素属性定义，也就是MDN内提及的行内事件处理器 - 不建议使用

原因:

1.混用HTML 和JavaScript，这样文档很难解析，也不便後期维护。
2.即使在单一文件中，内置事件处理器也不是一个好主意。例如 : 一个按钮看起来还好，但是如果有一百个按钮呢？您得在文件中加上100个属性。这很快就会成为开发人员的噩梦。
行内事件处理器写法，例如:

<!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>
    <button onclick="alert('Hello JS')">click me</button>
    <button onclick="showAlert()">click me</button>
    <script src="all.js"></script> 
</body>
</html>

JS代码编写如下:

function showAlert(){
  alert("hi JS function!");
}

点击按钮 → 触发事件 → 捕获事件 → 处理事件(处理click事件)

b.通过DOM属性，在javascript代码内定义

优点 : 程序更为精简，对於後期也较好维护。
缺点 : 一个元素只能有一个事件处理程序，若一个元素有两个以上事件处理程序，则会被後者覆盖。
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>
    <button id="clickMe">click me</button>
    <script src="all.js"></script>
</body>
</html>

JS代码编写如下:

function clickAlert() {
    alert('hello JS');
  }
function secondClickAlert() {
    alert('hello second JS');
  }  
let btn = document.getElementById('clickMe');
btn.onclick = clickAlert;
btn.onclick = secondClickAlert; //会把上面的clickAlert覆盖

c.监听器(DOM Level 2 Events)

透过addEventListener() 和removeEventListener()定义

可以让一个元素处理多个事件处理程序，以及可以在程序运行时删除事件处理程序

addEventListener()

里面放两个参数，第1个参数是告诉addEventListener要监听甚麽事件，第2个参数是执行处理事件的函式

removeEventListener()

里面放两个参数，第1个参数是告诉addEventListener要删除哪一事件，第2个参数则是哪一处理事件的函式要删除

<!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>
    <button id="clickMe">click me</button>
    <script src="all.js"></script>
</body>
</html>

JS代码编写如下:

function clickAlert() {
  alert('hello JS');
  console.log(event);//可以显示click事件所有的属性，每个事件都有对应的event object方便程序利用这些属性作进一步处理
  }
function secondClickAlert() {
  alert('hello second JS');
  }  
let btn = document.getElementById('clickMe');
btn.addEventListener('click', clickAlert);
btn.addEventListener('click', secondClickAlert);
btn.removeEventListener('click',secondClickAlert); //因为此行代码导致secondClickAlert()被删除

<<: 【Day 09】Text Message 应用

>>: Day 23：「儿子，这是你的零用钱」- 元件间的资料传递