1.HTML事件处理
直接添加到html结构中处理程序属性
<body> <button onclick="demo()">按钮</button> <script> function demo(){ alert("html事件处理"); } </script> </body>
这种html事件处理有很大坏处是修改一处函数名称必须同时修改两处（onclick事件内容也要修改）
2.DOMO级事件处理
把一个函数赋值给一个事件
<body> <button id="btn">按钮</button> <script> var a=document.getElementById("btn"); a.onclick=function demo(){alert("DOMO级事件处理")}; </script> </body>
执行后点击按钮弹出窗口DOMO级事件处理
若加上a.onclick=null则赋值为空，点击按钮不会弹出窗口
它的弊端是如果同时赋值多个a.onclick则前面的事件会被覆盖只弹出最后一个窗口
3.DOMO2级事件处理
addEventListener("事件名",事件函数,"布尔值(可忽略)")
true为事件冒泡
false为事件捕获
现在一般不再使用布尔值，因为多数情况下采取事件冒泡
removeEventListener移除该事件
<body> <button id="btn">按钮</button> <script> var a=document.getElementById("btn").addEventListener("click",function demo(){alert("DOMO二级事件处理")}); </script> </body>
弹出窗口DOMO二级事件处理
<body> <button id="btn">按钮</button> <script> var a=document.getElementById("btn"); a.addEventListener("click",demo1); a.addEventListener("click",demo2); a.addEventListener("click",demo3); function demo1(){ alert("DOMO二级处理事件1"); } function demo2(){ alert("DOMO二级处理事件2"); } function demo3(){ alert("DOMO二级处理事件3"); } </script> </body>
多个窗口依次弹出也不会被覆盖，所以DOMO二级事件处理使用最为普遍，可用removeEventListener（“事件名”，事件函数名）移除掉某一事件
二、事件对象
1.事件对象：
在触发一个DOMO事件时都会产生一个对象
2.事件对象event：
（1）type：获取事件的类型
<body> <button id="btn">按钮</button> <script> var a=document.getElementById("btn"); a.addEventListener("click",demo1); function demo1(e){ alert(e.type); } </script> </body>
弹出窗口click，表示这个事件的类型是click事件
（2）target：获取事件的目标
<body> <button id="btn">按钮</button> <script> var a=document.getElementById("btn"); a.addEventListener("click",demo1); function demo1(e){ alert(e.target); } </script> </body>
弹出窗口
表示事件的目标是button元素
（3）stopPropagation（）：阻止事件的冒泡
<body> <div id="div"> <button id="btn">按钮</button> </div> <script> document.getElementById("btn").addEventListener("click",demo1); document.getElementById("div").addEventListener("click",demo2); function demo1(e){ alert(e.target); } function demo2(r){ alert(r.type); } </script> </body>
执行后先弹出目标button元素后弹出类型click，由此可知这是事件冒泡，从最根本的元素触发，如果我们不想要事件冒泡，可以采取stopPropagation
<body> <div id="div"> <button id="btn">按钮</button> </div> <script> document.getElementById("btn").addEventListener("click",demo1); document.getElementById("div").addEventListener("click",demo2); function demo1(e){ alert(e.target); e.stopPropagation(); } function demo2(r){ alert(r.type); } </script> </body>
需要注意的是stoPropagation应放在最根本元素的函数里，这样调用才会阻止事件冒泡
（4）preventDefault（）：阻止事件的默认行为（）
<body> <div id="div"> <button id="btn">按钮</button> <a href="http://baidu.com" id="aid">baidu</a> </div> <script> document.getElementById("btn").addEventListener("click",demo1); document.getElementById("div").addEventListener("click",demo2); document.getElementById("aid").addEventListener("click",demo3); function demo1(e){ alert(e.target); } function demo2(r){ alert(r.type); } function demo3(q){ q.preventDefault(); } </script> </body>
执行后点击baidu不会弹出窗口也不会跳转页面，因为preventDefault把它的默认行为阻止了