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把它的默认行为阻止了