WebAPI(part12)--事件高级

学习笔记，仅供参考，有错必究

文章目录

事件高级
- 注册事件
- - addEventListener 事件监听方式
  - attachEvent事件监听方式
  - 案例
- 删除事件(解绑事件)
- - 删除事件的方式
  - 案例
- DOM事件流
- 事件对象
- - 案例
  - 事件对象的常见属性和方法
  - target和this的区别
  - 阻止默认行为
  - 阻止冒泡
- 事件委托
- - 事件委托原理
- 常用鼠标事件
- - 禁止选中文字
  - 获得鼠标在页面中的坐标
- 常用键盘事件

事件高级

注册事件

给元素添加事件，称为注册事件或者绑定事件. 注册事件有两种方式：传统方式和方法监听.

addEventListener 事件监听方式

EventTarget.addEventListener(type, listener, useCapture);

该方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时，就会执行事件处理函数.

该方法接受3个参数：

type: 表示监听事件类型的字符串;
listener: 事件处理函数，事件发生时，会调用该监听函数;
useCapture: 布尔值，默认为false

attachEvent事件监听方式

EventTarget.attachEvent(eventNameWithOn, callback);

EventTarget.attachEvent()方法将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行.

该方法接收两个参数：

eventNameWithOn: 事件类型字符串，比如onclick、onmouseover，这里要带on
callback: 事件处理函数，当目标触发事件时回调函数被调用.

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮1</button><button>按钮2</button><script>var btns = document.querySelectorAll("button");// 传统方式注册btns[0].onclick = function() {alert("A 弹出1");}btns[0].onclick = function() {alert("A 弹出2");}// 事件侦听注册事件 addEventListener// 里面的事件类型是字符串必定加引号而且不带on// 同一个元素同一个事件可以添加多个侦听器（事件处理程序）btns[1].addEventListener("click", function() {alert("B 弹出1");})btns[1].addEventListener("click", function() {alert("B 弹出2");})</script>
</body>
</html>

删除事件(解绑事件)

删除事件的方式

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;}
</style></head>
<body><div>1</div><div>2</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert("弹出1");divs[0].onclick = null;}divs[1].addEventListener("click", fn);function fn() {alert("弹出2");divs[1].removeEventListener("click", fn);}</script>
</body>
</html>

DOM事件流

视频地址：DOM事件流代码验证 .

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件：

捕获阶段
当前目标阶段
冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意：

Js代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。

事件对象

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;}</style></head>
<body><div>我是div-A</div><div>我是div-B</div><script>var div = document.querySelectorAll("div");div[0].onclick = function(event) {console.log(event);}div[1].addEventListener("click", function(e) {console.log(e);})//1.event就是一个事件对象写到监听函数的小括号里面当形参来看//2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数//3.事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键//4.这个事件对象我们可以自己命名比如event、evt、e// 5.事件对象也有兼容性问题 ie678通过 window.event</script>
</body>
</html>

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

target和this的区别

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;}</style></head>
<body><div>div</div><ul><li>A1</li><li>A2</li></ul><script>var div = document.querySelector("div");div.addEventListener('click', function(e) {console.log(e.target);console.log(this);})var ul = document.querySelector("ul");ul.addEventListener('click', function(e) {console.log(e.target);console.log(this);})</script></body>
</html>

阻止默认行为

<body><a href="https://www.baidu.com/">百度</a><a href="https://www.csdn.net/">CSDN</a><script>var a = document.querySelectorAll("a");a[0].addEventListener("click", function(e) {e.preventDefault();})a[1].onclick = function(e) {// 我们可以用return false的方法阻止默认事件发生，但是return后的代码不会执行.return false;alert("弹出");}</script></body>

阻止冒泡

视频地址：阻止事件冒泡

部分代码：

事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派.

事件委托原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点.
比如，给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器.

部分代码：

常用鼠标事件

禁止选中文字

视频地址：禁止选中文字

获得鼠标在页面中的坐标

视频地址：获得鼠标在页面中的坐标

常用键盘事件