`
Call-Me-Biao
  • 浏览: 652 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

NativeJS随记 - 浅析JavaScript Events

阅读更多
Event Flow
  为了能够更加直观的来了解事件的运作的整个流程,我们先来看看下面这个简单的HTML代码:

  <html><body><div>My Div</div></body></html>

  当我点击My Div的时候,会触发click事件,它的具体流程如下图所示:

从上图所示我们可以看出,当我们点击My Div时,首先触发的是Event Capturing Phase,自顶向下,依次经过html > body > div,最后到达指定目标对象,然后接下来它并没有到此停止,而是继续往上bubble,触发Event Bubbling Phase。所以,一个完整的事件流程为:Capturing Phase => Target Event => Bubbling Phase

Event Types
  从大的方向上来说,JavaScript的事件可以大致归类为一下几大类别:
  
  • UI事件,例如focus, blur事件
  • 鼠标事件,例如mousedown, mouseup,click, dbclick
  • 键盘事件,例如keydown, keypress, keyup
  • 页面事件,例如load,unload
  • 表单事件,例如submit, select, change


Binding Events
  一般来说,我们可以通过以下的三种方式来给DOM元素绑定特定的处理事件,每种方式各有利弊,具体如下所示:

Traditional Event Binding
    最常见的,适用性最为广泛的是传统方式,或者也称之为DOM0的Event Binding方式,具体的展现方法如下代码所示:
window.onload = function (event) {
   // event handling details
}

document.getElementById('id').onclick = function (event) {
   // event handling details
}

    使用这种方法的好处如下:
      - 适用性最为广泛,基本上所有的浏览器都支持这种方法
      - 当使用这种方式绑定事件的时候,关键字this指向当前的操作元素,这对于后续的操作有很大的便利之处

    使用这种方法的弊端如下:
      - 这种方法只能是适用于事件的Bubbling Phase,不能对Capturing Phase做任何的处理
      - 这种方法所绑定的handler,对于IE浏览器,不会传递入event对象,想要获取IE下的event对象,必须通过window.event来获得
      - 这种方法只能够绑定一个特定事件,当绑定多个事件的时候,后面的事件会覆盖掉前面的处理事件


W3C Event Binding
  现代浏览器绝大部分都支持这种事件绑定的方法,具体的操作方式如下所示:
var myId = document.getElementById('id');
myId.addEventListener('click', myHandler, false);

function myHandler(event) {
  alert('button was clicked!');
}

    使用这种方法的好处如下:
      - 使用这种方法,可以针对Capturing/Bubbling Phase进来特定的事件绑定操作,addEventListener方法总共有三个参数,第一个参数是事件触发的类型,第二个是这对这个触发事件所要绑定的事件,第三个参数是一个布尔变量,false表示Bubbling Phase
      - 使用这种方法可以针对某一个事件类型,绑定多以处理事件,而相互之间又不会互相影响
      - 在绑定的处理方法中,关键字this指向现在当前的操作对象
      - 你可以轻松获取到绑定方法的event对象,它被以第一个参数的形式带入到执行方法中

    使用这种方法的弊端如下:
      - 不适用于旧版本的IE浏览器,对于旧版IE,需要使用attachEvent来进行事件的绑定,具体见下面小节所示


Internet Event Binding
var myId = document.getElementById('id');
myId.attachEvent('onclick', myHanlder);

function myHandler() {
  alert('button was clicked!');
}

    使用这种方法的好处如下:
      - 使用这种方法可以针对某一个事件类型,绑定多以处理事件,而相互之间又不会互相影响

    使用这种方法的弊端如下:
      - 只适用于IE浏览器的操作
      - 在绑定的处理事件中,关键字this,指向的是window对象
      - 只能处理Bubbling Phase
      - 想要获取event对象,必须通过window.event来获得

鉴于不同的浏览器有不同的具体实现,为了能够更好的操作事件,我们有必要开发一个辅助方法,来提供跨浏览器的支持,以下就是一个小小的Demo,仅供参考:




  • 大小: 76.5 KB
  • 大小: 81.7 KB
  • 大小: 68.8 KB
  • 大小: 70.4 KB
  • 大小: 20.7 KB
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    一些有关哈希函数的随记

    这篇随记将探讨哈希函数的基本概念、性质以及在实际应用中的重要性。 哈希函数,也称为散列函数,是一种特殊的算法,它将任意长度的输入(也称为预映射或消息)转化为固定长度的输出,这个输出通常被称为哈希值或...

    2021-2022年收藏的精品资料辛辛那提1000维修随记.doc

    【辛辛那提1000维修随记】是一份关于数控系统维修的珍贵文档,主要涉及美国辛辛那提·米拉克龙公司的ACRAMATIC系列数控装置,特别是1994年推出的先进CNC控制系统——A2100。这篇随记详细记录了从1950年代早期的数控...

    互联网公司实习日记随记参考.pdf

    互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf

    随记_电气_

    【标题】:“随记_电气_”提示我们这是一份关于电气工程领域的个人笔记或学习心得,可能包含了一些作者在学习或实践中积累的电气知识。 【描述】:“电气相关的知识,随手写的,不知道行不行11111”表明这份文档...

    c++随记.docx

    ### C++ 随记知识点总结 #### 一、内存管理与 new/delete 操作符 在 C++ 中,`new` 和 `delete` 是用于动态内存分配的关键字。`new` 用于在堆区分配内存,`delete` 用于释放之前通过 `new` 分配的内存。使用 `new`...

    linux net 管理随记

    linux net 管理随记,留着个人备忘

    三天不读书&智商输给猪-世界读书日ppt随记PPT模板.pptx

    三天不读书&智商输给猪-世界读书日ppt随记PPT模板.pptx

    javascript-whatever:无论我想到什么JavaScript

    描述中的“无论我想到什么JavaScript”则表明这个项目可能是作者随想随记的JavaScript知识点汇集,可能包含各种各样的主题,如DOM操作、事件处理、异步编程、ES6及更高版本的新特性、性能优化、错误处理等。...

    微信小程序小手随记个人记账软件系统

    微信小程序“小手随记”个人记账软件系统是一个基于.NET框架和SQL Server数据库的完整解决方案,旨在提供用户友好的移动记账体验。这个系统包括三个主要组成部分:前台小程序源代码、后台接口源代码和后台管理源代码...

    EHCache的使用随记

    **EHCache的使用随记** EHCache是一款广泛应用于Java环境中的高效、易用且功能丰富的内存缓存系统。它能够显著提升应用性能,通过将常用数据存储在内存中,避免了反复从数据库读取,降低了I/O延迟。本文将探讨...

    面试随记???随时更新

    面试随记???随时更新

    随记小时光设计书1

    在"随记小时光设计书1"中,我们主要讨论的是用户信息和手账信息的设计,特别是在数据库方面的应用。这个设计涉及到用户信息的多个关键组成部分,包括昵称、用户名、密码、邮箱、手机号以及权限和加密key的管理。下面...

    git随记 git

    git随记 git

    2015年8月整理笔记本随记.ppt

    这篇随记内容涵盖了多个教育和德育相关的知识点,深入探讨了教育的本质、电子智慧教育的定义、学生文化的理解以及班主任的角色。以下是对这些知识点的详细解释: 1. **教育理念**: - "精准,精减,精彩":这强调...

    随记app,微博与博客整合

    随记App是一款集成微博与博客功能的毕业设计项目,旨在为用户提供一个统一的平台来管理和分享他们的日常思考和生活点滴。这个项目分为客户端和服务端两部分,分别实现了用户交互界面和后台数据处理。 在Android...

    重点小学生寒假记随记大全.doc

    重点小学生寒假记随记大全.doc

    c#随记.docx

    C#是一种由微软开发的面向对象的编程语言,它结合了C++的高效性和Java的简洁性,被誉为最优秀的编程语言之一。C#是专为.NET框架设计的,因此在.NET环境中具有极高的兼容性和可操作性。.NET Framework包含了公共语言...

    公司法务实习日记随记三篇.pdf

    公司法务实习日记随记三篇.pdf

    会计专业毕业实习日记随记篇.pdf

    会计专业毕业实习日记随记篇.pdf

Global site tag (gtag.js) - Google Analytics