pingan8787
pingan8787

【重温基础】20.事件

本文是 重温基础 系列文章的第二十篇。

这是第三个基础系列的第一篇，欢迎持续关注呀！
重温基础 系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。

今日感受：电影有时候看的是缘分。

系列目录：

  • 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
  • 【重温基础】1-14篇
  • 【重温基础】15.JS对象介绍
  • 【重温基础】16.JSON对象介绍
  • 【重温基础】18.相等性判断
  • 【重温基础】19.闭包

本章节复习的是JS中的事件，事件冒泡捕获代理模拟等等。

前置知识：
JavaScript与HTML的交互式通过事件来实现的，是文档或浏览器窗口中发生的一些特定的交互瞬间。

1.事件流

事件流描述的是从页面中接收事件的顺序，通常有这样两种完全相反的事件流概念：事件冒泡流（IE团队提出）和事件捕获流（网景团队提出）。

1.1 事件冒泡

冒泡事件（Event Bubbling）：事件开始时由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐层向上传播到较为不具体的节点（文档），看下示例代码：


<html>
<head>
    <title>leo 事件冒泡title>
head>
<body>
    <div id="leo">点击div>
body>
html>

点击页面中

元素，这个click事件就会按照下面顺序传播：

  4. document

由此可见，元素绑定的事件会通过DOM树向上传播，每层节点都会发生，直到document对象，如图展示了冒泡过程：

1.2 事件捕获

事件捕获（Event Capturing）：让不太具体的节点更早接收事件，而最具体的节点最后接收事件，即在事件到达预定目标之前捕获到，看下示例代码（HTML代码和前面一样），事件捕获的过程是这样的：

  1. document

看得出，document对象最新接收事件，然后沿DOM树依次向下，直到最后的实际目标

元素，如图展示了捕获过程：

注意：由于老版本的浏览器不支持，因此很少人使用事件捕获，不过如果特殊需求还是可以使用事件捕获，建议还是使用事件冒泡。

1.3 DOM事件流

“DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。按照前面的HTML代码，整个流程是这样的：

在DOM事件流中，实际目标（

元素）在捕获阶段不接收事件，即在捕获阶段，事件从document对象到再到后就停止，进入“处于目标”阶段，事件在
元素上发生，然后才进入冒泡阶段，将事件传回给文档。

注意：目前主流浏览器都支持DOM事件流，只有IE8和之前版本不支持。

2.事件处理

事件处理，即响应某个事件。我们把事件处理的函数，称为“事件处理程序”。
事件处理程序的名称一般都以on开头，如click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。
我们将事件处理程序，分为这么几类：

  • HTML事件处理程序
  • DOM0级事件处理程序
  • DOM2级事件处理程序
  • IE事件处理程序
  • 跨浏览器事件处理程序

2.1 HTML事件处理程序

某个元素支持的事件，都可以用一个与相应事件处理程序同名的HTML特性来指定，这个特性的值应该是能够执行的JavaScript代码。比如：

<input type="button" value="点击" onclick="alert('hello leo');">

也可以把需要执行的具体事件单独定义出来，可以放置与单独.js文件，也可以在文档内用

你可能感兴趣的:(3-JavaScript,Cute-JavaScript)

  • 3-javascript 构造函数 少年啊兵
    js中面向对象编程是基于构造函数(consstructor)和原型链(prototype)的。构造函数作为对象的模板。所谓构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。为了与普通函数区别，构造函数名字的第一个字母通常大写。函数体内使用this关键字，代表所要生成的对象实例。生成对象时，必须使用new命令来调用构造函数。ob
  • 《JavaScript 正则表达式迷你书》知识点小抄本 weixin_33991727
    介绍这周开始学习老姚大佬的《JavaScript正则表达式迷你书》，然后习惯性的看完一遍后，整理一下知识点，便于以后自己重新复习。我个人觉得：自己整理下来的资料，对于知识重现，效果不错。感谢原书作者老姚，本文无意抄袭，只是作为自己知识点的整理，后续也会整理到自己的JavaScript知识库——《Cute-JavaScript》网站中。另外，请读者们注意，这篇文章是知识点的整理，方便复习，所以不会介
  • 重温基础：ES6系列（三） 青天诀
    ES6系列目录1let和const命令2变量的解构赋值3字符串的拓展4正则的拓展5数值的拓展6函数的拓展7数组的拓展8对象的拓展9Symbol10Set和Map数据结构11Proxy12Promise对象13Iterator和for...of循环14Generator函数和应用15Class语法和继承16Module语法和加载实现所有整理的文章都收录到我《Cute-JavaScript》系列文章中
  • 【JS】395-重温基础：事件 王平安
    本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】(http://js.pingan8787.com)的JavaScript基础系列中。本章节复习的是JS中的事件，事件冒泡捕获代理模拟等等。前置知识：事件来实现的，是文档或浏览器窗口中发生的一些特定的交互瞬间。1.事件流事件流描述
  • 《JavaScript 正则表达式迷你书》知识点小抄本 pingan8787 正则表达式javascript
    介绍这周开始学习老姚大佬的《JavaScript正则表达式迷你书》，然后习惯性的看完一遍后，整理一下知识点，便于以后自己重新复习。我个人觉得：自己整理下来的资料，对于知识重现，效果不错。感谢原书作者老姚，本文无意抄袭，只是作为自己知识点的整理，后续也会整理到自己的JavaScript知识库——《Cute-JavaScript》网站中。另外，请读者们注意，这篇文章是知识点的整理，方便复习，所以不会介
  • 【重温基础】21.高阶函数 pingan8787
    本文是重温基础系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础（初级/中级/高级）】以及后面会添加的【JS面试题】三个系列。欢迎您的支持！系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON
  • 【重温基础】21.高阶函数 pingan8787 3-JavaScriptCute-JavaScript
    本文是重温基础系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础（初级/中级/高级）】以及后面会添加的【JS面试题】三个系列。欢迎您的支持！系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON
  • 【重温基础】20.事件 pingan8787 3-JavaScriptCute-JavaScript
    本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。今日感受：电影有时候看的是缘分。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温
  • 【重温基础】14.元编程 pingan8787 3-JavaScriptCute-JavaScript
    本文是重温基础系列文章的第十四篇。这是第一个基础系列的最后一篇，后面会开始复习一些中级的知识了，欢迎持续关注呀！接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。今日感受：独乐乐不如众乐乐。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1.语法和数据类型【重温基础】2.流程控制和错误处理【重温基础】3.循环和迭代【重温基
  • 3-JavaScript设计模式——commonUtils工具库之接口类 Jagger17 JavaScript设计模式
    在学习JavaScript设计模式之前，我们先做一个commonUtils工具库，以便于后期的学习和使用。commonUtils工具库包括：多维数组遍历，继承函数，接口类及其验证。本章为接口类建立接口的方式：1、注解描述法：优点使用简单，程序员可以有一个参考；缺点：它只是一个注释，属于文档的范畴，是功能最弱的一种方式。2、属性检测法：优点比注解描述法功能强大；缺点不能检测接口中的方法。3、鸭式辩型
  • Maven Array_06 eclipsejdkmaven
    Maven Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。 Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司
  • ibatis的queyrForList和queryForMap区别 bijian1013 javaibatis
    一.说明         iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之：         1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类
  • LeetCode[位运算] - #191 计算汉明权重 Cwind java位运算LeetCodeAlgorithm题解
    原题链接：#191 Number of 1 Bits 要求： 写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。 汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。 难度：简单 分析： 将十进制参数转换为二进制，然后计算其中1的个数即可。 “
  • 浅谈java类与对象 15700786134 java
          java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维
  • linux下双网卡同一个IP 被触发 linux
    转自： http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少： 一、 关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
  • 安卓按主页键隐藏程序之后无法再次打开 肆无忌惮_ 安卓
    遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity   本来代码：   // 销毁这个Activity fin
  • 通过cookie保存并读取用户登录信息实例 知了ing JavaScripthtml
    通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。 下面通过cookie保存并读取用户登录信息的例子加深一下理解。 （1）创建index.jsp文件。在改
  • JAVA 对象池 矮蛋蛋 javaObjectPool
    原文地址： http://www.blogjava.net/baoyaer/articles/218460.html Jakarta对象池       ☆为什么使用对象池   恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
  • ArrayList根据条件+for循环批量删除的方法 alleni123 java
    场景如下： ArrayList<Obj> list Obj-> createTime, sid. 现在要根据obj的createTime来进行定期清理。（释放内存） ------------------------- 首先想到的方法就是 for(Obj o:list){ if(o.createTime-currentT>xxx){
  • 阿里巴巴“耕地宝”大战各种宝 百合不是茶 平台战略
    “耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护
  • Spring注入有继承关系的类（1） bijian1013 javaspring
    一个类一个类的注入 1.AClass类 package com.bijian.spring.test2; public class AClass { String a; String b; public String getA() { return a; } public void setA(Strin
  • 30岁转型期你能否成为成功人士 bijian1013 成功
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • [Velocity三]基于Servlet+Velocity的web应用 bit1129 velocity
    什么是VelocityViewServlet 使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用   Servlet + Velocity的一般步骤 1.自定义Servlet，实现VelocityViewServl
  • 【Kafka十二】关于Kafka是一个Commit Log Service bit1129 service
    Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？   A message is considered "committed" when all in sync replicas for that partition have applied i
  • NGINX + LUA实现复杂的控制 ronin47 lua nginx 控制
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字 bylijinnan java
    public class TwoElementEqualSum { /** * 第 14 题： 题目：输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字。 要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。 例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于
  • Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder bylijinnan javanetty
    今天看Netty如何实现一个Http Server org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： pipeline.addLast("decoder", new HttpRequestDecoder()); pipeline.addLast(&quo
  • java敏感词过虑-基于多叉树原理 cngolon 违禁词过虑替换违禁词敏感词过虑多叉树
    基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。   2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 utf-8的words.dict文本文件，
  • 多线程知识 cuishikuan 多线程
    T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 public class T1 implements Runnable{           @Override      
  • spring整合activemq dalan_123 java spring jms
    整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分：     a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接      b、真正产生到JMS服务器链接的ConnectionFactory还得
  • MySQL时间字段究竟使用INT还是DateTime？ dcj3sjt126com mysql
      环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 第一步、创建一个表date_test（非定长、int时间） CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
  • Parcel: unable to marshal value dcj3sjt126com marshal
    在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。   在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）：   Intent intent = new Intent(this, Next
  • linux进程的查看上（ps） eksliang linux pslinux ps -llinux ps aux
    ps:将某个时间点的进程运行情况选取下来 转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 http://eksliang.iteye.com         ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个
  • 为什么第三方应用能早于System的app启动 gqdy365 System
    Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot
  • App Framework发送JSONP请求(3) hw1287789687 jsonp跨域请求发送jsonpajax请求越狱请求
    App Framework 中如何发送JSONP请求呢? 使用jsonp,详情请参考:http://json-p.org/ 如何发送Ajax请求呢? (1)登录 /*** * 会员登录 * @param username * @param password */ var user_login=function(username,password){ // aler
  • 发福利，整理了一份关于“资源汇总”的汇总 justjavac 资源
    觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用 free-programming-books-zh_CN 免费的计算机编程类中文书籍 精彩博客集合 hacke2/hacke2.github.io#2 ResumeSample 程序员简历
  • 用 Java 技术创建 RESTful Web 服务 macroli java编程WebREST
    转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/   JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
  • CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项 超声波 oraclelinux
    前言： 这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。   安装过程中可能遇到的问题（注
  • HttpClient 4.3 设置keeplive 和 timeout 的方法 supben httpclient
    ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() { @Override public long getKeepAliveDuration(HttpResponse response, HttpContext context) { long keepAlive
  • Spring 4.2新特性-@Import注解的升级 wiselyman spring 4
    3.1 @Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 3.2 示例 演示java类 package com.wisely.spring4_2.imp; public class DemoService { public void doSomethin