【JS】DOM事件

事件

JavaScript和HTML的交互式通过事件实现的。
事件是某个行为触发的，比如鼠标移动，点击，键盘等等

事件流

事件流描述的是从页面中接收事件的顺序，目前主要有三种模型：

1. 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
2. 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
3. DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
   Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

/*事件冒泡模型*/
div -> body ->html ->document
/*事件捕获模型*/
document ->html->body->div
/*DOM事件流*/
document->html->body->div->body->html->document

事件处理程序

也称为事件侦听器，事件就是用户或者浏览器自身执行的某种动作

HTML内联方式

• 元素支持的每个事件都可以使用一个相应事件处理程序同名的html属性指定。这个属性的值应该是可以执行的JavaScript代码
  <input type="button" value="Click Here" onclick="alert("clicked!");" />
• 在html事件处理程序中可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，刚才的例子可以写成这样
  <input type="button" value="Click Here" onclick="showMessage();" />
• 在HTML中指定事件处理程序书写很方便，但是有两个缺点。
  1.存在加载顺序的问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成就点击按钮之类的触发事件，存在时间差问题
  2.这样书写html代码和JavaScript代码紧密耦合，维护不方便

JavaScript指定事件处理程序

把一个方法赋值给一个元素的事件处理程序属性
每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定时间处理程序

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick
这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可

DOM2事件处理程序

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作

1. addEventListener
2. removeEventListener
   所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
3. 事件类型
4. 事件处理方法
5. 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

我们可以为click事件添加多个处理程序

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);

    btnClick.addEventListener('click', function() {
        alert('Hello!');
    }, false);
</script>

这样两个事件处理程序会在用户点击button后按照添加顺序依次执行
通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为虽然匿名函数的方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);

阻止默认事件

元素必须有默认事件才会被阻止，比如a链接，点击跳转，这个默认事件就可以被阻止
event.preventDefault()

事件代理

目的：减少与dom的交互次数，提高性能
原理：利用事件的冒泡原理来实现的
举例：如果有一个无序列表ul，在点击每一个li的时候，触发一个click点击事件，那如果我给外层的ul加一个点击事件，那么li在被点击的时候，会冒泡到ul上，所以ul的click事件依然被触发。如此，减少了与DOM的交互（不然还需要li的遍历），提高了效率