NativeJS随记 - 浅析JavaScript Events

最新推荐文章于 2023-02-13 17:16:42 发布

iteye_11358

最新推荐文章于 2023-02-13 17:16:42 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_11358/article/details/82646193

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[size=x-large][color=indigo][b]Event Flow[/b][/color][/size]
为了能够更加直观的来了解事件的运作的整个流程，我们先来看看下面这个简单的HTML代码：

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

当我点击My Div的时候，会触发click事件，它的具体流程如下图所示:
[img]http://dl2.iteye.com/upload/attachment/0114/4704/8ff490f1-ca56-3a81-aa6a-ee05ff52f413.jpg[/img]
从上图所示我们可以看出，当我们点击My Div时，首先触发的是Event Capturing Phase,自顶向下，依次经过html > body > div，最后到达指定目标对象，然后接下来它并没有到此停止，而是继续往上bubble,触发Event Bubbling Phase。所以，一个完整的事件流程为:Capturing Phase => Target Event => Bubbling Phase

[size=x-large][color=indigo][b]Event Types[/b][/color][/size]
从大的方向上来说，JavaScript的事件可以大致归类为一下几大类别：
[list]
[*]UI事件，例如focus, blur事件
[*]鼠标事件，例如mousedown, mouseup,click, dbclick
[*]键盘事件，例如keydown, keypress, keyup
[*]页面事件，例如load,unload
[*]表单事件，例如submit, select, change
[/list]

[size=x-large][color=indigo][b]Binding Events[/b][/color][/size]
一般来说，我们可以通过以下的三种方式来给DOM元素绑定特定的处理事件，每种方式各有利弊，具体如下所示：

[color=brown][size=medium][b][u]Traditional Event Binding[/u][/b][/size][/color]
最常见的，适用性最为广泛的是传统方式，或者也称之为DOM0的Event Binding方式，具体的展现方法如下代码所示:

window.onload = function (event) {
   // event handling details
}

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

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

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

[size=medium][color=brown][u][b]W3C Event Binding[/b][/u][/color][/size]
现代浏览器绝大部分都支持这种事件绑定的方法，具体的操作方式如下所示:

var myId = document.getElementById('id');
myId.addEventListener('click', myHandler, false);

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

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

[color=green][u][i]使用这种方法的弊端如下：[/i][/u][/color]
- 不适用于旧版本的IE浏览器，对于旧版IE，需要使用attachEvent来进行事件的绑定，具体见下面小节所示

[size=medium][color=brown][b][u]Internet Event Binding[/u][/b][/color][/size]

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

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

[color=green][i][u]使用这种方法的好处如下：[/u][/i][/color]
- 使用这种方法可以针对某一个事件类型，绑定多以处理事件，而相互之间又不会互相影响

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

鉴于不同的浏览器有不同的具体实现，为了能够更好的操作事件，我们有必要开发一个辅助方法，来提供跨浏览器的支持，以下就是一个小小的Demo，仅供参考：
[img]http://dl2.iteye.com/upload/attachment/0114/4429/a67f44cf-24ce-3bcf-b37d-df674bf9f571.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0114/4431/1ab3e09b-8e50-3cec-b799-b5db0df589ca.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0114/4433/4626760e-2ffc-3178-a209-7d9b9e5390a1.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0114/4427/74c0a850-4b44-3ec6-aeb1-cbf590f3a08a.jpg[/img]

iteye_11358

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NativeJS随记 - 浅析JavaScript Events

[size=x-large][color=indigo][b]Event Flow[/b][/color][/size] 为了能够更加直观的来了解事件的运作的整个流程，我们先来看看下面这个简单的HTML代码： My Div 当我点击My Div的时候，会触发click事件，它的具体流程如下图所示:[img]http://dl2.iteye.com/upload/att...
复制链接

扫一扫