JS-DOM 事件高级篇

目录

注册事件概述

传统的注册事件方式

事件监听的注册事件方式

事件绑定-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元素的什么位置等等。

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

事件对象属性方法	说明
e.target	返回触发事件的对象
e.srcElement	返回触发事件的对象
e.type	返回事件的类型，如click
e.cancelBubble	该属性阻止事件冒泡
e.returnValue	该属性阻止默认事件（默认行为 如：点击文本框出现光标）
e.preventDefault()	该属性阻止默认事件
e.stopPropagation()	阻止冒泡

阻止事件冒泡

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

 标准写法：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的监听委托元素。

 

 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

常见鼠标事件对象属性

事件对象属性	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于整个文档页面的X坐标
e.pageY	返回鼠标相对于整个文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

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

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

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

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;
 }

常见的键盘事件

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

键盘事件	触发条件
onkeyup	某个键盘按键松开时触发
onkeydown	某个键盘按键按下时触发
onkeypress	某个键盘按键按下时触发（不识别功能键，如ctrl等）

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

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

 键盘事件对象

事件属性	说明
keyCode	返回该键的ASCII值

 说明：

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>