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

事件捕获老版本浏览器(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. 固定学习率梯度下降法的Python实现方案

    应用场景 优化算法经常被使用在各种组合优化问题中.我们可以假定待优化的函数对象\(f(x)\)是一个黑盒,我们可以给这个黑盒输入一些参数\(x_0, x_1, ...\),然后这个黑盒会给我们返回其计 ...

  2. 洛谷P4981

    Description 给定 n 个点,组成一棵树,有多少种组合方法: Analysis 首先,结合题目简化意义和这句话 最多可能存在多少种父子关系 我们可以知道当且仅当有至少一个节点的儿子不同时称他 ...

  3. pod资源限制和QoS探索

    简述 默认情况下,k8s不会对pod的资源使用进行限制,也就是说,pod可以无限使用主机的资源,例如CPU.内存等.为了保障k8s整体环境运行的稳定性,一般情况下,建议是对pod的资源使用进行限制,将 ...

  4. 将插件绑定在某个phase执行,推送镜像

    文章目录 将插件绑定在某个phase执行 推送镜像 将插件绑定在某个phase执行 需求:在执行mvn clean package 时,插件自动为构建Docker镜像. 实现:将插件的的goal绑定在 ...

  5. 基于efcore的分表组件开源

    ShardingCore ShardingCore 是一个支持efcore 2.x 3.x 5.x的一个对于数据库分表的一个简易扩展, 目前该库暂未支持分库(未来会支持),仅支持分表,该项目的理念是让 ...

  6. cassandra权威指南读书笔记--客户端

    DataStax驱动最成熟.默认,驱动程序会使用第一个连接的节点作为支持的版本协议.如果集群存在高低版本的节点(比如升级场景),如果驱动先连接不同不同版本的节点,可能会出现不兼容.驱动支持压缩客户端和 ...

  7. Pytest(5)美化插件进度条pytest-sugar

    前言 在我们进行自动化测试的时候,用例往往是成百上千,执行的时间是几十分钟或者是小时级别.有时,我们在调试那么多用例的时候,不知道执行到什么程度了,而pytest-sugar插件能很好解决我们的痛点. ...

  8. 简谈图论重要性&&图论总结

    从外地学习回来,我对图论才有认识(以前就没接触过,非常尴尬),说实话,学好图论的重要性,就像学数学时在进行解析几何时,图极有可能是打开答案的最后秘钥,也就是数形结合,而懂的人永远明白,用图解决绝对比用 ...

  9. 01、mysql安装配置

    1.下载mysql软件安装包 MySQL版本:5.7.17 mysql下载地址:http://rj.baidu.com/soft/detail/12585.html?ald 2.配置mysql数据库与 ...

  10. Java对象延迟初始化的实现

    一.什么是延迟初始化? 在Java多线程程序中,有时候需要采用延迟初始化来降低初始化类和创建对象的开销. 延迟初始化实际上就是:当我们要进行一些高开销的对象初始化操作时,只有在使用这些对象时才进行初始 ...