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事件对象