JavaScript 事件

事件

注册事件（绑定事件）

注册事件概述

给元素添加事件

注册事件方式

传统方式和方法监听注册方式

传统注册事件

1、利用on开头的事件

特点：注册事件的唯一性

​ 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数。

方法监听注册方式

1、W3C标准 推荐方式

2、addEventListener（）它是一个方法 ie9以前不支持

3、attachEvent()//ie9以前的方法

4、同一个元素同一个事件可以注册多个监听器 按注册顺序依次执行

addEventListener事件监听方式

eventTarget.addEventListener（type，listener，[ useCapture]）

将指定的监听器注册到目标对象上，当该对象触发指定的事件时，就会执行事件处理函数。

1、type：事件类型字符串，例如click，mouse //一点更要加引号

2、listener：事件处理函数，事件发生时，会调用该监听函数

3、useCapture：可选参数，是一个布尔值，默认时false

attachEvent事件监听方式

这里的事件类型字符串要的带on

删除事件（解绑事件）

删除时间的方式

传统注册方式删除

element.οnclick=null;

事件监听方法注册删除

element.removeEventListener(参数和注册时一样)//如果里面的处理函数式在外面定义好的，但是在里面调用不需要加小括号

element.detachEvent（）；

DOM事件流

事件传播过程：DOM事件流

3个阶段：捕获阶段（此外往里） 当前目标阶段 冒泡阶段（从里往外）

** js代码中只能执行捕获或者冒泡其中一个阶段

​ onclick和attachEvent只能到冒泡阶段

​ addEventListener（）第三个参数是true则为捕获阶段 是false或者省略则为冒泡

​ 实际开发中很少使用捕获，更多关注事件冒泡

​ 有些事件是没有冒泡的 onblur onfocus onmouseenter onmouseleave

事件对象

1、写在侦听函数的小括号里，当作形参来看

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

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

4、可以自己命名、事件对象也有兼容性问题 兼容性写法 e=e||window.event；

事件对象常见属性和方法

this返回的是绑定