js中事件監聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用並且簡單,但在原生js中比較復雜,這裡整理了addEventListener事件各方法的測試與例子供大家參考學習。
在前兩天做播放器的時候添加監聽後刪除監聽遇到了一點麻煩,刪不掉,後來看了一下才發現,參數需要完全對應,什麼叫完全對應呢,換句話說:
代碼如下:
$('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);
比如這句,需要傳入三個參數,這樣才能夠刪除,為什麼一定要這樣,沒錯,蛋疼的地方就在這裡:
在add和remove時,第三個參數確實可以不寫,但此時他們的默認情況是不一樣的!!
通常情況下addEventListener是false…
1、 添加自定義事件監聽
代碼如下:
var eventHandlesCounter=1;//統計添加事件監聽的個數,0作為預留位
function addEvent(obj,evt,fn){
if(!fn.__EventID){ fn.__EventID=eventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[]; }
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt] instanceof Function){
obj.__EventHandles[evt][0]=obj["on"+evt];
obj["on"+evt]=handleEvents;
}
}
obj.__EventHandles[evt][fn.__EventID]=fn;
function handleEvents(){
var fns = obj.__EventHandles[evt];
for (var i=0;i<fns.length;i++)
fns[i].call(this);
}
}
2、自定義刪除事件監聽
代碼如下:
function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
return false;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
delete obj.__EventHandles[evt][fn.__EventID];
}
}
3. 對上述方法進行修正
代碼如下:
function addEvent(obj,evt,fn,useCapture){
if(obj.addEventListener){//優先使用W3C事件注冊
obj.addEventListener(evt,fn,!!useCapture);
}else{
if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[];}
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt]){
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;
}
obj["on"+evtype]=addEvent.execEventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i<fns.length;i++){
if(fns[i] instanceof Function){
fns[i].call(this);
}
}
};
function delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {//先使用W3C的方法移除事件處理函數
obj.removeEventListener(evt,fn,!!useCapture);
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){delete fns[fn.__EventID];}
}
}
4、標准化事件對象
代碼如下:
function fixEvent(evt){
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if(evt.type == "mouseover"){
evt.relatedTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.relatedTarget = evt.toElement;
}
evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent函數不是單獨執行的,它必須有一個事件對象參數,而且只有事件發生時它才被執行!最好的方法是把它整合到addEvent函數的execEventHandles裡面。
代碼如下:
addEvent.execEventHandles = function (evt) {//遍歷所有的事件處理函數並執行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在這裡對其進行標准化操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//並且將其作為事件處理函數的第一個參數
//這樣在事件處理函數內部就可以使用統一的方法訪問事件對象了 } } };
上面是高手寫了,下面整理幾個實際的監聽事情的例子
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test6.html</title>
<script type="text/javascript">
function test(){
window.alert("您投了一次票");
document.getElementById("1").detachEvent("onclick",test);
}
</script>
</head>
<body>
<input type="button" value="投票" id="1"/>
<script type="text/javascript">
document.getElementById("1").attachEvent("onclick",test);
</script>
</body>
</html>
這裡使用document.getElementById("1").attachEvent("onclick",test);進行動態的事件綁定,使用
代碼如下: