DOM事件总结

JS中都有那些事件，简单介绍几种

1、onclick 鼠标点击时触发此事件
2、ondblclick 鼠标双击时触发此事件
3、onmousedown 按下鼠标时触发此事件
4、onmouseup 鼠标按下后松开鼠标时触发此事件
5、onmouseover 当鼠标移动到某对象范围的上方时触发此事件
6、onmousemove 鼠标移动时触发此事件
7、onmouseout 当鼠标离开某对象范围时触发此事件
8、onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
9、onkeydown 当键盘上某个按键被按下时触发此事件
10、onkeyup 当键盘上某个按键被按放开时触发此事件

以上都是比较常见的一些事件，知道了事件我们就要学会怎么使用，下面就介绍一下事件的使用方法

绑定事件的3种方法

1、直接绑定在标签上如：

<div id="box" onclick="dianji();">  

• 这种写法最古老,兼容性最强,属于DOM的0级事件
  2、通过jsDOM对象进行绑定如：

DOM对象.onclick = function () {}  

• 这种绑定是把一个DOM对象onclick属性赋值为一个函数,属于DOM的0级事件
• 因此,函数内部的this直接指向该DOM对象.
• 在这种绑定方式中,只能给一个事件,绑定一个处理函数，多次绑定会覆盖
  3、通过事件监听进行绑定如：

addEventListener('click',function(){});

• 靠事件监听器绑定事件，可多次绑定同一类型事件
• 函数的第一个参数为事件名（注意不加on），第二个参数为事件函数，第三个参数为冒泡与否（布尔值）

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

下面是DOM2级绑定事件的兼容方法：

var function1 = function() {
            console.log('第一个盒子');
        }
        var addEvent = function(element, name, fn) {
            if (element.addEventListener) {
                element.addEventListener(name, fn);
            } else if (element.attachEvent) {
                element.attachEvent('on' + name, fn);
            } else {
                element['on' + name] = fn;
            }
        }
        addEvent(box1,'click', function1);

相对应的还有事件移除兼容写法：

 var removeEvent = function(element, name, fn) {
            if (element.removeEventListener) {
                element.removeEventListener(name, fn);
            } else if (element.detachEvent) {
                element.detachEvent('on' + name, fn);
            } else {
                element['on' + name] = null;
            }
        }
        removeEvent(box1,'click',function1);

简单的总结，希望对大家有所帮助，如有不对的地方也烦请指出，谢谢！