javascript的事件

事件流

事件流是描述对页面接受事件的顺序,IE和Netscape提出了完全相反的事件流模型,描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。

我们通过平常使用知道addEventListener最后的参数是切换句柄的,当这个布尔值为true时,表示在捕获阶段调用事件处理程序;若果是false,表示在冒泡阶段调用事件处理程序。

MDN:useCapture 可选()
Boolean,是指在DOM树中,注册了该listener的元素,是否会先于它下方的任何事件目标,接收到该事件。沿着DOM树向上冒泡的事件不会触发被指定为use capture(也就是设为true)的listener。当一个元素嵌套了另一个元素,两个元素都对同一个事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。

Once the propagation path has been determined,the event object passes through one or more event phases. There are three event phases: capture phase,target phase and bubble phase. Event objects complete these phases as described below. A phase will be skipped if it is not supported,or if the event object’s propagation has been stopped. For example,if the bubbles attribute is set to false,the bubble phase will be skipped,and if stopPropagation() has been called prior to the dispatch,all phases will be skipped.

The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.

The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble,then the event object will halt after completion of this phase.

The bubble phase: The event object propagates through the target’s ancestors in reverse order,starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.

为什么要使用 addEventListener?

addEventListener 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括:

  1. 它允许给一个事件注册多个 listener。当存在其他的库时,使用 DHTML 库或者 Mozilla extensions 不会出现问题。

  2. 它提供了一种更精细的手段控制 listener 的触发阶段。(即可以选择捕获或者冒泡)。

  3. 它对任何 DOM 元素都是有效的,而不仅仅只对 HTML 元素有效。

事件冒泡

IE的事件流叫事件冒泡,逐级向上传播


    
        

点击div之后,顺序是div -> body -> html

事件捕获

Netscape事件捕获是与冒泡相反的

DOM事件流

DOM规定的事件流包括三个阶段

  1. 捕获阶段

  2. 目标阶段

  3. 冒泡阶段

事件捕获阶段,为截获事件提供机会,然后是实际的目标接受事件,最后是事件冒泡阶段



  Document
  


  

事件的作用范围

事件的作用范围为:
元素自己所占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上,则事件的作用范围为容器元素自身所占空间大小)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)