javascript --- js中的事件

事件实现松耦合:

// JS和HTML之间的交互是通过事件实现的.
// 事件,就是文档或浏览器窗口中发生一些特定的交互瞬间.
// 可以使用侦听器来预定事件,以便事件发生时执行相应的代码.
// 这种在传统软件工程中被称为观察员模式的模型,支持页面的行为与页面的外观之间的松耦合

事件流:

// 多个浏览器开发团队在看待浏览器事件上都保持同一个理念
// 当你点击了某个按钮,他们都认为单击事件不仅仅发生在按钮上
// 换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面.
// 这样会产生多个事件,按从页面中接收事件的顺序,产生了事件流的概念.
// 一个有趣的现象是,IE和Netscape2个开发团队提出了完全相反的事件流的概念:事件冒泡和事件捕获

事件冒泡:

// IE开发团队定义的事件流,称为事件冒泡,即:
// 事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.
<!DOCTYPE html>
<html><head><title>Event Bubbling Example</title></head><body><div id="myDiv">Click Me</div></body>
</html>// 以上DOM结构中,倘若你点击了div元素,事件会按如下顺序,依次执行:
// (1)div > (2)body > (3) html > (4)document
// 就像一个泡泡逐渐浮起来...

事件捕获:

// 与IE团队提出来的事件冒泡相反,Netscape Communicator团队提出了另外一种事件流叫事件捕获

DOM事件流:

// "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段

// 首先发生的是事件捕获,为捕获事件提供了机会.(document > Html > body)
// 然后是实际的目标接收到事件.(div)
// 最后是事件的冒泡.(body > html > document)
// 多数支持DOM事件的浏览器都实现了一种特定行为(如:IE9、Safari、Chrome、Firefox和Opera9.5及更高版本)
// 它们会在捕获阶段触发事件对象上的事件("DOM2级事件"规范明确要求捕获阶段不会涉及事件目标).
// 造成的结果是,有2个机会在目标对象上操作事件

事件处理程序:

// 事件:就是用户或浏览器自身执行的某种动作.诸如:click、load和mouseover都是事件的名字.
// 事件处理程序:响应事件的函数

HTML事件处理程序:

// 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.
// 例如:要在按钮被单击时执行一些JavaScript
<input type="button" value="Click Me" onclick="alert('Clicked')" />// 在HTML中定义的事件处理程序既可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本,
<script>function showMessaget(){alert('Hello Wordl!');}<input type='button' value="Click Me" onclick="showMessage()" />
</script>
// 在上面例子中,单击按钮就会调用showMessage()函数.这个函数是在一个独立的<script>元素中定义的,当然也可以是一个外部文件.
// 事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码.
// 值得一提的是,在使用以上方法定义事件处理程序的同时,会有一个event的局部变量.使用如下将其打印出来:
<script>function showEvent(msg){console.log(msg);}
</script><input type="button" value="Click Me" onclick="showEvent(event)" />

// 还可以注意到上面input中有个value="Click Me". 可以通过this.value访问到.
<input type="button" value="Click Me" onclick="console.log(this.value)" />

参考《JavaScript高级程序设计》(第3版)P346~P349

javascript --- js中的事件相关推荐

JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
JS中的事件基础知识
本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
如何正确使用Node.js中的事件
by Usama Ashraf 通过Usama Ashraf 如何正确使用Node.js中的事件 (How to use events in Node.js the right way) Before ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
js中获取事件对象的方法小结
代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在htm ...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
js中的事件循环和宏任务和微任务的理解
参考许多大神的文章,写下自己的理解事件循环: 说到事件循环就得谈到js中同步和异步的执行顺序 1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册. ...

javascript --- js中的事件

javascript --- js中的事件相关推荐

最新文章

热门文章