咳嗽连续咳了一个多月，蓝瘦，我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了，我才提起一口气，嘎吱嘎吱的重新转起我这磨损严重的脑袋来。
懒，就一个字，我只说一次...
好，言归正传！今天我想跟大家讨论一下如何在前端处理用户操作这个问题。我们知道，当我们浏览一个网页或是手机app的时候，通常会跟它产生很多的交互动作，比如点击一个按钮、选择列表中的一行、滚动屏幕、使用键盘输入内容等等，而且伴随着这些操作，网页或app会有相应的变化反馈。
这种对用户操作的感知并做出计划之内的处理，是我们在前端编程中非常重要的一件事，直接关系到一款软件用户体验的优劣。
那么在我们的HTML代码中，具体是怎么来处理这些事情的呢？
你还记得否，我们之前已经写过了一个简易计算器的代码？（What？你还没写？快去先写一下吧，抄一遍也行啊，赶紧的...）在那个简陋的计算器中，我们点击计算器界面上的“计算”按钮，程序就会为我们计算出结果。
好，那么问题来了：
为什么是点击了这个“计算”按钮，而不是页面上别的地方，才会执行运算并出结果呢？
因为...我们只给了这个按钮这样的能力啊！
在HTML元素上添加事件监听
让我们来看一下这个按钮的代码是怎么写的：
<button onclick="calc()">计算</button>
是不是注意到这个button标签上onclick这个属性了？它是干嘛用的呢？来来来，仔细看一下，我们把onclick拆开来不就是on click么，是不是明白了一些？对呀，就是“当点击”它的时候要做的事情嘛！这样一个属性，我们叫做事件监听；而这个属性的值，我们叫做事件处理函数，它可以是在本页面作用域内任意的JavaScript代码。
不如马上打开你的VS Code，写下如下代码：
<button onclick="var a = 12345; alert(a)">点我试试</button>
在浏览器中运行这个代码，点击按钮，你能看到浏览器弹出了一个显示着12345的消息框来。
一般来说，我们并不推荐这种直接在属性值中写多个JS语句形式，既不直观，也不利于代码复用。我们通常将它们放进一个额外的函数中。改造之后的代码如下：
<button onclick="buttonClickHandler()">点我试试</button>
<script>
function buttonClickHandler() {
var a = 12345;
alert(a);
}
</script>
看起来是不是好多了？
每个事件处理函数，都可以接收一个event对象作为参数，这个对象里面包含这次用户操作的丰富信息。让我们稍微改写一下上面的代码：
<button onclick="buttonClickHandler(event)">点我试试</button>
<script>
function buttonClickHandler(event) {
console.log(event);
}
</script>
当我们点击按钮的时候，查看浏览器的开发者工具中的信息，就能看到这个event对象的详细内容被打印了出来，如下图所示：
Click事件对象
这是个MouseEvent类型的对象，代表这是由鼠标产生的事件，它包含了这个事件的类型（type），产生的源头DOM元素（target），事件发生的位置信息（如clientX, clientY）等等重要信息。不同的输入设备，可能会产生不同的事件（如键盘操作，会产生KeyboardEvent事件）。不同类型的输入设备产生的事件，携带着不太一样的信息，进入事件处理函数，为我们下一步的处理提供了条件。
为了加深印象，我们立马来试一下键盘事件，在一个输入框input标签上，使用onkeypress监听键盘按下的事件：
<input type="text" onkeypress="keypressHandler(event)">
<script>
function keypressHandler(event) {
console.log(event.key + '|' + event.keyCode);
}
</script>
随着在输入框里的输入，可以看到我们在键盘上按下的键的内容以及键的标识代码被一一打印了出来。
这些例子看下来，是不是觉得获取用户的操作挺简单的？确实很简单。
那HTML的标签元素那么多，哪些上面可以用事件监听呢？答案是所有元素。只是有些事件是通用的，有些事件是某些特定元素上才有的，具体用到的时候，去网上查一下手册就行了。
通过JS代码添加事件监听
接下来，要给大家介绍另一种为HTML元素添加事件监听的方式。这种方式就是通过JS调用HTML DOM的API，来进行事件处理函数的添加、删除。
同样，我们来改造一下上面按钮的那个例子：
<button id="mybtn">点我试试</button>
<script>
function buttonClickHandler(event) {
console.log("Hello");
}
// 获取button元素
var mybtn = document.getElementById('mybtn');
// 为button添加click监听处理器
mybtn.addEventListener('click', buttonClickHandler);
</script>
可以看到，我们通过调用这个按钮DOM的API addEventListener，同样可以为它添加事件处理函数。而且，这种方式可以很方便的为元素添加多个不同的事件处理函数：
<button id="mybtn">点我试试</button>
<script>
function buttonClickHandler1(event) {
console.log("Hello");
}
function buttonClickHandler2(event) {
console.log("World");
}
var mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', buttonClickHandler1);
mybtn.addEventListener('click', buttonClickHandler2);
</script>
添加的多个事件处理函数在click事件触发的时候，都会被执行。
当一些事件处理函数不再需要的时候，我们也可以方便的移除它们：
<button id="mybtn">点我试试</button>
<script>
function buttonClickHandler1(event) {
console.log("Hello");
}
function buttonClickHandler2(event) {
console.log("World");
}
var mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', buttonClickHandler1);
mybtn.addEventListener('click', buttonClickHandler2);
// 5秒后移除事件处理函数buttonClickHandler2
setTimeout(function () {
mybtn.removeEventListener('click', buttonClickHandler2)
}, 5000)
</script>
这个例子中，如果前5秒钟内点击按钮的话，总会打印出Hello和World；而超过5秒后再点击按钮的话，则只会打印出Hello了。
怎么样？是不是这种方式看起来很强大？而且，这样的做法可以使得HTML代码和JS代码分离，两个部分干干净净的不再搅和在一起，各司其职，便于维护。
好了，关于对用户操作的处理，今天就先讲这么多，让大家对其有个初步了解，后面我们再继续探讨吧。
工作固然重要，身体才是革命的本钱。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》
网友评论