Javascript 事件处理
1、注册事件
有两种方法，一种是给事件目标对象或文本元素设置属性，最简单方式设置目标属性为所需事件处理程序函数，事件处理程序属性的名字由 on 事件组成，如：onclick,onchange,onload,onmouseover，如下程序：
//文档加载完调用
window.onload = function(){
var elt = document.getElementById(“address”);
//表单提交前 调用
elt.onsubmit = function(){return validate(this);}
}
或设置文档元素事件处理程序属性也能注册事件，例;
<buttiononclick=”alert(‘thank you ’);”>点击这里</buttion>
另一种是用方法将事件处理程序传递给对象或元素，在除IE8之前版本外所有的浏览子中都支持addEventListener,接收三个参数，第一个注册处理程序的事件类型，类型为字符串，不应该包括用于设置事件处理程序的前缀‘on’,第二个为调用的函数，第三个为一个布尔型，一般为false，表示事件冒泡，若为true则不,IE下不知此方法，示例代码如下：
<head>
<scriptlanguage="javascript">
window.onload =function(){
var b=document.getElementById("mybutton");
b.onclick =function(){alert("click me");};
b.addEventListener("click",function(){alert("clickagain");},false);
}
</script>
</head>
<body>
<buttonid="mybutton"> click me </button>
</body>
使用removeEventListener()方法可以删除事件，例如：
document.removeEventListener(“mouseup”,handleMouseUp,true);
在IE5及以后的版本定义了类似方法attachEvent和detachEvent(),工作原理与addEventListener()相似，此 函数只有两个参数，类似于addEventListener前2个参数，
第一个参数要使用带了“on”的前缀事件处理程序属性。并且允许相同的事件注册多次。
window.onload =function(){
var b=document.getElementById("mybutton");
var handler=function(){alert(“thanks”);};
if(b.addEventListener)b.addEventListener(“click”,handler);
elseif(b.attachEvent) b.attachEvent(“onclick”,handler);
}
我们可以进一步封装
functionaddEvent(el,type,fn){
if(el.addEventListener)
el.addEventListener(type,fn,false);
else
el.attachEvent(‘on‘+type,fn);
}
给这个工具函数加一个添加事件
Functon handler(){
alert(this);
alert(arguments[0]);
}
在Firefox等标准浏览器中，点击页面后将弹出 "[object HTMLDocument]"，及handler中的this就是document自身。但在IE6/7/8中this却是window对象。这让人不爽，修改下与标准浏览器统一。
function addEvent(el, type, fn){
if(el.addEventListener){
el.addEventListener(type,fn, false);
}else{
el[‘e‘+ fn] = function(){
fn.call(el,window.event);
}
el.attachEvent(‘on‘+type,el[‘e‘+fn]);
}
}
把删除事件进行封装，封装成对象
E ={
add :function(el,type,fn){
if(el.addEventListener){
el.addEventListener(type,fn,false);
}else{
el[‘e‘+fn] =function(){
fn.call(el,window.event);
}
el.attachEvent(‘on‘ + type, el[‘e‘+fn]);
}
},
remove : function(el,type,fn){
if(el.removeEventListener(type,fn,false))
el.removeEventListener(type,fn,false);
else if(el.detachEvent)
el.detachEvent(‘on‘ + type,el[‘e‘+fn]);
}
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
