对JavaScript事件处理程序/事件监听器的设定的简单介绍

下面是一些对事件处理进行设定的方式。

指定为HTML元素的属性（事件处理程序）
指定为DOM元素的属性（事件处理程序）
通过EventTarget.addEventListener()进行指定（事件监听器）

接下来，将会对各种方式进行简单说明。

一、指定为HTML元素的属性

将事件处理程序指定为HTML元素的属性是一种最为简单的设定事件处理程序的方式。

<a id="test" href="https://www.baidu.com" onclick="alert('bar');alert('baz')">百度一下</a>

如果包含多个事件处理程序则用分号分隔。当然，事先另外定义一个函数之后再执行该函数的方式也不会有问题。

<body id="bo">
    <a id="test" href="https://www.baidu.com" onclick="f()">百度一下</a>
<script>
    function f() {
        window.alert("page transfer");
        return true;
    }
</script>

如果事件处理程序返回了一个false值，则会取消该事件的默认行为。在下面的例子中，事件指的是超链接的跳转事件。

<body id="bo">
    <a id="test" href="https://www.baidu.com" onclick="return f()">百度一下</a> <!--onclick="return f()" 将onclick视为函数-->
<script>
    function f() {
        window.alert("page transfer");
        return false;
    }
</script>

二、指定为DOM元素的属性

如果一个页面分别使用了HTML文件和JavaScript文件，则应该尽可能少地在HTML文件中使用JavaScript代码，以提高维护性。因此，最好将事件处理程序的设定全都写在JavaScript内。

事件处理程序可以被指定为节点的属性。

<body id="bo">
    <a id="test" href="https://www.baidu.com">百度一下</a>
<script>
    var doit = document.getElementById('test');
    function f() {
        window.alert('stop page transfer');
        return false;   /*同理，返回false超链接将不会实现跳转*/
    }
    doit.onclick = f;
</script>

注意事件处理程序的设定，像以下前两种方式都是错误的。

    doit.onclick = f(); //得到的是函数的返回值
    doit.onclick = "f()";   //单纯的字符串赋值
    doit.onclick = f;   //正确，得到的是函数的引用

如果将一个已指定为HTML属性中的事件处理程序指定为DOM元素的属性，则会覆盖HTML便签属性中的内容。实现这一多“指定”功能需要使用事件监听器。

三、通过EventTarget.addEventListener()进行指定

如果只能够指定1种处理操作的话，就很难处理复杂的行为。为了弥补这一缺点，在DOM Level2中定义了EventTarget.addEventListener()方法。

<body id="bo">
    <a id="test" href="https://www.baidu.com">百度一下</a>
<script>
    var doit = document.getElementById('test');
    function f() {
        window.alert('stop page transfer');
        return true;
    }
    function a(){
        window.alert('HelloWorld');
        return true;
    }
    doit.addEventListener('click',f,false); /*第一个参数为注册事件，第二个参数为注册事件处理函数，第三个参数不做介绍*/
    doit.addEventListener('click',a,false); /*注册多个监听器*/
</script>