001-DOM事件

決定仍是繼續寫博客，記錄工做學習中遇到的問題，天天晚上對學習和遇到的問題進行總結。

1.DOM事件

1.HTML事件處理程序
2.DOM的0級事件（把一個函數函數賦值給一個事件處理程序屬性）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結構

<div id="box">
        <input type="button" value="按鈕0" id="btn0">
    </div>

• JS代碼
  咱們如今給這個按鈕添加事件

//隨便寫一個函數，假設觸發這個按鈕的點擊事件後，會調用這個函數

function showMsg(event) {
        alert(event.target.nodeName);  //會把綁定這個事件的標籤的名字顯示出來
        event.stopPropagation();      //阻止冒泡
        event.preventDefault();       //阻止默認行爲
    }
    
    //獲取這個按鈕
    var btn0 = document.getElementById('btn0');
    //調用上面寫的封裝的函數綁定事件
    EventUtil.addEvent(btn0, 'click', showMsg);

4.總結

主要是回顧了一下DOM事件，後面又作了兩個小練習
1.封裝事件處理
2.event事件對象