1、註冊事件
有兩種方法,一種是給事件目標對象或文本元素設置屬性,最簡單方式設置目標屬性為所需事件處理程序函數,事件處理程序屬性的名字由 on 事件組成,如:onclick,onchange,onload,onmouseover,如下程序:
//文檔加載完調用
window.onload = function(){
var elt = document.getElementById(“address”);
//表單提交前 調用
elt.onsubmit = function(){return validate(this);}
}
或設置文檔元素事件處理程序屬性也能註冊事件,例;
點擊這裡
另一種是用方法將事件處理程序傳遞給對象或元素,在除IE8之前版本外所有的瀏覽子中都支持addEventListener,接收三個參數,第一個註冊處理程序的事件類型,類型為字符串,不應該包括用於設置事件處理程序的前綴‘on’,第二個為調用的函數,第三個為一個佈爾型,一般為false,表示事件冒泡,若為true則不,IE下不知此方法,示例代碼如下:
<scriptlanguage=”javascript”>
window.onload =function(){
var b=document.getElementById(“mybutton”);
b.onclick =function(){alert(“click me”);};
b.addEventListener(“click”,function(){alert(“clickagain”);},false);
}
</script>
click me
使用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]);
}
}