JS-DOM-监听事件

一、 事件侦听注册事件 addEventListener

(1) 里面的事件类型是字符串 必定加引号 而且不带on

(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

传统注册事件只能给一个元素注册一个同类型的事件 监听注册事件可以

二、删除事件

1.传统方式删除事件

事件 = null；（divs[0].onclick = null;）

2.监听事件删除

removeEventListener （divs[1].removeEventListener('click', fn);）

.attachEvent     （divs[2].attachEvent('onclick', fn1);）

三、DOM 事件流

1.捕获阶段

如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son

2.冒泡阶段

 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document

四、事件对象

    1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看

    2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

    3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键

    4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e

    5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

  五、事件对象的属性

1.target

e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）

2.阻止默认行为

  e.preventDefault();

3.返回事件类型  e.type

4.组织事件冒泡

e.stopPropagation(); // stop 停止  Propagation 传播   （dom 推荐的标准）

e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡

六、事件委托

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

例如：

ul.addEventListener('click', function(e) {

            e.target.style.backgroundColor = 'red';

        })

七、鼠标事件对象

1. client 鼠标在可视区的x和y坐标 e.clientX e.clientY

2.page 鼠标在页面文档的x和y坐标  e.pageX  e.pageY

3.screen 鼠标在电脑屏幕的x和y坐标 e.screenX e.screenY

八、键盘事件

1.keyup 按键弹起的时候触发 不能区分大小写

2.keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头但是能区分大小写

3.keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头 不能区分大小写

三个事件的执行顺序  keydown -- keypress -- keyup

四、e.keyCoode获取相应键的ASCII码值