DOM事件对象用法

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

事件捕获老版本浏览器(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方法。

时间: 2024-10-14 07:23:29

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

DOM事件对象

触发DOM上的事件时会产生一个事件对象event. event的内容:与事件有关的信息,导致事件的元素,事件的类型及其他与特定事件相关的信息. event对象会传入到事件处理程序中. 一.DOM 中的event对象的主要属性和方法 1.属性:type 被触发事件的类型 currentTarget其事件处理程序当前正在处理事件的那个元素 target事件的目标 this  currentTarget  target的区别 eventPhase表明事件正处于哪个阶段,捕获阶段为1,处于目标对象上为2

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

在jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中, 每个 event 都是 jQuery.Event 的实例 其原型链中保存有六个方法,  代码如下 复制代码 jQuery.Event.prototype = {     preventDefault: function() {         // 取消事件默认行为     },     stopPropagat

DOM事件对象、IE事件对象、旧浏览器事件对象的JavaScript区别

事件流: 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. DOM2级事件处理程序: .addEventListener();      .removeEventListener(); 在IE浏览器中不起作用!IE事件处理程序: .attachEvent();     .detachEvent(); 跨浏览器常用事件处理程序: var eventUt

JQuery中DOM事件合成用法

jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: hover()方法的语法结构为:hover(enter,leave); hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个函数(leave). 代码为: $(function(){ $("#panel h5.

DOM事件总结(事件处理程序的类型及浏览器的兼容性)

事件处理: 1.HTML事件处理程序 例子: <input type="button" id="btn" value="click me" onclick="alert('Hello!');"> 或者: <input type="button" id="btn" value="click me" onclick="show()"&

深入学习jQuery事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各个浏览器下都可以正常运行而不需要进行浏览器类型判断,本文将详细介绍jQuery事件对象 获取 对于DOM事件对象来说,标准浏览器和IE8-

JavaScript中的事件对象

JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息.下面将会讲到DOM中的事件对象.IE中的事件对象以及跨浏览器的事件对象三个部分. 对于事件处理程序,大家可以看我的博文<JavaScript中的五种事件处理程序>. 第一部分:DOM事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论是HMTL特性.DOM0级还是

DOM事件研究

一.事件流 1.1 事件冒泡 事件是文档或浏览器窗口中发生的特定的交互瞬间. 事件流: 描述的是从页面中接受事件的顺序(IE: 事件冒泡流 / Netscape事件捕获流) 事件冒泡流:即事件最开始是由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级传播到最不具体的那个节点(文档). 1.2 事件捕获 事件捕获:与事件冒泡是截然相反的,它的定义是不太具体的节点应该更早的接收到事件,而最具体的节点最后接收到事件. 二. 事件处理程序 2.1 html事件处理程序 html事件处理程序,现

Event Handler 事件处理程序 2 ---跨浏览器事件对象《高程3》

0 Event Object导论 支持DOM0.DOM2的浏览器和IE浏览器实现事件处理程序的不同,除了体现在添加事件处理程序的不同上,还体现在event对象的实现差异上,包括具体的属性和方法.在触发DOM上的某个事件时,都会产生一个event对象,这个对象包含着所有与事件有关的信息.一旦事件处理程序执行完成,event对象就会被销毁.所有浏览器对event的支持方式包括:DOM事件对象和IE事件对象. 1.1 DOM0和DOM2支持的Event对象(针对IE之外的浏览器) 兼容 DOM 的浏览