首頁  >  文章  >  web前端  >  詳細解析js原生事件描述(附上程式碼,簡單明了)

詳細解析js原生事件描述(附上程式碼,簡單明了)

亚连
亚连原創
2018-05-18 14:29:011981瀏覽

以下是我要幫大家整理的js原生事件,有興趣的同學可以去看看。

1、事件流 
事件流主要分為事件冒泡與事件擷取兩種。事件冒泡,目標元素最先接收事件,然後逐漸向上層傳播到較為不具體的節點。事件捕獲完全相反,它的主要思想是較不具體的節點最先接收到事件,然後逐漸向下層傳播到目標節點。

<html>
    <head>
        <title>事件流</title>
    </head>
    <body>
        <div id ="testDiv"></div>
    </body>
 </html>

當點選div時,冒泡事件接收到節點順序div->body->html->document 
捕獲事件接收到節點順序document->html->body ->div

2、事件處理程序 
a)HTML事件處理程序 
某個元素支援的每種事件,都可以使用一個與對應事件處理程序同名的HTML特性來指定。
缺點:1、時差問題,可能在瀏覽器還未解析點擊事件函數時,用戶已經點擊了頁面元素——通過try-catch包裹錯誤 
2、事件處理程序的作用域鏈在不同瀏覽器中會導致不同結果。 
3、HTML程式碼和Javascript程式碼緊密耦合,不利於擴充維護。
b) DOM0級事件處理程序 
將函數賦值給元素事件處理程序屬性 
var btn = document.getElementById(“#dv”); 
btn.onclick = function(){} ; 
想要刪除元素的事件處理程序–btn.onclicn = null;

該方式新增的事件處理程序在事件冒泡階段被處理。

c)DOM2級事件處理程序 
指定事件處理程序addEventListener 
#刪除事件處理程序removeEventListener 
接收三個參數即要處理的事件名,事件處理程序的函數,布爾值(true表示捕獲階段呼叫處理程序,false表示冒泡階段呼叫事件處理程序)

注意:addEventListener必須透過removeEventListener刪除且參數必須一致,所以透過addEventListener新增的匿名函數不能移除。

d)IE事件处理程序

attachEvent 
detachEvent 
两个方法接收相同的两个参数(”onclick”,”function(){}”); 
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。 
注意:attach中第一个参数是onclick而不是addEventListener中的click 
IE事件处理程序attachEvent添加的在全局作用域中运行 

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨浏览器的事件处理程序。 
由于不同浏览器之间事件处理程序不同,所以有必要编写可以跨浏览器使用的事件处理程序。

var eventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.deatchEvent){
            element.deatch("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS弹出窗口代码大全

几个前端常见的JS排序代码

JS去掉字符串前后空格或去掉所有空格的用法

以上是詳細解析js原生事件描述(附上程式碼,簡單明了)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn