事件 - 基础

事件的概念

• JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以触发JavaScript 函数的事件。我们可以认为事件是可以被JavaScript 侦测到的一种行为。

事件流

• 事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。

使用返回值改变HTML元素的默认行为

• HTML 元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false 来阻止它的默认行为。

通用性的事件监听方法

• 绑定HTML元素属性

    <input type="button" value="clickMe" onclick="check(this)"/>

• 绑定DOM对象属性

    document.getElementById("btn1").onclick = test;

• 实例：

    a href="http://www.iotek.com.cn" onclick="return false" target="_blank">点击我</a>
    <input type="button" value="测试1" id="mytest1" onclick="test1()">
    <button type="button" id="test2"><b>测试2</b></button>
    <script>
        function test1() {
            alert("绑定HTML元素属性");
        }
        function test2() {
            alert("绑定DOM对象属性");
        }
        document.getElementById("test2").onclick = test2;
    </script>

IE中的事件监听方法

    [object].attachEvent("事件类型","处理函数");    // 添加监听
    [object].detachEvent("事件类型","处理函数");    // 取消监听

标准DOM中的事件监听方法

    [object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件");
    [object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");

**提示：**IE监听方法中的事件类型和标准DOM监听方法中的事件类型写法有点不同，前者事件类型“on” 开头，比如：“onclick”，“onmousemove”等。而后者不需要去掉“on”，就是“click”，“mousemove”等

• 实例：

    input type="button" value="测试1" id="test1">
    <button id="test2"><b>测试2</b></button>
    <script>

        // 以下代码只能在ie浏览器测试
        // function show() {
        //     alert("hello ie");
        // }
        // document.getElementById("test1").attachEvent("onclick",show);
        // document.getElementById("test2").onclick = function() {
        //     document.getElementById("test1").detachEvent("onclick",show);
        // }

        //  以下代码是标准DOM中的事件监听
        var test1 = document.getElementById("test1");
        var test2 = document.getElementById("test2");
        test1.addEventListener("click", show, false);
        // test2.onclick = function(){
        //     test1.removeEventListener("click", show, false);
        // }    // 也可以写成下面的形式
        test2.addEventListener("click",function(){
            test1.removeEventListener("click", show, false);
        },false)
        
        function show() {
            alert("hello chrome");
        }
    </script>