js事件監聽

  經過添加事件監聽進一步實現業務處理。能夠對同一個元素添加相同的事件監聽,執行會從上到下的原則,也能夠添加多個事件監聽針對同一元素。瀏覽器

針對元素監聽:測試

 document.getElementById("idName").addEventListener("eventType",functionName);//注意:前面不加on 如click事件spa

針對window對象監聽:對象

window.addEventListener(「resize」,function(){ aler(「窗體變大或者變小」);});//經過resize這個事件觸發監聽如切換瀏覽器窗口的百分比或者最大化最小化的變換。事件

監聽中實現參數傳遞:element

document.getElementById("idName").addEventListener("click",function(){ var x=5; functionName(x);}) function  functionName(a){alert(a);};rem

事件冒泡:get

事件冒泡主要是指有2個元素a和b都有監聽事件,a元素包含b元素如a元素是div.b元素是span.經過給他們設置監聽事件click,當你點擊div時,沒有點到span標記的範圍。此時就會觸發div的監聽事件,當你點擊span標記的時候此時就會觸發span標記的監聽事件,接着再觸發div監聽事件。也就是從內到外的事件監聽觸發過程。io

document.getElementById("idName").addEventListener("click",function(){ alert("測試");},false);//默認狀況是冒泡傳遞event

事件捕抓:

事件捕抓跟事件冒泡正好相反。是從外到內的監聽事件觸發的過程

document.getElementById("idName").addEventListener("click",function(){ alert("測試");},true);//捕抓傳遞

監聽事件的移除:

以上都是經過addEventListener('eventType',functionName)添加監聽事件,移除已經產生的監聽事件用removeEventListener('eventType',functionName);

注意:針對Opera 7.0,IE8及之前的低版本不支持addEventListener()和removeListener()。解決辦法是用attachEvent()和detachEvent()代替添加和刪除;

經過判斷if(element.addEventListener){ //使用addEventListener() }else if(element.attachEvent){ //使用attachEvent()}

相關文章
相關標籤/搜索