javascript事件的注册方式总结

　　在工作一年之后发现很多平常为了解决问题去查询百度获得到的知识点，在几天或是几周之后就会很容易遗忘。为了将凌散的知识点归集起来需要系统的学习，在脑海中建立起架构。最近在系统的学习javascript，为此我买了一本《javascript权威指南》来系统的学习，现在打算在学习的过程中记录一些笔记用来达到巩固的效果。今天记录的是javascript中的事件处理。

　　首先学习一件新鲜的事情物可以从起定义着手，搞清楚是什么，再知道怎么用。由浅入深。废话不多说，操练起来。

javascript事件的定义：

 在客户端javascript程序中采用了异步事件驱动编程模型。在这种程序设计风格下，当文档，浏览器，元素或与之相关的对象发生某些有趣的事情时，文本浏览器就会产生事件。

事件的类型：

依赖于设备的输入事件，如：mousedown，mouseover等。

独立于设备的输入事件，如：尚未广泛实现 textinput事件就是一个独立于设备的输入事件，他既可以取代按键事件并支持键盘的输入，也可以替代剪切和黏贴与手写识别事件。

用户界面事件，通常是比价高级的事件，通常出现在定义问问吧应用用户界面的HTNL表的元素上，如;

focus，change事件。

状态变化事件，如：loadstart，progress等。

特定API事件，如：dragstart，dragenter等。

计时器和错误处理程序事件。如timer和error hangdler。

传统事件类型

表单事件：submit，reset，click，change，focus，blur。

Window事件：unload，load，beforeload，beforeunload，resize，scroll。

鼠标事件：click，mousedown，mouseover，mousemove，mouseup，

键盘事件：keypress，keydown，keyup。

DOM事件：

3级DOM事件规范标准化了不冒泡的focusein和focuseout事件来取代冒泡的focusheblur事件，标准化了冒泡的mouseenter和mouseleave事件来取代不冒泡的mouseover和mouseout事件。

HTML5事件

html5定义了大量的新的web应用API，如：<audio>和<video>元素。

触摸屏和移动设备事件

注册事件处理程序

（1）设置javascript对象属性为事件处理程序，如：

 <script>
        window.onload = function () {
            var elt = document.getElementById("address");
            elt.onsubmit = function () {
                return this;
            };
        }
 </script>

（2）设置HTML标签属性为事件处理程序：如：

<button onclick="alert('Thank you')">点击这里</button>

（3）使用addEventListener()，该属性不会影响onclick属性的值，而且可以重复添加一系列的事件。

如;

 <button id="btn"> click me</button>
    <script>
        var b = document.getElementById('btn');
        b.onclick = function () {
            alert('click me')
        };
        b.addEventListener('click', function () {
            alert("Thank you!");
        })
        b.addEventListener('click', function () {
            alert("You are welcome!");
        })
    </script>

以上的代码中会依次弹出 “click me”，”Thank you!“，“You are welcome!”，那我们该如何注销事件呢，其实可以用removeEventListener函数来注销。

如下代码：

<button id="btn"> click me</button>
<script>
    var ChangeColor = function () {
        this.style.background = 'red';
    }
    var b = document.getElementById('btn');
    b.addEventListener('mouseover', ChangeColor)
    b.addEventListener('click', function () {
        alert("Thank you!");
    })
    b.addEventListener('click', function () {
        this.style.background = 'yellow';
        alert("You are welcome!");
    })
    b.onclick = function () {
        this.removeEventListener('mouseover', ChangeColor);
        alert('click me');
    };
</script>

鼠标第一次经过按钮的时候按钮的背景色改为红色，当点击按钮后再弹出You are welcome！ 之后按钮的背景色也改为看黄色，并注销了该按钮的鼠标悬浮事件，第二次悬停在按钮上的时候按钮的背景色依旧是黄色。

(4)attachEvent()

IE9之前不支持addEventListener()和removeEventListener()

但是在IE5之后定义了类似的方法attachEvent()和detachEvent()

 <button id="btn"> click me</button>
    <script>
        var ChangeColor = function () {
            this.style.background = 'red';
        }
        var b = document.getElementById('btn');
        b.attachEvent('mouseover', ChangeColor)
        b.attachEvent('click', function () {
            alert("Thank you!");
        })
        b.attachEvent('click', function () {
            this.style.background = 'yellow';
            alert("You are welcome!");
        })
        b.onclick = function () {
            this.detachEvent('mouseover', ChangeColor);
            alert('click me');
        };
    </script>

 总结：

共三种调用方式，标签的属性注册方式相对方便但把js和html 混在一起不利于后期维护，并暴露了方法名称，不够安全。对象属性注册的方式相对隐秘，但不能重复注册多个事件在一个元素上会导致之前的事件被最新的事件给覆盖。使用addEventListener()或者attachEvent()方法可以注册多个方法在事件上面相对其他两个在注册环节上显的先对复杂。

具体使用那个方式来注册事件还是要根据具体的业务环境来选择。