对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>
