跨浏览器处理事件

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>
</body>
<div id="box">
	<input type="button" value="按钮1" id="bt" onclick="song()" />
    <input type="button" value="按钮2" id="bt2"  />
    <input type="button" value="按钮3" id="bt3"  />

解决各个浏览器不兼容的问题
<script>
	function song(){
		alert("Hello");
	}

	var bt2 = document.getElementById('bt2');
	var bt3 = document.getElementById('bt3');
	//bt2.onclick = song;
	//bt2.onclick = null;

	//dom2级事件
	//bt3.addEventListener('click',function(){alert(this.value);},false);
	//bt3.removeEventListener('click',song,false);
	//bt3.attachEvent('onclick',song);
	//bt3.detachEvent('onclick',song);

	//跨浏览器
	var kua={
		//添加句柄
		 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;
			}
		}
	}
	kua.addHandler(bt2,'click',song);
	kua.removeHandler(bt2,'click',song);
</script>
</div>

</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 03:35:46

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

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

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

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

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

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

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

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 处理时

跨浏览器事件对象封装

封装一个能够隔离浏览器差异的JavaScript库EventUtil,主要是使用能力检测. var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler)

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

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

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

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

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

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

常用跨浏览器设置——JS总结

常用跨浏览器设置--JS总结 1.跨浏览器添加事件 <pre name="code" class="javascript"> function addEvent(obj,type,fn) { if (obj.addEventListener) { obj.addEventListener(type,fn,false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } }