在javaScript中,采用异步事件驱动编程模型,在这种模型下,浏览器,文档对象,元素对象等发生一些动作的时候,我们可以迅速知道。在对事件模型进行深入探讨之前,我们先来认识些有关的概念,避免初学者到时候看得云里雾里。
1.事件类型:是一个用来说明发生什么类型事件的字符串,由于事件类型是一个字符串,因此实际上有时会把事件类型叫做事件名字,比如:click, keyup…
2.事件目标:就是这个事件在谁身上触发的,常见的有Window, Document和Element对象
3.事件处理函数:就是触发某个事件后,会发生什么操作,这个操作就是事件处理函数
4.事件对象:就是事件源对象,是与特定事件相关且包含该事件详细信息的对象,通过这个对象的target属性可以来获取我们的事件目标。
什么是事件模型?
在javaScript中,一共有三种事件模型:
1.DOM0级模型,这种模型可以直接绑定在html结构上,或者是绑定在dom元素的某些和事件相关的属性上,也叫做句柄绑定(本质就是赋值操作),所以不能同时绑定多个事件处理函数。
2.IE事件模型,在这种模型中,一次事件的触发可以分为两个阶段,分别是事件处理阶段和事件冒泡阶段。事件处理阶段就是触发这个事件之后,对应的事件处理函数被执行;然后是事件冒泡阶段,这个阶段,事件会从html结构的内部向外部传递到document,如果在传递的过程中,有元素绑定了这个事件的事件处理函数,就会执行事件处理函数。这边模型对事件的监听是通过attachEvent来实现的。
3.DOM2级模型,在这种模式中,一次事件的触发会有三个阶段,分别是事件捕获阶段,事件处理阶段和事件冒泡阶段。捕获指的是事件从 document 一直向下传播到目标元素,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。后面两个阶段和IE事件模型相同。这种模式是通过addEventListener来实现的,这个函数的第三个参数,可以用来阶段是否进行事件捕获,默认值是false, 即默认是冒泡。所以,在对应同一个事件的同一个事件处理函数要不就事件冒泡,要不就是事件捕获。
IE事件模型和DOM2级事件模型可以同时绑定多个事件处理函数。
事件委托:
事件委托本质是利用是事件冒泡的原理。把应该在子元素身上触发的事件处理函数委托给父元素来触发。
我们来看个例子:
一个ul里面包裹了10li, 当我们点某个li是,就打印这个li里的内容。请问,你会怎么实现呢?
我们可以直接给每一个li绑定一个事件处理函数,使得我们点击每一个li都会触发对应的事件处理函数。但是,这样做高效吗?不高效吧。从开发效率上看,我们给每一个li绑定一个事件处理函数,是不是就很麻烦了呀,可能你会想要使用for循环来进行绑定,这是可以的,但是使用for循环也是会消耗我们的内容,消耗我们的cpu的吧。因为计算就占用我们的cpu,而且每一个li都绑定一个函数,函数的存储得用到我们得堆内存吧。所以,这种方法不是高效的。
我们之前说,事件是可以冒泡的,所以我们可以使用这个特点,使我们的事件处理函数绑定在父元素。然后,我们点击子元素时,事件就会冒泡到父元素,触发父元素绑定的事件处理函数。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
var oUl = document.getElementsByTagName('ul')[0];
oUl.addEventListener('click', function(e) {
console.log(e.target.innerHTML);
})
</script>
</html>
这篇文章主要时针对事件模型进行讲解,如果有疏漏的地方,麻烦指出,谢谢。
如果喜欢,可以关注我,点个赞。