js事件監聽-addEventListener (w3c標準) 和 attachEvent(ie)

研究了一個小時,沒看懂這兩個屬性javascript

window.onload = function(){
var oDiv = document.getElementById("J_myDiv"); //找到對象
oDiv.onclick = function(){ //設置事件監聽函數
alert("click");
}
}

缺點:1.添加單一事件html

        2.不能刪除事件java

第二:IE中監聽函數ide

複製代碼
var oDiv;

function fnClick(){
alert("click me");
oDiv.detachEvent("onclick",fnClick);//刪除監聽函數
}

window.onload = function(){
oDiv = document.getElementById("J_myDiv");//找到對象
oDiv.attachEvent("onclick",fnClick); //添加監聽函數
}
複製代碼

第三:標準DOM監聽函數函數

複製代碼
var oDiv;

function fnClick1(){
alert("click1");
// oDiv.removeEventListener("click",fnClick2,false); //刪除監聽函數2
}

function fnClick2(){
alert("click2");
}

window.onload = function(){

oDiv = document.getElementById("J_myDiv"); //找到對象
oDiv.addEventListener("click",fnClick1,false); //添加監聽函數1
oDiv.addEventListener("click",fnClick2,false); //添加監聽函數2

}
複製代碼


第四:從js實例來看事件監聽 參看:http://imethan.com/?p=208學習

第五:從實例來看JS的事件監聽學習筆記(事件監聽綁定、ff/IE不一樣的處理機制兼容總結)參看:http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.htmlspa

第六:代碼總結3d

複製代碼
<script language="javascript">//Javascript 事件演示window.onload = function(){    var hideBox = function(event){        document.getElementById('status_show').style.display = 'none';        document.getElementById('status_hide').style.display = 'block';    };    var showBox = function(event){        document.getElementById('status_show').style.display = 'block';        document.getElementById('status_hide').style.display = 'none';        stopEvent(event);    };    var stopEvent = function(event){        e = event || window.event;        if(e.stopPropagation){            e.stopPropagation();        }else {            e.cancelBubble = true;        }    };    if(document.addEventListener){        document.addEventListener('click', hideBox, false);        document.getElementById('status_hide').addEventListener('click', showBox, false);        document.getElementById('status_show').addEventListener('click', stopEvent, false);    }else {        //For IE        document.attachEvent('onclick', hideBox);        document.getElementById('status_hide').attachEvent('onclick', showBox);        document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);    }};</script>
相關文章
相關標籤/搜索