DOM 0级处理：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <button id="btn1">butn</button>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.οnclick=function(){alert("hello world");}//更改一个地方即可 有木有一点像“单例设计模式”~_~
        btn1.οnclick=null;//直接清空
    </script>
</body>
</html>

但是 会覆盖： 
 var btn1=document.getElementById("btn1");
        btn1.οnclick=function(){alert("hello world");}
        btn1.οnclick=function(){alert("hello world2");}

Dom2级事件处理不会覆盖 需要这么写： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <button id="btn1">butn</button>
    <script>
       //下面只是拆开写了 var btn1=document.getElementById("btn1").addEventListener("click",demo);
        var btn1=document.getElementById("btn1");
       btn1.addEventListener("click",demo1);
       btn1.addEventListener("click",demo2);
       function demo1()
        {
            alert("Dom1级事件处理程序");
        }
       function demo2()
       {
           alert("Dom2级事件处理程序");
       }
    </script>
</body>
</html>

移除： 
  var btn1=document.getElementById("btn1");
       btn1.addEventListener("click",demo1);
       btn1.addEventListener("click",demo2);
       function demo1()
        {
            alert("Dom1级事件处理程序");
        }
       function demo2()
       {
           alert("Dom2级事件处理程序");
       }
        btn1.removeEventListener("click",demo1);

IE： 
var btn1=document.getElementById("btn1");
       if(btn1.addEventListener)
       {
           btn1.addEventListener("click",demo);
       }
        else if(btn1.attachEvent)
       {
           btn1.attachEvent("onclick",demo)
       }
        else btn1.οnclick=demo();
        function demo()
        {
            alert("hello");
        }
事件对象 1）type 获取事件类型
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <button id="btn1">butn</button>
    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        function showType(event)
        {
            alert(event.type);
        }
    </script>
</body>
</html>

2）target获取事件对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <button id="btn1">butn</button>
    <script>
        document.getElementById("btn1").addEventListener("click",showType);
      //  document.getElementById("btn1").
        function showType(event)
        {
            alert(event.target);
        }
    </script>
</body>
</html>

事件冒泡的栗子： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <div id="div">
        <button id="btn1">butn</button>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        document.getElementById("div").addEventListener("click",showDiv);
        function showType(event)
        {
            alert(event.target);
        }
        function showDiv(event)
        {
            alert("div");
        }
    </script>
</body>
</html>

此时弹出两个对话框 因为div包含button

阻止：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <div id="div">
        <button id="btn1">butn</button>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        document.getElementById("div").addEventListener("click",showDiv);
        function showType(event)
        {
            alert(event.target);
            event.stopPropagation();//阻止事件冒泡
        }
        function showDiv(event)
        {
            alert("div");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">hello</p>
    <div id="div">
        <button id="btn1">butn</button>
        <a href="http://www.jikexueyuan.con" id="aid">极客学院</a>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        document.getElementById("div").addEventListener("click",showDiv);
        document.getElementById("aid").addEventListener("click",showA);
        function showA()
        {
            event.stopPropagation();
            event.preventDefault();//使得链接不能正常打开 即阻止事件默认行为
        }
        function showType(event)
        {
            alert(event.target);
            event.stopPropagation();//阻止事件冒泡
        }
        function showDiv(event)
        {
            alert("div");
        }
    </script>
</body>
</html>