JavaScript MVC 进修笔记（五）事宜的基础操纵

2024年2月18日 172次阅读 来源: JingDing

事宜是 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富运用开辟》为重要进修材料。）

    原文作者：JingDing
    原文地址: https://segmentfault.com/a/1190000002546990
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞