DOM事件的各种行为

1：HTML事件处理程序

通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML与Javascript的强耦合，一旦需要修改函数名就得修改两个地方，当然其优点是不需要操作DOM来完成事件的绑定。，

 <button type="button" onclick="showFn()">ok</button>
           
    <script>
   function showFn() {
       alert("Hello World");
     }
    </script>

２：将一个函数赋值给一个事件处理属性

将一个函数赋值给一个事件处理属性的方式绑定事件，可以通过给事件处理属性赋值ｎｕｌｌ来解绑事件。这种方式解决了HTML与Ｊａｖａｓｃｒｉｐｔ的强耦合，是最常用的方式。缺点在于一个处理程序无法同时绑定多个处理函数。

<button  id="btn" type="button" >Over Me</button>     
    <script>
        var btn=document.getElementById("btn");
        btn.onmouseover=function(){
            alert("Mouse Over Me!");
        }
    </script>

３：Javascript同事件绑定多个函数

addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含了３个参数，分别是绑定的事件处理属性名称（不包含ｏｎ）、处理函数和是否在捕获时执行事件处理函数。同一按钮单击事件绑定多个函数如下：

var btn=document.getElementById("btn");
        btn.addEventListener("click",showFn,false);     //绑定事件
        btn.addEventListener('click',show,false);     //绑定事件
        btn.removeEventListener('click',showFn,false);     //解绑事件

注意：IE8及以下版本不支持addEventListener和removeEventListener，需要用attachEvent　和　detachEvent来实现，不需要传入第三个参数，因为IE８及以下版本只支持冒泡事件。

  btn.attachEvent('onclick',showFn);   //绑定事件
       btn.detachEvent('onclick',showFn);    //解绑事件

4：Javascript阻止默认行为

Javascript代码需要向Event返回一个Boolean类型的值（默认是true），如果为true则在执行完Javascript代码后会执行默认动作；如果加上return false,那就是告诉它取消默认动作了。链接<a>的默认动作就是跳转到指定页面，提交按钮<input type="submit">的默认动作就是提交表单，在必要时可以通过Javascript来阻止默认行为，不会停止冒泡，用Jquery中的return false 则即阻止默认行为又防止对象冒泡。下面例子用原生Javascript的return false 方法来阻止链接<a>的跳转。

阻止链接a的跳转

<ul onclick='alert("ul");'>
<li id="ul-a" onclick="alert('li');"><a href="http://www.baidu.com" id="test">百度</a></li>
</ul>     
    <script>
       var a=document.getElementById("test");
       a.onclick=function(){
           return false;    //阻止默认行为
       } ;
    </script>

当点击之后：