1、注册事件
（1）传统方式注册事件
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(){
alert("hello");
}
b.onclick=function(){
alert("你好");
}
</script>
</body>
- 存在唯一性，同一个元素，同一个事件只能设置一个处理函数，后面注册的处理函数会覆盖前面的处理函数
（2）方法监听注册方式（IE9以上）
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert("hello");
});
b.addEventListener("click", function(){
alert("你好");
});
</script>
</body>
- 注册事件的类型是字符串，必须加引号，且不带on
- 同一个元素同一个时间可以注册多个监听器
2、解绑事件
（1）传统方式
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(){
alert("hello");
b.onclick=null;
}
</script>
</body>
点过一次按钮后事件就失效了
（2）方法监听注册事件后解绑事件
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", fn);//不需要写小括号
function fn(){
alert("hello");
b.removeEventListener("click",fn);
}
</script>
</body>
3、DOM事件流
（1）概念
事件流是从页面中接收事件的顺序
事件发生时会在元素结点之间按照特定的顺序传播，这个传播过程即DOM事件流
从document到html再到元素搜索事件的阶段为捕获阶段，相反，为冒泡阶段
（2）演示
捕获阶段：
<body id="body"> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); },true); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },true); </script> </body>
- js代码中执行捕获或者冒泡中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- 参数为false或者省略则为冒泡阶段捕获
冒泡阶段：
<body id="body"> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); },false); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },false); </script> </body>
阻止冒泡：
<body id="body"> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); event.stopPropagation(); },false); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },false); </script> </body>
- 冒泡被阻止后只能点击一次确定，点击后不会再跳出来新的页面
- event是事件对象
4、事件对象
（1）获取事件对象
<body id="body"> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.onclick=function(event){ console.log(event); } </script> </body>
- event就是一个事件对象，写到侦听函数内部的小括号里面当形参来看
- 事件对象只有有了事件才会存在，是系统自动创建的不需要我们传递参数
- 事件对象是我们的事件的一系列相关数据的集合，跟事件相关
（2）事件对象的属性和方法
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(event){
console.log(event.target);//触发事件的元素
console.log(this);//绑定事件的对象
console.log(event.type);//事件的类型
}
</script>
</body>
5、事件委托（代理、委派）
<body id="body"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var ul=document.querySelector("ul"); ul.addEventListener("click",function(){ alert("helo"); }) </script> </body>
不是每一个子结点设置事件监听器，而是将事件的监听器设置到父节点上，然后利用冒泡原理影响到设置的子结点上
事件委托的作用：只操作了一次dom，提高了程序的性能