js事件对象

事件对象

1. 事件对象的定义与理解

事件对象的官方定义：event事件对象代表事件的状态，比如按键的状态，鼠标的位置等等。

理解：当DOM树中某一个元素事件被触发的时候，会同时自动产生一个用来描述事件的所有相关信息的对象，这就是event（事件对象）。

2. 事件对象的使用语法

2.1 可以直接通过event来获取

2.2 可以通过函数传参数的方式获取： eventTarget.onclick = function(e) {…}

3. 事件对象常见的属性和方法

[事件对象常见的方法和属性](/img/event.jpg)

4. 阻止事件冒泡

利用事件对象中的stopPropagation（）方法！！

var son = document.querySelector(‘.son’);

son.addEventListener(‘click’, function(e) {

​ alert(‘son’);

​ e.stopPropagation();//阻止事件冒泡，这样就不会弹出下面的father！！！

})

var father = document.querySelector(‘.father’);

father.addEventListener(‘click’, function() {

​ alert(‘father’)})

5. 事件委托（委派、代理）

问题引出：如果想给ul的每个小li都注册事件，访问DOM次数过多会演唱整个页面的交互就绪时间。

事件委托原理：不是给每个子节点单独设置事件监听器，而是设置在父节点上，利用冒泡影响每个子节点。

var ul = document.querySelector(‘ul’); //只需要获取一次

ul.addEventListener(‘click’, function(e) {

​ alert(‘hhhhh’)})

6. 常见的鼠标事件以及事件对象

常见的鼠标事件

常见的鼠标事件对象

7. 常见的键盘事件以及事件对象

常见的键盘事件

常见的键盘事件对象