使用事件處理程序

hoohack 發(fā)布于2019-08-21 18:47 / 1683人閱讀

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

1.HTML事件處理程序

即事件直接加在HTML結(jié)構里面的

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

2.DOM0級事件處理程序

較傳統(tǒng)的方式是：把一個函數(shù)賦值給一個事件的處理程序?qū)傩?/p>

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

3.DOM2級事件處理程序

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

4.IE事件處理程序

不用加第三個參數(shù)false和true來判斷事件流類型，因為IE8或者更早的瀏覽器只支持事件冒泡；
在傳遞第一個參數(shù)事件類型時要注意要加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事件處理程序待處理事件多個事件處理

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90806.html

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

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

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

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

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

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

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

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

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

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

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