001-DOM事件

h9911 發(fā)布于2019-08-20 18:20 / 2596人閱讀

摘要：決定還是繼續(xù)寫博客，記錄工作學(xué)習(xí)中遇到的問題，每天晚上對學(xué)習(xí)和遇到的問題進行總結(jié)。

決定還是繼續(xù)寫博客，記錄工作學(xué)習(xí)中遇到的問題，每天晚上對學(xué)習(xí)和遇到的問題進行總結(jié)。

1.DOM事件

1.HTML事件處理程序
2.DOM的0級事件（把一個函數(shù)函數(shù)賦值給一個事件處理程序?qū)傩裕?b>element.onclick(function(){})
3.DOM的二級事件(element.addEventListener(type,fn,false),（false添加到冒泡階段）、
element.attachEvent(type,fn,false))

2.封裝一個對象兼容各種瀏覽器

    var EventUtil = {
        addEvent: function (element, type, fn) {
            if (element.addEventListener) {
                element.addEventListener(type, fn, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, fn);  //兼容IE
            } else { 
                element["on" + type] = fn;      //DOM的0級
            }
        },

        removeEvent: function (element, type, fn) {
            if (element.removeEventListener) {
                element.removeEventListener(type, fn, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, fn);
            } else { 
                element["on" + type] = null;
            }
        }
    }

3.小例子

HTML結(jié)構(gòu)

JS代碼
我們現(xiàn)在給這個按鈕添加事件

//隨便寫一個函數(shù)，假設(shè)觸發(fā)這個按鈕的點擊事件后，會調(diào)用這個函數(shù)

    function showMsg(event) {
        alert(event.target.nodeName);  //會把綁定這個事件的標(biāo)簽的名字顯示出來
        event.stopPropagation();      //阻止冒泡
        event.preventDefault();       //阻止默認(rèn)行為
    }
    
    //獲取這個按鈕
    var btn0 = document.getElementById("btn0");
    //調(diào)用上面寫的封裝的函數(shù)綁定事件
    EventUtil.addEvent(btn0, "click", showMsg);

4.總結(jié)

主要是回顧了一下DOM事件，后面又做了兩個小練習(xí)
1.封裝事件處理
2.event事件對象