DOM事件模型学习

转载 2016年06月01日 16:28:26

现代前端开发应该要遵守:

html展示文档内容,css渲染页面效果,javascript提供交互

浏览器能够提供交互可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今被诟病的浏览器兼容问题,这些问题中关于DOM事件模型无疑是棘手的一个。

在 Introduction to Events中PPK提到了如何学习javascript中的事件模型,概括来说就是理解:

  1. four event registration models
  2. two event accessing models
  3. two event orders

four event registration models

  • inline event registration model

下面的代码应该见过,直接在html文档中对相应的元素注册事件处理函数,好处是直观,坏处也是直观,破坏了文章开始提到的内容-展现-交互分离的原则

<A HREF="somewhere.html" onClick="doSomething(this);return false;">

行内注册模型中this对象可以直接以参数的形式传人,避免了查找触发元素的问题。

  • Traditional event registration model

下面这种事件注册模型是在Netscape3中引入的,算是事实上的标准,当时浏览器大战还未开始, IE基于Netscape用户基数巨大,被迫实现了该标准。

element.onclick = doSomething;

该种事件注册模型this值就是触发事件的元素本身,该种事件模型的缺点就是一个事件只能注册一个处理函数,如果多次注册会发生之后注册的事件处理函数覆盖之前的函数。

element.onclick = startDragDrop;
element.onclick = spyOnUser;

spyOnUser会覆盖之前的startDragDrop。

  • Advanced event registration models

为了改进Netscape事件注册模型的缺陷,w3c开发了自己的事件注册模型,对于传统方式不能处理的给一个事件注册多个事件处理函数的问题,新的模型可以轻松做到

element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)

要移除某一个事件处理函数也很容易

element.removeEventListener('click',spyOnUser,false)

该种事件注册模型this值也是触发事件的元素本身
存在的一个问题是,如何知道某一元素是否注册了相应的事件,对于传统的时间注册模型,可以:

alert(element.onclick)

值得欣喜的是:DOM Level 3 Events W3C 添加了eventListenerList 接口存储当前注册事件的元素的所有事件句柄列表,另外即便不清楚元素是否注册了相应的事件,我们也可以使用removeEventListener()直接移除,因为该接口在移除一个并没有注册的事件是并不会报错。

  • Microsoftevent registration models

最后要说的是IE自己新搞的一套事件注册模型,跟w3c的接口有异曲同工之效,例如可以使用下面的方式注册

element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)

唯一不足的问题是:IE的模型只支持事件冒泡阶段,并不支持事件捕获。
其次IE的事件模型中的事件处理函数只是函数引用,什么意思呢,我们了解到javascript中this的值是随着上下文变化而变化的,这样就导致事件处理函数在被调用时this的值指向了window对象。而window对象在这里是没一点用的。

two event accessing models

ok,已经为元素绑定了事件处理函数,接下来的问题就是如果获知关于事件本身更多的信息,例如对于鼠标单击事件,想要知道鼠标的位置, 非常抱歉的是,在那个浏览器大战的年代,Netscape和微软处于自身战略的考虑,各自引入了自己的事件访问模型,要命的是这两种模型完全不兼容。
为了说明这两种事件访问模型,PPK给出了5个问题以及相应的回答:

  1. 事件的类型是什么?

    ( e | window.event).type
  2. 事件target对应的HTML元素是谁?

    e = e | window.event
    target = e.target || e.srcElement;
    if(target.nodeType == 3){
        target =  target.parentNode;
    }
  3. 事件触发过程中,哪一个键被按下?

     e = e | window.event;
     if (e.keyCode){
         code = e.keyCode;
     } else if (e.which){
         code = e.which;
     }
     var character = String.fromCharCode(code);
  4. 事件触发过程中,用户使用的时鼠标的哪一个键?

首先是有两个属性可以判断鼠标的哪一个键点击:which和button,同时要注意这两个属性不总是在click事件中正常工作,安全的做法是使mousedown或者 mouseup事件 ,which是旧式Netscape浏览器中的属性,

    左键用1表示 
    中键(鼠标滚轮)是2 
    右键用3表示

button把事情全搞砸了,W3C给出的值是:

  • Left button – 0
  • Middle button – 1
  • Right button – 2

而微软的实现确是:

  • Left button – 1
  • Middle button – 4
  • Right button – 2

关于鼠标按键的兼容上遇到了困难,你没法区分用户单击了鼠标左键还是中键,搞笑的是微软和w3c在关于鼠标右键的问题上达成一致,下面是关于鼠标右键的兼容方案:

function doSomething(e) {
    var rightclick;
    if (!e)  var e = window.event;
    if (e.which) 
            rightclick = (e.which == 3);
    else if (e.button) 
            rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false
}

5.事件触发过程中鼠标的位置坐标是什么?

对于鼠标坐标计算的兼容问题同样严峻,尽管规范提供了不少于6个鼠标坐标属性,但是没有一个可信赖的跨浏览器方式去找到鼠标相对于文档document的坐标,下面是作者提供的一个方案

    function doSomething(e) {
            var posx = 0;
            var posy = 0;
            if (!e) var e = window.event;
            if (e.pageX || e.pageY){
                    posx = e.pageX;
                    posy = e.pageY;
            }else if (e.clientX || e.clientY){
                    posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
                    posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
            }
    }

two event orders

w3c在event orders的问题上扮演了和事佬的角色,博采众家之长,产生了w3c的事件模型,在w3c的事件模型中,首先进行事件捕获的阶段,直到到达target元素,然后进行事件冒泡的过程:

事件有捕获或者冒泡阶段,实际的应用价值是什么呢?个人观点仅供参考:

  1. 对于复杂的界面,逐一给每一个元素单独绑定事件显得繁琐枯燥,一种可操作的方案就是让事件冒泡到根元素,然后由根元素做统一处理。
  2. 对于复杂界面,为每个元素绑定事件势必消耗大量资源,统一由根元素处理节省了资源。
  3. 采用事件冒泡的方式处理事件,使得对于未来插入文档中的元素也能触发之前绑定的事件,这一点可以参考jquery中delegete方法的实现原理,具体可以参考这篇文字

既然事件有冒泡的特性,那有没有一种方式可以取消这种特性呢?
在IE中可以这样

window.event.cancelBubble = true

遵循w3c规范的浏览器中可以这样

e.stopPropagation()

currentTarget 对象

前面讲过 target 指向的是当前事件正在发生在哪个元素身上,要明确一点是:不论是在事件捕获还是冒泡阶段,target对象是不会发生变化的,那么如果多个元素绑定了同一事件,如何知道哪个元素正在处理事件呢? w3c引入了currentTarget 对象,可惜IE没有相似对应的属性.



文/江枫(简书作者)
原文链接:http://www.jianshu.com/p/1e6bc850fc07
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

轻松学习JavaScript二十七:DOM编程学习之事件模型

在介绍事件模型之前,我们先来看什么是事件和什么是event对象。        一事件介绍        JavaScript事件是由访问Web页面的用户引起的一系列操作,使我们有能力创建动态页面...

手写DOM事件模型

  • 2016年04月29日 10:15
  • 3KB
  • 下载

DOM事件模型级别

DOM事件模型分为三个等级,分别是0级、1级、2级。   0级是最早的,而且目前所有的浏览器仍支持0级DOM模型。 0级模型的注册事件,就是我们经常见到的,如:   ...

JS(五)DOM模型之常用事件

一、事件 1.使用onclick属性设置点击事件 2.js dom分配事件 3.鼠标事件 4.焦点事件 5.内容改变事件 二、示例 1.属性点击事件和dom分配点击事件 ...

DOM 事件模型在各个浏览器中差异

 网上搜“DOM事件模型”,文章非常多,在此写下仅仅是看到的那些文章的汇总,有错误欢迎指正。      关于DOM事件模型图就不发鸟,网上很多,而且比较简单,这里说明一些关于DOM事件模型在各个浏览器...
  • hhq163
  • hhq163
  • 2011年02月11日 15:00
  • 692

dom(document object model)文档对象模型事件

dom(document object model)文档对象模型事件

DOM事件模型

在浏览器解析事件的时候,有两种触发方式,一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获)。由上图可以看出来,冒泡的方式效果就是当一个DOM元素的某事件例如click事件被触发时...

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端面试经历,其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话,那么极有可能要求让你【实现事件...

DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容

1、DOM事件包含捕获(capture)和冒泡(bubble)两个阶段:捕获阶段事件从window开始触发事件然后通过祖先节点一次传递到触发事件的DOM元素上;冒泡阶段事件从初始元素依次向祖先节点传递...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM事件模型学习
举报原因:
原因补充:

(最多只允许输入30个字)