DOM事件

JavaScript与HTML之间的交互是通过事件Event来实现的,事件是浏览器通知应用程序发生了什么事情。比如说:

  • 当用户用鼠标或手指点击网页上的按钮后;
  • 当网页加载的过程中,或完成后;
  • 当用户把鼠标移动到某个div或其他元素上面时;
  • 当用户提交 HTML 表单之后;

事件Event不是什么技术概念,我们在前面操作浏览器、操作HTML都是通过对象,而事件它也不是对象,所以大家不要钻概念的牛角尖。

Element对象的事件处理属性

还是使用Chrome浏览器打开微信公众平台,然后打开该页面的开发者工具,打开console控制台,然后直接在控制台里输入命令:

在前面我们了解到console.dir()可以输出节点DOM的所有属性和对象,大家也可以把NodeList或HTMLCollection对象展开查看节点或元素对象里的事件处理属性,下面只是截取了其中的一部分,如:

这里的null的意思是事件处理属性没有值。这些事件处理的属性具有相同的格式,就是on+一个事件(动作)名称,而且都是小写。关于这些事件处理的属性,我们可以查看下面这个技术文档。

技术文档:GlobalEventHandles事件处理

这些事件处理的属性共有80多个,JS书籍和网上的教程通常也只会零散介绍其中最常见的几个,但是如果你不翻阅技术文档对这些有一个系统的了解,学习就会难以深入啦。Event Handlers有的人叫它事件处理器,有的人叫它事件句柄,概念有点复杂,你了解是什么东西即可。

事件的类型

这些事件有这么多,平时经常用的也只有那么多,我们也可以给这些事件分类。常见的事件类型有:

  • 鼠标事件:比如鼠标点击click,鼠标双击dblclick等;
  • 表单事件:比如提交submit,重置reset等
  • 焦点事件:比如元素获取焦点focus,元素失去焦点blur等
  • 资源事件:比如资源加载完成load等

上面这些事件大多有与之对应的事件处理属性,click有onclick,dblclick有ondblclick。

事件的类型有很多种,我们可以查看MDN事件类型一览表,可以在左侧看到有60多种事件类型,这也能充分体现出JavaScript的强大之处。在这个文档里我们可以只看一些常用的。

设置HTML标签属性为事件处理程序

设置HTML标签属性为事件处理程序,听起来好像有点复杂,不过我们来实战几个例子看到效果之后,这些概念就很容易理解啦~

直接执行函数

使用VS Code编辑器在index.html里的<body>标签内输入以下代码:

然后使用浏览器打开index.html,点击按钮,就会跳出一个弹窗。这里的onclick就是HTML的标签属性,而onclick同时又是事件处理的属性。

 

执行自定义函数

上面的案例直接执行的是传入了参数的alert()函数,不过更多时候onclick执行的是我们自己定义的函数,而且函数也比较长,那我们该如何处理呢?还是在index.html的<body>标签内输入下面代码,并使用浏览器打开网页查看效果:

点击按钮,会执行countSheep()函数,这个函数的是一个for循环,只要满足条件,就会不断弹窗。

我们打开这个网页的开发者工具,在控制台输入代码:

输出该input对象的属性和方法,找到onclick,我们就会发现onclick属性不再为空,而是有了一个ƒ onclick(event)的函数对象。

 

设置对象属性为事件处理程序

既然onclick是对象的一个属性,我们就可以结合前面给对象属性赋值的方法把这个属性设置为事件处理程序。上面的代码可以等同于下面的代码,我们先获取节点,然后给节点的onclick属性赋值一个函数即可。

相信大家对函数也是一个对象,可以把函数对象赋值给一个对象的属性来达到事件处理程序的效果应该有了一定认识。

EventTarget对象

打开index.html的控制台,在控制台里输入

在window对象里找到EventTarget这个对象,发现它是一个函数,也就是说EventTarget相当于window对象的一个方法,展开在prototypeEventTarget里我们看到有三个方法addEventListener() dispatchEvent()removeEventListener(),今天我们主要来学习addEventListener()方法。

技术文档:EventTarget对象接口

addEventListener() 方法用于向指定元素添加事件处理器。首先我们先来了解这个方法的语法,

中括号[]里面的内容非必须,这里的type表示监听事件类型的字符串,事件类型我们前面学过,比如click;listener是指当事件触发时执行的函数对象。我们可以把上面的代码改写成如下内容:

注意countsheep是DOM节点,而countSheep()是函数,大家可以任意命名,不要混淆了。

在开发者工具的Elements标签(也就是网页的源代码)里,选中

我们再来看控制台的Styles窗口(开发者工具有三个窗口,一个是源代码,一个是控制台,还有一个就是Styles窗口),在Styles窗口里会有一个Event Listener标签,在这个标签里我们就能看到我们写的点击事件了。

Event对象

还是打开index.html的控制台,在控制台里输入

在window对象里找到Event这个对象,发现它也是一个函数。展开prototypeEvent,找到currentTarget和target。

技术文档:Event对象

event.target:返回触发事件的元素
event.currentTarget:返回绑定事件的元素

本节任务

  1. 了解Element对象的事件处理属性;
  2. 了解事件有哪些类型;
  3. 知道如何设置HTML标签属性为事件处理程序
  4. 了解EventTarget对象和Event对象