和大家分享JS编程知识之JS事件流事件

今天和大家分享的JS编程知识是:JS的事件流、事件处理、事件对象,事件在前面的章节也提到过,今天对事件再作进一步的剖析和讲解,下面来一一分享:

分享的JS编程知识

JS事件流

1、事件流概念

事件流描述的是在页面中接受事件的顺序。

2、事件冒泡

由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点。

例如:当某个元素的点击事件被触发之后,由于冒泡,它的直系亲属树上的元素,只要被添加了事件的,从下往上,都会被触发。

3、事件捕获

事件捕获就是最不具体的节点先接收事件,而最具体的节点是最后接收事件。

例如:当某个元素的点击事件被触发之后,由于捕获,它的直系亲属树上的元素,只要被添加了事件的,从上往下都会被触发。

通过代码演示,代码如下:

事件冒泡事件捕获

上面的例子如果用冒泡的概念去解释的话,当点击按钮时,最先接收的元素应该是button按钮,然后逐渐向上传播,接收的元素就是div,因为button按钮是在div范围之内的,是被div包围着的。如果再向上传播就html,在向上传播就是document,这就是事件冒泡。

事件捕获又怎样理解呢,它和事件冒泡是反着的,它是从最不具体的节点先接收事件,可能先是整个HTML文档,然后才是div,才是button按钮。这是事件捕获。我们最常用的就是事件冒泡

JS事件流

JS事件处理

1、HTML事件处理

HTML事件处理指的是直接添加到HTML结构中的事件。事件是用户或浏览器自身执行的某种动作,而响应某个事件的函数就叫做事件处理程序或事件侦听器。HTML事件处理也是最常见的事件,示例代码如下:

HTML事件处理示例

上面的代码我们已经很熟悉了,实现了一个方法,然后再按钮里调用。但它有一个不好的地方,比如我们要改一下这个函数demo的名字,button按钮调用的函数名要改,两个地方都要改,不是太友好。怎样来解决这个问题你,就是可以使用DOM0级事件处理来解决这个问题。

2、DOM0级事件处理

通过JS指定事件处理程序的传统方式就是将一个函数赋值给一个事件处理程序属性。

示例代码如下:

DOM0级事件处理

这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。若要删除事件,直接令onclick的值为空即可。

3、DOM2级事件处理

addEventListener(事件名、事件处理函数):增加一个DOM2级事件处理程序。

removeEventListener(事件名、事件处理函数):移除一个DOM2级事件处理程序。

示例代码如下:

DOM2级事件处理示例

4、IE事件处理程序

attachEvent:添加一个事件

detachEvent:移除添加的事件

为了浏览器的兼容,还会用到IE事件处理程序,来兼容各种浏览器。浏览器兼容性主要就是指IE浏览器的兼容,尤其是低版本IE。IE不支持事件捕获,默认都是冒泡。

示例代码如下

IE事件处理程序

事件对象

1、事件对象的概念

在触发DOM事件的时候都会产生一个对象。

2、事件对象event

1)、type:获取事件类型

下面通过一个示例来说明事件对象event的type的用法,示例代码如下:

获取事件类型

2)、target:获取事件目标

下面通过一个示例来说明事件对象event的target的用法,示例代码如下:

获取事件目标

3)、stopProopagation():阻止事件冒泡

下面通过一个示例来说明事件对象event的stopProopagation()的用法,示例代码如下:

阻止事件冒泡

4)、preventDefault():阻止事件默认行为

下面通过一个示例来说明事件对象event的preventDefault()的用法,示例代码如下:

阻止事件默认行为

以上就是本次和大家分享的内容。本次主要分享了JS的事件流、事件处理、事件对象。分享中使用了大量的代码示例,本次的内容也都比较好理解,希望大家都能掌握。想学习更多的编程知识,请


转载请注明:http://www.aierlanlan.com/rzgz/4311.html