添加事件及Event对象的兼容写法

一、事件流

事件流描述的是从页面中接受事件的顺序。

IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

1、事件冒泡

事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序

2、DOM0级事件处理程序

3、DOM2级事件处理程序

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数

5、跨浏览器的事件处理程序

三、事件对象

事件对象event

1、DOM中的事件对象

(1)、type:获取事件类型

(2)、target:事件目标

(3)、stopPropagation() 阻止事件冒泡

(4)、preventDefault() 阻止事件的默认行为

2、IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement:事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的默认行为

var eventUtil={

// 添加兼容句柄

addHandler:function(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(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;

}

},

// 获取兼容事件对象

getEvent:function(event){

return event?event:window.event;

},

// 获取兼容的事件类型

getType:function(event){

return event.type;

},

// 获取兼容事件源,既触发事件的元素(事件的目标节点)

getElement:function(event){

return event.target || event.srcElement;

},

// 取消兼容默认事件

preventDefault:function(event){

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue=false;

}

},

// 防止兼容冒泡

stopPropagation:function(event){

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble=true;

}

}

}

时间: 2024-11-05 06:26:16

添加事件及Event对象的兼容写法的相关文章

felayman---ajax对象的兼容写法

<html> <head> <script type="text/javascript"> function FactoryXMLHttpRequest() { if(window.XMLHttpRequest) { return new XMLHttpRequest(); }else if(window.ActiveXObject) { var msxmls = new Array( 'Msxml2.XMLHTTP.5.0', 'Msxml2.XM

JS-DOM:Event 对象

事件(event)由事件及事件方法组成:  (事件对象的兼容写法:window.event||event) 1.鼠标事件: mousedown.mousemove.mouseup.ondbclick.contextmenu... 2.表单事件: focus.blur.submit.change... 3.键盘事件 keydown.keyup.keypress... 4.阻止冒泡 oEvent.cancelBubble=true; 5.阻止默认事件 return false; 6.键盘方法 key

HTML5中新添加事件

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

vue.js - 奇怪的 event 对象

好久都没有写点东西了, 前段时间工作搞得头大,真的就是一起加班到死了.废话不多说,写这篇文章是因为这次因为 event 对象闹了一个乌龙,以此总结一下. 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理.比如 jquery,通过它内部进行一定的封装,我们开发的时候,就无需关注 event 对象的部分兼容性问题.最典型的,如果我们要阻止默认事件,在 chrom

vue中如何使用event对象

原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理.比如 jquery,通过它内部进行一定的封装,我们开发的时候,就无需关注 event 对象的部分兼容性问题.最典型的,如果我们要阻止默认事件,在 chrome 等浏览器中,我们可能要写一个: event.preventDefault(); 而在 IE 中,我们则需要写: event.returnVa

Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

一.拖放API WEB 拖放 - 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易 - 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序 源元素事件 - 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素) - 源元素事件: - dragstart:当

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

event事件对象的兼容

var event = { // 添加事件监听 add: function(element, type, callback){ if(element.addEventListener){ element.addEventListener(type, callback, false); } else if(element.attachEvent){ element.attachEvent('on' + type, callback); } else { element['on' + type] =