响应事件

为了实现与页面元素的交互，就需要用到 JavaScript 事件。JavaScript 事件是在特定的事件发生时，由 HTML 元素发出的通知。JavaScript 可对这些事件进行响应，执行特定的任务。

响应事件

内联事件处理器

简单，但HTML和JS混合使用，不推荐。

<input type="button" onclick="myFunc()" />
<script>
    myFunc(){
        alert("You clicked the button");
    }
</script>

JS语句添加事件处理器

<input type="button" id="myButton" />
<script>
    myFunc(){
        alert("You clicked the button");
    };
    document.getElementById("myButton").onclick=myFunc; //注意：注册事件处理器时，函数名后面不能有括号（如果有括号，会先执行函数）。
</script>

使用匿名函数：

<input type="button" id="myButton" />
<script>
    document.getElementById("myButton").onclick=function(){
        alert("You clicked the button");
    };
</script>

删除事件处理器：

 document.getElementById("myButton").onclick=null;

利用addEventListener和removeEventListener方法添加或删除事件处理器

addEventListener和removeEventListener方法：

element.addEventListener('click',myFunc,false);
element.removeEventListener('click',myFunc,false);

第一个参数指明要捕获的事件，第二个参数指明要执行的函数，第三个参数是布尔值，指明当多个嵌套元素捕获同一事件时的处理顺序，一般设置为false

<input type="button" id="myButton" />
<script>
    myFunc(){
        alert("You clicked the button");
    };
    document.getElementById("myButton").addEventListener('click',myFunc,false);
</script>

注意

默认操作

一般情况下，特定HTML元素的事件处理器是在元素默认操作之前执行的。

<a href="1.html" id="myLink" link></a>
<script>
    document.getElementById("myLink").onclick = function () {
        this.href = "2.html";
    }
</script>

通过事件处理器的更改了跳转目标。

禁止默认操作

如果事件处理器给HTML元素返回了一个布尔值false，元素的默认操作就不会执行。
修改上面的函数代码，加入用户决定是否跳转的判断：

    document.getElementById("myLink").onclick = function () {
        this.href = "2.html";
        return comfirm('即将跳转到2.html，是否前往？')
    }

用户点击确定，返回true，跳转到2.HTML，用户点取消，返回false，则a标签的默认跳转操作不会进行。

全文结束