使用事件處理程序

hoohack 發布于2019-08-21 18:47 / 1674人閱讀

摘要：事件處理程序即事件直接加在結構里面的按鈕該事件處理的缺點是和和的耦合性很高，一個地方發生更改時，要修改多處地方在調用函數的時候才在其后面加括號，如果要進行函數傳參數，直接寫函數名就行級事件處理程序較傳統的方式是把一個函數賦值給一個事件的處理

1.HTML事件處理程序

即事件直接加在HTML結構里面的

該事件處理的缺點是和html和js的耦合性很高，一個地方發生更改時，要修改多處地方
在調用函數的時候才在其后面加括號（），如果要進行函數傳參數，直接寫函數名就行

2.DOM0級事件處理程序

較傳統的方式是：把一個函數賦值給一個事件的處理程序屬性

即獲取對應添加事件的對象，然后添加onclick點擊的屬性，觸發事件處理程序，如果要移除點擊事件，把onclick屬性賦值為null，該事件處理程序沒有HTML事件處理程序的缺點

3.DOM2級事件處理程序

DOM2級事件處定義了兩個方法：
用于處理指定和刪除事件處理程序的操作
addEventListener()和removeEventListener().
接收三個參數：要處理的事件名，作為事件處理程序的函數和布爾值（true表示為在事件捕獲時執行事件處理函數，false表示為在事件冒泡的時候執行事件處理函數）
其中addEventListener的第一個參數為觸發的事件類型，不用想DOM0級事件類型加on，直接類型名就行，如“click”，“mouseover”，第二個參數為函數名字，直接寫函數名，不用加（）括號，第三個參數一般選擇false，即事件冒泡，這樣能兼容很多瀏覽器；
通過addEventListener添加的事件要通過removeEventListener()才能移除，而且參數要和之前添加的一樣

4.IE事件處理程序

不用加第三個參數false和true來判斷事件流類型，因為IE8或者更早的瀏覽器只支持事件冒泡；
在傳遞第一個參數事件類型時要注意要加on，即“onclick”“onmouseover”，因為它和DOM事件不同；
IE事件處理程序只支持IE 瀏覽器和opera 瀏覽器

5.跨瀏覽器的事件處理程序

    //跨瀏覽器事件處理程序 
    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.attachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventUtil.addHandler(btn,"click",showMessage);

GPU云服務器云服務器事件處理程序 js事件處理程序待處理事件多個事件處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90806.html

[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

wangym 2019-08-22 10:57 評論0 收藏0
[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

RayKr 2019-08-01 14:48 評論0 收藏0
《JavaScript 闖關記》之事件

摘要：事件捕獲團隊提出的另一種事件流叫做事件捕獲。所有節點中都包含這兩個方法，并且它們都接受個參數要處理的事件名作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。 JavaScript 程序采用了異步事件驅動編程模型。在這種程序設計風格下，當文檔、瀏覽器、元素或與之相關的對象發生某些有趣的事情時，Web 瀏覽器...

ConardLi 2019-08-22 10:44 評論0 收藏0
Event Handler 事件處理程序 1 ---《高程3》

摘要：為屬性賦值匿名函數事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。事件捕獲和事件冒泡 DOM2級事件規定的事件流包括三個階段：事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲，從外部節點到內部節點依次遍歷，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡...

WalkerXu 2019-08-20 11:31 評論0 收藏0
Event Handler 事件處理程序 1 ---《高程3》

摘要：為屬性賦值匿名函數事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。事件捕獲和事件冒泡 DOM2級事件規定的事件流包括三個階段：事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲，從外部節點到內部節點依次遍歷，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡...

wujl596 2019-08-01 15:47 評論0 收藏0