分为三个阶段:事件捕获阶段、目标阶段、事件冒泡阶段。

事件捕获老版本浏览器(IE<=8)不支持,但是事件冒泡可以放心使用。

事件处理程序

一共四类写法,基本都见过,看下写法就知道怎么回事儿了。

1. HTML事件处理程序

<input type="button" value="Click me" onclick="ShowMessage()"/>

2. DOM0级事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("click!");
alert(this.id);//this指向myBtn,可继续获取myBtn的其余属性
}

3. DOM2级事件处理程序

定义事件及删除事件的两个方法:addEventListener、removeEventListener。

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);

第三个参数:true,表示在捕获阶段触发;false,表示程序在冒泡阶段触发;

removeEventListener()的第二个参数必须传入与addEventListener()中相同的处理函数(传入相同的函数引用,而不是形同函数!),否则不会生效。

var handler = function handler(){
alert(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

4. IE事件处理函数

IE就是这么另类(IE8及更早版本)

定义事件及删除事件的两个方法:attachEvent、detachEvent。因为只支持冒泡,故第三个参数没有;且第一个参数需要带上“on”!

var handler = function handler(){
alert(this.id);
}
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);

事件对象

事件触发会在handler中传入事件对象event。

1. DOM中的事件对象

event的成员属性及说明如下,以下属性皆为只读:

属性/方法 说明 示例
bubble 表示事件是否冒泡 event.bubble -> true/false
cancelable 是否可以取消事件的默认行为 event.cancelable -> true/false
currentTarget 事件函数正在处理事件的那个元素,比如委托document处理  
defaultPrevented 为true则表示已经调用了 preventDefault()  
eventPhase 事件处理阶段,1捕获阶段,2目标,3冒泡阶段 event.eventPhase === 1
preventDefault() 取消默认行为 event. preventDefault();
stopPropagation() 取消进一步冒泡捕获行为 event.stopPropagation();
stopImmediatePropagation() 取消进一步冒泡捕获行为,并阻止任何事件处理程序被调用 event.stopImmediatePropagation();
target 设计目标 event.target === getElementById(id)
type 触发事件的类型 event.type === 'click'

2. IE中事件对象

因为IE中没有捕获,故简单了些。注意对比两个表的区别!

属性/方法 说明 示例
returnValue 取消默认行为 event. returnValue = false; //取消默认行为
cancelBubble 取消进一步冒泡捕获行为 event.cancelBubble = true;//取消冒泡
srcElement 设计目标 event.srcElement === getElementById(id)
type 触发事件的类型 event.type === 'click'

3. 跨浏览器兼容方案

为了保证大多数浏览器的兼容,故只需要考虑冒泡阶段的实现。上面说的很清楚了,这里直接上代码。

var EventUtil = {
// 绑定事件
addHandler: function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
// 解绑事件
removeHandler: function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 获取事件对象event
getEvent: function getEvent(event) {
return event || window.event;
},
// 获取触发目标
getTarget: function getTarget(event) {
return event.target || event.srcElement;
},
// 阻止默认行为
preventDefault: function preventDefault(event) {
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false;
}
},
// 取消冒泡
stopPropagation: function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true;
}
}
}

事件的代理/委托的原理以及优缺点

这是靠事件的冒泡机制来实现的,优点是

1、可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
2、可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适

手写原生js【实现事件代理】,并要求兼容浏览器

考核对事件对象event的了解程度,以及在IE下对应的属性名。其实此时如果你说就是用target/currentTarget,以及IE下的srcElement/this,基本就可以略过了

绑到按钮上:

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
console.log(event.currentTarget === this);//true
console.log(event.target === this);//true
},false);

绑到document上:

var btn = document.getElementById("myBtn");
document.body.onclick = function(){
console.log(event.currentTarget === this );//true
console.log(document.body === this );//true
console.log(event.target === btn);//true
}

实现事件模型

一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数。

大致实现思路就是创建一个类或是匿名函数,在bind和trigger函数外层作用域创建一个字典对象,用于存储注册的事件及响应函数列表,bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。

事件如何派发也就是事件广播(dispatchEvent)

这个是自定义事件及事件触发的应用(createEvent/dispatchEvent, createEventObject/fireEvent)

一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。

DOM事件对象用法的更多相关文章

  1. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  2. DOM事件对象

    触发DOM上的事件时会产生一个事件对象event. event的内容:与事件有关的信息,导致事件的元素,事件的类型及其他与特定事件相关的信息. event对象会传入到事件处理程序中. 一.DOM 中的 ...

  3. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  4. jquery之event与originalEvent的关系、event事件对象用法浅析

    在jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中, 每个 even ...

  5. JavaScript DOM事件对象的两个小练习 | 学习内容分享

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...

  6. HTML DOM 事件对象 ondragend 事件

    学习网站:http://www.runoob.com/jsref/event-ondragend.html 定义和用法 ondragend 事件在用户完成元素或首选文本的拖动时触发. 拖放是 HTML ...

  7. JQuery中DOM事件合成用法

    jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...

  8. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  9. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

随机推荐

  1. loj2587铁人两项

    无向图,图中选出定点三元组(a,b,c),a->b->c的路径没有重复边.问方案有多少? -------------------------------------------- 首先求出 ...

  2. LOJ10132

    在 Adera 的异时空中有一张地图.这张地图上有 N 个点,有 N-1 条双向边把它们连通起来.起初地图上没有任何异象石,在接下来的 M 个时刻中,每个时刻会发生以下三种类型的事件之一: 地图的某个 ...

  3. GIS基本概念,空间分析

    GIS基本概念,空间分析 一.GIS基本概念 1.1 要素模型(Feature) 1.2 矢量数据 1.3 空间分析 1.3.1 空间查询和空间量算 1.3.2 缓冲区分析 1.3.3 叠加分析 1. ...

  4. spark SQL (一)初识 ,简介

    一, 简介 Spark SQL是用于结构化数据处理的Spark模块.与基本的Spark RDD API不同,Spark SQL提供的接口为Spark提供了关于数据结构和正在执行的计算的更多信息.在内部 ...

  5. 33.vsftpd服务程序--本地用户模式

    1.针对本地用户模式的权限参数以及作用如下 [root@localhost ~]# vim /etc/vsftpd/vsftpd.conf 1 anonymous_enable=NO 2 local_ ...

  6. 一个ftp协议传输文件之后执行脚本无法工作的情况

    作者:良知犹存 转载授权以及围观:欢迎添加微信号:Conscience_Remains 总述         移植一个文件系统时候,我在window下git clone了对方仓库源码,然后用FileZ ...

  7. 最好的IDEA debug长文?看完我佛了

    前言 你好,我是A哥(YourBatman). 最近写了几篇IntelliJ IDEA系列的文章,反响蛮好.我想了下,因为并非是分享什么破解方法.推荐插件.主题这种蛋炒饭式哗众取宠的文章,而是真实对工 ...

  8. jQuery读取数据

    1.jQuery读取JSON <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 2020 ICPC Asia Taipei-Hsinchu Regional Problem H Optimization for UltraNet (二分,最小生成树,dsu计数)

    题意:给你一张图,要你去边,使其成为一个边数为\(n-1\)的树,同时要求树的最小边权最大,如果最小边权最大的情况有多种,那么要求总边权最小.求生成树后的所有简单路径上的最小边权和. 题解:刚开始想写 ...

  10. Codeforces Round #645 (Div. 2) D. The Best Vacation (贪心,二分)

    题意:一年有\(n\)个月,每月有\(d_{i}\)天,找出连续的\(x\)天,使得这\(x\)天的日期总和最大,任意一年都能选. 题解:首先要先贪心,得到:连续的\(x\)天的最后一天一定是某个月的 ...