js-15 DOM编程（三）

DOM事件绑定

DOM0级别事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容

HTML绑定

<!-- 1--html内直接绑定 -->
 <input type="button" id="btn0" onclick="alert('执行了html绑定的方法')" value="html中绑定"></input>

JS绑定

<!-- 2--使用js绑定 -->
    <input type="button" id="btn1" value="js绑定">

JS绑定事件时，不能加()，否则会在页面加载时立即执行
可以绑定匿名函数

DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

addEventListener()

 <!-- 3--使用addEventListener绑定 -->
    <input type="button" id="btn2" value="addEventListener绑定"></input>

removeEventListener()

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

DOM0级事件和DOM2级事件区别

DOM0级事件与DOM2级事件互不影响
DOM2级事件拥有事件流，分为三个阶段

1. 捕获事件阶段
2. 处于目标阶段
3. 事件冒泡阶段
   可通过第三个可选参数控制事件流

事件传参

无法绑定成功，加括号会直接执行
行内绑定，注意加引号
使用匿名函数