目录

注册事件概述

传统的注册事件方式

事件监听的注册事件方式

事件绑定-addEventListener

移除绑定的事件

 DOM事件流（事件处理过程）

DOM事件流分为3个阶段

事件冒泡演示

事件对象

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

阻止事件冒泡

 事件委托

事件委托的原理

 常见的鼠标事件

常见鼠标事件对象属性

 案例：图片跟随鼠标移动案例

常见的键盘事件

案例：判断用户是否按下某按键

注册事件概述

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式。

传统的注册事件方式

1.利用on开头的事件onclick。例如：ele.onclick = function(){}

2.特点：注册事件的唯一性。

3.同一元素只能绑定同一个处理函数一次，后面绑定（注册）的处理函数（事件）会覆盖前面注册的处理函数。

事件监听的注册事件方式

 1.此方式为w3c标准推荐的方式。

2.addEventListener()是一个方法。

3.特点：同一个元素同一个事件可以绑定多个监听器，按照注册顺序依次执行。

唯一性演示

//获取元素
var btn = document.querySelector('button');

//使用传统的方式创建
btn.onclick = function(){
//点击后改变背景颜色
this.style.background = 'lightpink'
}
//同一个元素绑定同一个事件
btn.onclick = function(){
//点击后改变字体颜色
this.style.color = 'red'; 
}

最后发现只触发了最后一个绑定的事件(字体颜色)。

 与事件监听的注册事件方式区别。请看下面演示。

事件绑定-addEventListener

 解决了传统事件注册的唯一性。

事件监听的格式：

元素.addEventListener( ‘事件’，function(可选参数){

        处理事件体

})

//获取元素
var btn = document.querySelector('button');

//使用事件监听的方式绑定事件
btn.addEventListener('click',function(){//注意没有 on
//点击后改变背景颜色
this.style.background = 'lightpink'
})

//同一个元素绑定同一个事件
btn.addEventListener('click',function(){
//点击后改变字体颜色
this.style.color = 'white';
})

最后背景颜色和字体颜色都发生了改变

移除绑定的事件

1.传统的方式移除

元素.事件 = null;

例如：ele.onlick = null;

 2.事件监听的方式移除

元素.removeEventListener(事件,fn);

例如：btn.removeEventListener(‘click’);

移除事件后，对应的事件将不再触发。移除事件要在事件绑定之前。否则事件依然生效依然。

 DOM事件流（事件处理过程）

1.事件流描述的是从页面中接收事件的顺序。

2.事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就叫DOM事件流。

DOM事件流分为3个阶段

1.事件冒泡：事件开始时由最具体的元素(如绑定了事件的div元素)接收，然后逐级向上传播到DOM最顶层节点的过程。 

 2.事件捕获：由DOM最顶层节点开始，然后逐级向下传播到具体的元素接收的过程。

  注意说明：

1.JS代码中只能执行冒泡阶段或捕获阶段其中一个。

2.onclick和attachEvent（绑定事件方式）只能得到冒泡。

3.我们在使用addEventListener的方式绑定事件时添加参数设置冒泡或捕获：

        addEventListener（click,function(){}, false | true ）

        默认为false：事件冒泡阶段处理程序。

        true：事件捕获阶段处理程序。

4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

5.有些事件没有冒泡：onblur,onfocus,onmouseenter,onmouserleave。

事件冒泡演示

<button>点我!</button>
//获取div元素    
var btn = document.querySelector('button');
//获取body元素
var body = document.body
//获取html元素
var html = document.documentElement

btn.addEventListener('click',function(){
    alert('我是div');
}

body.addEventListener('click',function(){
    alert('我是body');
})

html.addEventListener('click',function(){
    alert('我是html');
})

当点击div元素时，先弹出div弹窗，再body弹窗，最后html弹窗。

虽然只是点击了div，但是通过事件冒泡body和html的click事件都触发了。

事件对象

div.addEventListener('click',function(ele){ 
    console.log(ele);
}

如上代码：ele即为事件对象，在事件触发后，跟事件相关的一系列信息数据集合都放在这个对象里面。例如点击了div元素的什么位置等等。

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

阻止事件冒泡

事件冒泡，有利有弊，有时会帮助我们高高效的开发，有时候又会成为累赘，所以我们需要对事件冒泡进行控制。可有可无。

 标准写法：stopPropagation()方法。

低版本使用：cancelBubble属性

演示：

<button>点我!</button>
//获取div元素    

btn.addEventListener('click',function(e){
    alert('我是div');
    //方式1：阻止事件冒泡
    e.stopPropagation();
    //方式2：阻止事件冒泡（非标准）
    e.cancelBubble = true;
}

 事件委托

事件委托称为时间代理，在jQuery里面称为事件委派。

事件委托的原理

在父节点上添加事件监听，当事件触发时，实际上是子节点做出反应。

例如一个ul标签为父节点，ul下面有许多li，当我们想给所有的li都绑定事件的时候，这时候我们就能用事件委托，只需要给ul添加事件监听，事件触发时，实际时li响应。

所以：我们只操作了一次DOM，提高了程序的性能。

事件委托演示

<ul>
<li>我是li'</li>
<li>我是li'</li>
<li>我是li'</li>
<li>我是li'</li>
<li>我是li'</li>
</ul>
<script>
//获取ul
var ul = document.querySelector('ul');
//给ul添加事件监听
ul.addEventListener('click',function(e){
//target:返回点击的对象，此返回li
e.target.style.background = 'lightpink';

})
</script>

效果如下，当点击了li，li虽然未绑定事件，但是ul作为了li的监听委托元素。

 常见的鼠标事件

常见鼠标事件对象属性

 案例：图片跟随鼠标移动案例

需求：当我们鼠标移动时，此图片会跟随着我们鼠标移动。

原理：设置图片为绝对定位，鼠标移动触发事件获取鼠标位置，位置赋予图片。 

JS代码

var pic = document.querySelector('img');
//鼠标移动触发事件
document.addEventListener('mousemove',function(e){
       //获取当前光标位置
       var x = e.pageX;
       var y = e.pageY;
            
       //需要添加单位，不然失效
       //减40的原因：图片宽高为80，为了让光标位于图片中央
       pic.style.left = x - 40 + 'px';
       pic.style.top = y - 40 + 'px';
  });

 html代码

<div>
   <img src="logo1.jpg">
</div>

 css代码

 img{
    position: absolute;
 }

常见的键盘事件

事件不仅是鼠标可以触发，键盘也是可以的。

 三者都存在时，有执行顺序之说。

执行顺序为：onkeydown —>onkeypress—>onkeyup

 键盘事件对象

 说明：

1.onkeydown和onkeyup不区分字母大小写，onkeypress区分大小写。

2.常用的时onkeydown和onkeyup，因为他们能识别所有键（包括功能键）。

3.onkeypress不识别功能键，但是他区分大小写，返回的ASCII值不同，可以用以判断作用。

案例：判断用户是否按下某按键

 需求：在页面中，当用户在键盘上按下字符s，搜索框就会得到光标焦点。

JS代码

<script>
var input = document.querySelector('input');

document.addEventListener('keyup',function(e){
//S对应的ASCII值为83
if (e.keyCode === 83) {//keyup处不区分大小写
input.focus();
}
});

</script>

html代码

 <input type="text"><button>搜索</button>