jQuery学习4 浏览器的事件模型_jquery

js教程评论341 views阅读模式

首先要知道DOM的两级模式:DOM0级和DOM2级

在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。

声明DOM第0级事件处理程序

复制代码 代码如下:

DOM Level 0 Events Example



jQuery学习4 浏览器的事件模型_jquery

事件冒泡:在目标元素获得机会处理事件之后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序。如果是,则也调用父元素的处理程序。再检查其父元素,直至检查到DOM树的顶部,这个过程称之为事件冒泡。

事件传播从起点到DOM树的顶部

复制代码 代码如下:

DOM Level 0 Bubbling Example




jQuery学习4 浏览器的事件模型_jquery

DOM第2级事件模型

DOM第0级的缺点是,属性被用于存储作为事件处理程序的函数的引用,所以每个元素对于任何特定的事件类型,每次只能注册一个事件处理程序。

DOM第2级事件模型(也称为监听器)被设计来解决这些类型的问题。每个DOM元素都定义名为addEventListener()的方法,用于把事件处理程序(监听器)附加到元素上。这个方法的格式如下所示:

addEventListener(enentType,listener,useCapture)

参数eventType是一个字符串,用于标识将要处理的时间类型。例如:click、mouseover、keydown等。

参数listener是函数的引用(或内联函数),用于在元素上建立指定类型的处理程序。

参数useCapture是布尔类型。

利用DOM第2级模型建立事件处理程序

复制代码 代码如下:

DOM Level 2 Events Example



jQuery学习4 浏览器的事件模型_jquery

以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序

企鹅博客
  • 本文由 发表于 2019年9月6日 11:07:13
  • 转载请务必保留本文链接:https://www.qieseo.com/380682.html

发表评论