专栏首页大前端开发从编程小白到全栈开发:响应用户的操作

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

懒,就一个字,我只说一次...

好,言归正传!今天我想跟大家讨论一下如何在前端处理用户操作这个问题。我们知道,当我们浏览一个网页或是手机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代码分离,两个部分干干净净的不再搅和在一起,各司其职,便于维护。

好了,关于对用户操作的处理,今天就先讲这么多,让大家对其有个初步了解,后面我们再继续探讨吧。

工作固然重要,身体才是革命的本钱。 欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js服务端开发教程 (六):依赖注入补漏篇

    最近在写前面两篇关于依赖注入的文章时,我总是在想用一句怎么的话来简单而朴素的描述依赖注入的概念,让从来没接触过的朋友能比较形象的去理解。想来想去,觉得可以站在依...

    一斤代码
  • 从编程小白到全栈开发:数据 (1)

    有些事情时刻都在发生,但是我们通常很少意识到它们的存在。比如,当我们使用网页或移动应用的时候,其实在不断的产生着数据:注册一个网站或app的账号、发一条微博、写...

    一斤代码
  • 【趣解编程】变量

    如果把编程比作做菜的话,变量就是那些碗盆瓢勺,或装着原材料,或在做菜的过程中临时的摆放半成品,或装着最后的成品菜。

    一斤代码
  • 你有一份来自班主任的期中考试复习大纲

    ? 2019上学期赛程已近半 天气愈发寒冷,在这秋风瑟瑟的季节里 唯有热(bing)火(huang)朝(ma)天(luan)的期中考试 才可以唤起童鞋们的热血...

    鹅老师
  • 你是否也被Centos下默认iptables规则坑过

    今天让同事去Beta环境实践模拟线上环境多机房异地备份,我们有一个统一登录的数据库,很多产品的登录都基于这个库做的统一登录,所以是比较重要的一个数据库,所以让他...

    后场技术
  • 你的第一个渐进式网站应用(5)

    渐进式网站应用会很快启动并马上可用。在目前的状态中(step-04),我们的天气app启动很快,但是不可用。因为还木有数据。 我们要使用一个AJAX请求去获取数...

    RP道貌不岸然
  • 教程 | 在Python和TensorFlow上构建Word2Vec词嵌入模型

    选自adventuresinmachinelearning 机器之心编译 参与:李诗萌、刘晓坤 本文详细介绍了 word2vector 模型的模型架构,以及 T...

    机器之心
  • 这一次,吴恩达决定投身农业

    这份协议的签订标志着中联重科进入人工智能技术领域,成为国内首家 AI 农业装备制造企业。双方将致力于共同研发基于人工智能(AI)技术的新产品,打造顶尖人工智能技...

    机器之心
  • DDD战术篇:领域模型的应用

    领域驱动设计DDD在战术建模(后文简称建模,除非特别说明)上提供了一个元模型体系(如下图),通过这个元模型我们会对战略建模过程中识别出来的问题子域进行抽象,而通...

    ThoughtWorks
  • MySQL中的存储引擎

    MySQL中的数据用各种不同的技术存储在文件(或者内存)中。这些技术中的每一种技术都使用不同的存储机制、索引技巧、锁定水平并且最终提供广泛的不同的功能和能力。通...

    changxin7

扫码关注云+社区

领取腾讯云代金券