跨浏览器的事件处理程序


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Document </title>

</head>
<body>
<a href=‘#‘ id=‘btn‘>button</a>
</body>
</html>
<script>
var EventUtil = {
//添加事件
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false); //标准
}else if(element.attachEvent){
element.attachEvent(‘on‘+type, handler); //IE
}else{
element[‘on‘+type] = handler;
}
},
//获取事件对象
getEvent:function(event){
return event ? event : window.event;
},
//事件目标
getTarget: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;
}
},
//移除绑定
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false); //标准
}else if(element.detachEvent){
element.detachEvent(‘on‘+type, handler); //IE
}else{
element[‘on‘+type] = null;
}
}
}

function fn(){
var e = EventUtil.getEvent();
//alert(EventUtil.getTarget(e));
//EventUtil.stopPropagation(e);
EventUtil.preventDefault(e);
}

EventUtil.addHandler(document.getElementById(‘btn‘), ‘click‘, fn);
//EventUtil.removeHandler(document.getElementById(‘btn‘), ‘click‘, fn);

document.onclick = function(){
alert(123);
}
</script>

跨浏览器的事件处理程序

时间: 2024-10-20 12:20:41

跨浏览器的事件处理程序的相关文章

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

事件:事件是用户或浏览器自身执行的某些动作,例如 : click   load   mouseover 事件处理程序:用于响应某个事件的函数 在不同的浏览器,DOM中,事件处理程序是响应某个事件的函数 DOM0:中事件处理函数  event:onclick=function              删除程序:event:onclick=null: DOM 2:addEventListener()            removeEventListener(); 他们都接受三个参数,要处理的事

跨浏览器的事件处理程序——事件处理程序、事件对象差异

为了以跨浏览器的方式处理事件,不少开发人员会使用能够隔离浏览器差异的javascript库,本文从事件处理程序.事件对象差异出发,演示开发最适合的事件处理方法 基本名词解析: 事件 用户或浏览器自身执行的某种动作 事件流 从页面中接收事件的顺序,,IE的事件流指的是事件冒泡流,而Netscape Communicator的事件流是事件捕获流 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档) 事件捕获 不太具体的节点应该更早接收到事

跨浏览器【事件处理程序】和【事件对象】

和require.js没关系,只是最近看了拿来练练手~~ 1.html(引用require.js模块) <!DOCTYPE html> <html> <head> <style type="text/css"> #div{ background-color: yellow; width:200px; height:200px; opacity: 0.5; } #a{ display: block; background-color: gr

009天之跨浏览器的事件处理程序

为了以?跨浏览器方式处理事件,我们可以使用一些可以隔离浏览器差异的js库.由于业务需求,有时候我们需要写一些我们自己封装一些兼容代码. 比如创建一个addHandler(),它的职责是视情况分别使用DOM0级方法,DOM2级方法或IE方法来添加事件.然后addHandler()方法接受三个参数:要操作的元素,事件名称,和事件处理程序函数. 与addHandler();对应的方法是removeHandler(),它也接受同样的参数,这个的职责是移除之前添加的事件处理程序.无论这个事件是采取什么方式

如何写一个跨浏览器的事件处理程序 js

如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <input type="button" name="ids" id="ids" value="value"> <sc

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

js 跨浏览器实现事件

我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下: p.onclick=null; // body... })() 2,dom2 处理时

跨浏览器的事件对象-------EventUtil 中的方法及用法

什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event