JavaScript MVC 学习笔记（五）事件的基本操作

Julylovin 发布于2019-08-21 10:26 / 1982人阅读

摘要：事件是应用程序的核心，是所有内容的驱动。将对这两种事件模型的支持都加入标准规范之中。根据型，事件首先被目标元素所捕捉，然后向上冒泡。取消事件冒泡当事件冒泡时，可以通过数来终止冒泡，这个函数是对象中的方法。

事件是 JavaScript 应用程序的核心，是所有内容的驱动。尽管后来W3C 对此做了标准化，但 IE 仍然坚持使用与 W3C 不兼容的事件模型，直到 IE9 才遵循标准。有很多诸如 jQuery 和 Prototye 的类库很好地处理了兼容性问题，对外提供了统一的 API 来实现事件。

监听事件

绑定事件监听的函数是addEventListener()，有 3 个参数：type（比如click），listener（比如callback）及seCapture。使用前两个参数可以给一个 DOM 元素绑定一个函数，当特定的事件（比如点击）被触发时执行这个函数：

var button = document.getElementById("createButton");
button.addEventListener("click", function(){ /* ... */ }, false);

可以使用removeEventListener() 来移除事件监听，参数和传入addEventListener() 的一样。如果监听的函数是匿名函数，没有任何引用指向它，在不销毁这个元素的前提下，这个监听是无法被移除的：

var div = document.getElementById("div");
var listener = function(event) { /* ... */ };
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);

带入listener函数的第 1 个参数是event对象，通过event象可以得到事件的相关信息，比如时间戳、坐标和事件宿主元素（target）。它同样包含很多方法来停止事件冒泡和阻止事件的默认行为。

不同的浏览器对事件类型的支持有些差异，但所有现代浏览器都支持这些事件：

click

dblclick

mousemove

mouseover

mouseout

focus

blur

change （表单输入框特有）

submit （表单特有）

事件顺序

如果一个节点和它的一个父节点都绑定了相同事件类型的回调，当事件触发时哪个回调会先执行？

浏览器不同有不同的默认执行顺序，分为两种：

事件捕捉（capturing），从顶层的父节点开始触发事件，从外到内传播。

事件冒泡（bubbling），从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。

W3C将对这两种事件模型的支持都加入标准规范之中。根据W3C型，事件首先被目标元素所捕捉，然后向上冒泡。

可以自行选择要注册的事件处理程序的调用类型，捕捉或冒泡，通过给addEventListener()传入第3个参数useCapture 来设置。如果addEventListener() 的最后一个参数是true，事件处理程序以捕捉模式触发；如果是false，事件处理程序以冒泡模式触发：

// 给最后一个参数传入false，来设置事件冒泡
button.addEventListener("click", function(){ /* ... */ }, false);

大多数情况下是使用冒泡模式，如果对此不太确定，可以给addEventListener()`的最后一个参数传入false。

取消事件冒泡

当事件冒泡时，可以通过stopPropagation()数来终止冒泡，这个函数是event对象中的方法。比如这段代码，任何父节点的事件回调都不会触发：

button.addEventListener("click", function(e){
    e.stopPropagation();
    /* ... */
}, false);

jQuery 还支持stopImmediatePropagation()函数，用来阻止后续所有的事件触发——哪怕这些事件是注册在同一个节点元素上的。

阻止浏览器的默认行为

浏览器给事件赋予了默认行为。比如，点击一个链接时，浏览器的默认行为是载入新页面，当点击一个复选框时，浏览器会将其选中（或取消选中）。在事件传播阶段（之后）会触发这些默认行为，在任何一个事件处理程序中都可以阻止默认行为。可以通过调用event对象的preventDefault()函数来阻止默认行为，也可以通过在回调中返回false来实现同样的效果：

bform.addEventListener("submit", function(e){
    /* ... */
    return confirm("Are you super sure?");
}, false);

如果调用confirm()返回false（用户点击了对话框的取消按钮），这个事件回调函数就返回false，这样就会取消事件，阻止表单的提交。

（公开记录学习JS MVC，不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。）

GPU云服务器云服务器 javascript学习笔记 vue3 学习笔记 (五)——vue3 javascript的事件 javascript的基本组成

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

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

JavaScript MVC 学习笔记（五）事件操作的拓展

摘要：事件类型布尔值，表示事件是否通过以冒泡形式触发。表示键盘事件的属性布尔值，表示当前按下的键是否表示一个字符。表示当前按键的值仅对事件有效。，事件发生时相对于屏幕的坐标。事件对象 event 对象还包含很多有用的属性。W3C 范中包含的大部分属性都列在下面，更多信息参照完整的标准规范。事件类型： bubbles ：布尔值，表示事件是否通过DOM 以冒泡形式触发。事件发生时...

Anshiii 2019-08-22 10:56 评论0 收藏0
JavaScript MVC 学习笔记（一）初识JS MVC

摘要：以基于的富应用开发为主要学习资料。下面用实现一个例子使用匿名函数来封装一个作用域在页面加载时绑定事件监听上面的代码创建了控制器，这个控制器是放在变量下的命名空间。然后用了一个匿名函数封装了一个作用域，以避免对全局作用域造成污染。公开记录学习JS MVC，不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。什么是MVC MVC 是一种设...

xorpay 2019-08-22 10:55 评论0 收藏0
Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
JavaScript MVC 学习笔记（三）类的使用（中）

摘要：实际上，可以将其理解为某种形式的继承。如果上下文是，则使用全局对象代替。例如的第个参数是上下文，后续是实际传入的参数序列中允许更换上下文是为了共享状态，尤其是在事件回调中。公开记录学习JS MVC，不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。接上一篇类的学习，发现实在是看晕了，有些例子是能看懂在干嘛，但是不知道为什么这样做，有的甚至...

DandJ 2019-08-22 10:56 评论0 收藏0
JavaScript MVC 学习笔记（四）类的使用(下)

摘要：基于函数进行调用的，用来确保函数是在指定的值所在的上下文中调用的。添加私有函数目前上面为类库添加的属性都是公开的，可以被随时修改。以基于的富应用开发为主要学习资料。控制类库的作用域在类和实例中都添加proxy函数，可以在事件处理程序之外处理函数的时候保持类的作用域。下面是不用proxy的办法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 评论0 收藏0