《JavaScript高级程序设计（第3版）》——事件（十三）

DandJ 发布于2019-08-23 16:51 / 898人阅读

摘要：事件捕获团队提出的，与事件冒泡相反。事件处理程序事件用户或浏览器自身执行的某种动作。事件处理程序响应某个事件的函数。事件委托目的解决事件处理程序过多问题。流程创建事件对象初始化事件对象触发事件

事件是将JavaScript与网页联系在一起的主要方式。

事件流

事件流：从页面中接收到事件的顺序。

事件冒泡

IE的事件流叫做事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体 的节点（文档）。

事件捕获

Netscape Communicator团队提出的，与事件冒泡相反。

用意：在事件到达预定目标之前捕获它。

DOM 事件流

“DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件处理程序

事件：用户或浏览器自身执行的某种动作。如：click、load、mouseover等。

事件处理程序：响应某个事件的函数。

HTML事件处理程序

DOM0 级事件处理程序

添加

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

删除事件处理程序

btn.onclick = null;

DOM2 级事件处理程序

addEventListener(要处理的事件名，作为事件处理程序的函数，布尔值)

removeEventListener(要处理的事件名，作为事件处理程序的函数，布尔值)

布尔值：

true：在捕获阶段调用事件处理程序

false：在冒泡阶段调用事件处理程序

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件处理程序
btn.addEventListener("click", hander, false);
// 删除事件处理程序
btn.removeEventListener("click", hander, false);

主要好处：可以添加多个事件处理程序，按照添加的顺序触发。

IE事件处理程序

attachEvent(事件处理程序名称，事件处理程序函数)

detachEvent(事件处理程序名称，事件处理程序函数)

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件处理程序
btn.attachEventr("onclick", hander);
// 删除事件处理程序
btn.detachEvent("onclick", hander);

主要好处：可以添加多个事件处理程序，按照添加相反的顺序触发。

跨浏览器的事件处理程序

addHander(要操作的元素，事件名称，事件处理程序函数)

removeHander(要操作的元素，事件名称，事件处理程序函数)

事件对象

event事件对象

阻止事件捕获、事件冒泡：

 var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert("Clicked");
            event.stopPropagation();
        };
        
        document.body.onclick = function(event){
            alert("Body clicked");
        };

事件类型

UI事件：不一定与用户操作有关的事件

DOMActive 不建议使用

load

unload

abort

error

resize

scroll

焦点事件

blur 失去焦点时不会冒泡

DOMFocusIn 获得焦点冒泡

DOMFocusOut 失去焦点

focus 获得焦点不会冒泡

focusin

focusout

鼠标与滚轮事件

键盘与文本事件

keydown

keypress

keyup

复合事件

变动事件

HTML5 事件

设备事件

触摸与手势事件

事件性能

事件处理程序是函数。

在JavaScript中，每个函数都是对象，都会占用内存。

内存中的对象越多，性能就越差。

事件委托

目的：解决“事件处理程序过多”问题。

实现：利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

使用事件委托，只需要在 DOM 树中尽量最高的层次上添加一个事件处理程序。

如下例子，由于所有列表项都是这个元素"myLinks"的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。




    Event Delegation Example
    


    
        Go somewhere
        Do something
        Say hi

移除事件处理程序

从文档中移除带有事件处理程序的元素时，最好先手工移除事件处理程序。以免内存中留有“空事件处理程序”。

btn.onclick = null;

在卸载页面之前，先通过 onunload事件处理程序移除所有事件处理程序。以免内存中留有“空事件处理程序”。

模拟事件

在测试Web应用程序中，模拟触发事件是一种极其有用的技术。

流程：

创建事件对象

初始化事件对象

触发事件

GPU云服务器云服务器 javascript高级程序设计第2版 javascript高级程序设计第三版高级javascript程序设计 javascript高级程序设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103407.html

javascript高级程序设计（第3版）之《script元素》

摘要：表示要执行外部文件的路径或链接。由于规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会优先于第二个执行，二这两个脚本会优先于事件执行。无论使用任何方式，只要不存在和属性，浏览器都会按照元素在页面中出现的先后顺序依次解析。元素属性属性定义 async 【可选】。可以异步加载，表示可以立即下载此脚本，但不影响页面其他操作。只对外部脚本有效。 charset ...

miqt 2019-08-22 14:04 评论0 收藏0
机器视觉、模式识别库汇总

摘要：十开放模式识别项目开放模式识别项目，致力于开发出一套包含图像处理计算机视觉自然语言处理模式识别机器学习和相关领域算法的函数库。一、开源生物特征识别库 OpenBROpenBR 是一个用来从照片中识别人脸的工具。还支持推算性别与年龄。使用方法：$ br -algorithm FaceRecognition -compare me.jpg you.jpg二、计算机视觉库 OpenCVOpenC...

habren 2019-04-25 18:17 评论0 收藏0
【转载】十三道JavaScript基础题，你是否都做对了？

摘要：题目二答案会报错未定义这段代码中混合了函数声明和函数表达式的形式，而函数实际上是绑定到了上而不是。除此之外函数声明与函数表达式的语法其实是等价的。因此，在外层函数函数体内的两个函数声明，都会提升到之前执行。这是我在Javascript微信公众号上看到的一篇文章，觉得挺有意思的，所以转载过来跟大家分享一下，同时，对这些题目也加上了一些我个人的理解，如果有不对的地方，请大家指正。题目...

raoyi 2019-08-22 11:04 评论0 收藏0
如何正确学习JavaScript

摘要：然而，虽然先生对无所不知，被誉为世界的爱因斯坦，但他的语言精粹并不适合初学者学习。即便如此，在后面我还是会建议把当做补充的学习资源。但目前为止，依然是学习编程的好帮手。周正则表达式，对象，事件，阅读权威指南第，，，章。既然你找到这篇文章来，说明你是真心想学好JavaScript的。你没有想错，当今如果要开发现代网站或web应用（包括互联网创业），都要学会JavaScript。而面对泛...

canger 2019-08-21 10:23 评论0 收藏0