DOM事件相关

dom事件基础

1. 事件三要素。

事件源、事件类型、事件处理程序

2. 事件注册

(1)传统方式注册事件( 给同一个元素同一个事件可以注册多个事件，后者会覆盖掉前者)

        btns[0].onclick = function() {
            alert('hi');
        }

(2) 事件侦听注册事件 addEventListener
里面的事件类型是字符串,必须加引号，而且不带on
同一个元素同一个事件可以添加多个侦听器（事件处理程序）

        btns[1].addEventListener('click', function() {
            alert(22);
        })

（3）attachEvent（ie9以前的版本支持）

btns[2].attachEvent('onclick', function() {
            alert(11);
        })

3. 事件删除

（1）传统方式删除事件

    divs[0].onclick = null;

（2）removeEventListener 删除事件,（事件处理程序要单独写，不然无法说明要移除哪个监听器）

divs[1].addEventListener('click', fn)
    function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

4. 事件流

含义：事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程称为DOM事件流。
三个阶段：捕获阶段、当前目标阶段、冒泡阶段。
JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent（）只能得到冒泡阶段。
如果addEventListener 第三个参数是 true 那么则处于捕获阶段，如果addEventListener 第三个参数是 false 或者省略，那么则处于冒泡阶段。

5. 事件对象

div.onclick = function(e) {  }

e就是一个事件对象，可以自己随意命名，事件对象是我们事件的一系列相关数据的集合比如鼠标事件、键盘事件等
ie678兼容性的写法:
e = e || window.event;
常见事件对象的属性和方法

e.target。返回的是触发事件的对象（元素）
e.type。返回事件类型
阻止默认行为（事件）。
1. e.preventDefault(); 有兼容性问题
2. e.returnValue;（非标准，低版本浏览器 ie678使用）
3. return false。也能阻止默认行为且没有兼容性问题。特点： return 后面的代码不会被执行，而且只限于传统的注册方式
4. stopPropagation() 。阻止冒泡，dom 推荐的标准方法
  鼠标事件对象
- client。鼠标在可视区的x和y坐标（获取的是数值，不带单位，若赋值给其他对象需带单位）
```
console.log(e.clientX);
console.log(e.clientY);
```
- page。鼠标在页面文档的x和y坐标.
- screen。鼠标在电脑屏幕的x和y坐标.
  键盘事件对象
- keyup。按键弹起的时候触发
- keypress。按键按下的时候触发，不能识别功能键，比如 ctrl shift 左右箭头等
- keydown。按键按下的时候触发，能识别功能键，比如 ctrl shift 左右箭头等
  如果同时绑定以上三个事件，执行顺序为：keydown -- keypress -- keyup
- keyCode属性。可以得到相应键的ASCII码值

事件委托

事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。

//给ul添加监听器，利用事件委托，当点击每个li时，使小li背景变为蓝色
ul.addEventListener('click', function(e) {
   e.target.style.backgroundColor = 'blue';
      })