javascript高级程序设计第十三章事件

最新推荐文章于 2020-10-18 17:48:05 发布

前端炮灰预备员

最新推荐文章于 2020-10-18 17:48:05 发布

阅读量122

点赞数

分类专栏： javascript高级程序设计读书笔记

本文链接：https://blog.csdn.net/qq_41706280/article/details/101718419

版权

javascript高级程序设计读书笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

addEventListener()方法、removeEventListener()方法

JavaScript和HTML之间的交互是通过事件实现的
事件，就是文档或浏览器窗口发生的一些特定的交互瞬间
可以使用侦听器（或处理程序）来处理事件

13.1事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
</body>
</html>

13.1.1 事件冒泡

由内到外，由下到上，由子到父

若点击了文档中的div元素，则这个click事件会如此传播

div–body–html–document

13.1.2 事件捕获

由外到内，由上到下，由父到子

若点击了文档中的div元素，则这个click事件会如此传播

document–html–body–div

由于老版浏览器不支持，所以很少有人使用事件捕获，可放心使用事件冒泡，在有特殊需要时使用事件捕获

13.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
在这里插入图片描述
首先发生事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可在这个阶段为事件做出响应。

即使”DOM2级事件“规范明确要求捕获事件不会涉及事件目标，但是各大浏览器都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。

13.2 事件处理程序

事件就是用户或浏览器自身执行的某种动作。
click、load、mouseover 这些都是事件的名称，而响应某个事件的函数就是事件处理程序（事件侦听器）
事件处理程序的的名字以on开头，例如onclick

13.2.1 HTML事件处理程序（许多人已弃用）

p348-p350

13.2.2 DOM0 级事件处理程序

事件处理程序有两大优势，一是简单，二是具有跨浏览器的优势

<body>
    <button id="myBtn">点击有惊喜</button>
    <script>
    	var btn = document.getElementById("myBtn");
    	btn.onclick = function(){
    		alert("你个SB!!!");
    	};
    </script>
</body>

（注：行内js即js代码在<script>标签内部需要将其放到<body>最后才能起作用）
先在html中找到ID为myBtn的元素，将其赋值给btn，再给btn添加方法，所以就给html的元素添加了事件

使用DOM0级方法指定的事件处理程序被认为是元素的方法，所以this指向的是该元素

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id);    //myBtn
};

也可删除该事件处理程序

btn.onclick = null;

无论是DOM0还是DOM2 级事件处理程序，他们都有一个共同的好处，那就是不会让js代码出现在html中

13.2.3 DOM2 级事件处理程序

addEventListener()方法、removeEventListener()方法用于处理指定和删除事件处理程序的操作

都接受3个参数：要处理的事件名、处理事件的函数、布尔值（true则在捕获阶段调用事件处理程序，false则在冒泡阶段调用事件处理程序）

var btn = document.getElementById("myBtn");
btn.addEventListner("click",function(){
    alert("你个SB!!!");
},false);

DOM2 级事件处理程序的一个好处是可同时添加多个事件处理程序，运行的先后跟代码先后相同

var btn = document.getElementById("myBtn");
btn.addEventListner("click",function(){
    alert("你个SB!!!");
},false);
btn.addEventListner("click",function(){
    alert("this.id");
},false);

虽然removeEventListener()方法能移除addEventListener()方法，但不是全都能移除，它不能移除第二个参数是匿名函数的addEventListener()方法

匿名函数，不能移除

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert("你个SB!!!");
},false);
//无效
btn.removeEventListener("click",function(){  
    alert("你个SB!!!");
},false);

有名函数，可移除

var btn = document.getElementById("myBtn");
function alertText(){
    alert("你个SB!!!");
}
btn.addEventListener("click",alertText,false);
//有效
btn.removeEventListener("click",alertText,false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

13.3 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。
p355-p362

13.4 事件类型

前端炮灰预备员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级程序设计第十三章事件

JavaScript和HTML之间的交互是通过事件实现的事件，就是文档或浏览器窗口发生的一些特定的交互瞬间可以使用侦听器（或处理程序）来处理事件13.1事件流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></titl...
复制链接

扫一扫