* html标签事件绑定：属性赋值 ，这个在该元素的properties属性中可以查到， 也可以在事件监听中看到 **1\. 在html标签中直接绑定；** **2\. 在js中获取到相应的dom元素后绑定；** **3\. 在js中使用addEventListener（）实现绑定；** ## onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 ``` function show() {console.log('show')} function print(){ 　console.log('print'); } <button onclick="show()" id="btn1" onclick="print()">html标签事件绑定</button> //触发的方法只有show方法 <button onclick="show();print()" id="btn1">html标签事件绑定</button> //一个事件，触发两个方法 // 解除事件绑定,,对于onclick dd.onclick = null; ``` * js事件绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到 ``` <button id="btn2">js事件绑定</button> document.getElementById("btn2").onclick = show; document.getElementById("btn2").onclick = print; //只能触发print方法，如果需要同时触发两个方法，只能使用事件监听 ``` 获取信息 ``` dd.onclick = function(event){ console.log(event.target.innerHTML);//event.target指向的是dd元素，以及他的所有信息 console.log(this.innerHTML);//this也是指向dd元素，包含他的可用信息 } ``` ``` dd.onmouseover = function(event) { this.style.backgroundColor = "red";//不会改变子元素 event.target.style.backgroundColor = 'red';//会改变子元素 }; ``` ## addEventListener绑定方式 优点： - 可以支持事件处理的捕获阶段，也可以支持时间处理的冒泡阶段，两个阶段都是通过addEventListener最后一个参数设置为false(默认值，表示事件冒泡)或者true(表示事件捕获)来切换 - 事件处理 this与onclick一样 - 事件处理函数中，event对象总是作为第一个可用参数 - 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 （按照顺序执行） 缺点： - IE8以下不支持 ``` <button id="btn3">事件监听</button> //show和print两个方法都可以触发 ，同时触发 document.getElementById("btn3").addEventListener("click",show); document.getElementById("btn3").addEventListener("click",print); //移除事件监听 document.getElementById("btn3").removeEventListener("click"); ```