1.  事件周期
  2.  DOM：3个阶段
  3.  1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件
  4.  2.目标触发:优先触发目标元素绑定的事件处理函数
  5.        目标元素:实际点击的元素
  6.  3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数
  7.  修改事件触发的顺序:
  8.  btn.addEventListener("事件名称",函数对象,capture)
  9.  其中:capture表示是否在捕获阶段就提前触发
  10.       默认false,只在冒泡阶段才触发
  11.       改为true,在捕获阶段提前触发
  12.  
  13.  阻止冒泡必须要用到的事件对象:event
  14.      事件发生时,自动创建的,封装事件信息的对象
  15.      还提供了对事件进行操作的API
  16.  如何获得event对象:
  17.      按照DOM对象:事件发生时会自动创建event对象
  18.      会将event对象作为事件处理函数的第一个参数自动传入
  19.  阻止冒泡:e.stopPropagation();
  20.  e.target//获得目标元素
  21.  e.preventDefault()//阻止默认行为
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>事件处理</title>
  5.         <meta charset="utf-8"/>
  6.         <style>
  7.             .d1 .d2 .d3{cursor:pointer}
  8.             .d1 {
  9.                 background-color: green;
  10.                 position: relative;
  11.                 width: 150px;
  12.                 height: 150px;
  13.                 text-align: center;
  14.                 cursor: pointer;
  15.             }
  16.             .d2 {
  17.                 background-color: blue;
  18.                 position: absolute;
  19.                 top: 25px;
  20.                 left: 25px;
  21.                 width: 100px;
  22.                 height: 100px;
  23.             }
  24.             .d3 {
  25.                 background-color: red;
  26.                 position: absolute;
  27.                 top: 25px;
  28.                 left: 25px;
  29.                 width: 50px;
  30.                 height: 50px;
  31.                 line-height: 50px;
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <div  id="d1" class="d1">
  37.             <div id="d2" class="d2" >
  38.                 <div id="d3" class="d3" >
  39.                 </div>
  40.             </div>
  41.         </div>
  42.         <script>
  43.             //定义函数highLight
  44.             function hL(e){
  45.                 //设置当前div的背景颜色为黄色
  46.                 this.style.background="yellow";
  47.                 //弹出提示:我是id
  48.                 alert("我是 "+this.id);
  49.                 //清除当前div的背景颜色
  50.                 this.style.background="";
  51.                 //阻止冒泡
  52.                 e.stopPropagation();
  53.             };
  54.             d1.addEventListener("click",hL);
  55.             //为id为d1的元素的添加事件监听:事件名为click，事件处理函数为highLight
  56.             d2.addEventListener("click",hL);
  57.             //为id为d2的元素的添加事件监听:事件名为click，事件处理函数为highLight
  58.             d3.addEventListener("click",hL);
  59.             //为id为d3的元素的添加事件监听:事件名为click，事件处理函数为highLight
  60.         </script>
  61.     </body>
  62. </html>

JavaScript-事件周期-点击替换颜色的更多相关文章

  1. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  2. 深入理解JavaScript 事件

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

  3. JavaScript 事件总结

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

  4. JavaScript 事件循环

    JavaScript 事件循环 事件循环 任务队列 async/await 又是如何处理的呢 ? 定时器问题 阻塞还是非阻塞 实际应用案例 拆分 CPU 过载任务 进度指示 在事件之后做一些事情 事件 ...

  5. JavaScript事件代理和委托（Delegation）

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  6. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  7. JavaScript 事件

    事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...

  8. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  9. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

随机推荐

  1. bool 类型存在数据库中为 0 和 1

    bool 类型存在数据库中为 0 和 1 但是在程序中应该使用  true 和 false 查询. 例如: bIsStart = 0 在数据中bIsStart为 0 sql 查询的时候,使用:sele ...

  2. I2C总线和S5PV210的I2C总线控制器

    一.什么是I2C通信协议? 1.物理接口:SCL + SDA (1)SCL(serial clock):时钟线,传输CLK信号,一般是I2C主设备向从设备提供时钟的通道. (2)SDA(serial ...

  3. linux开机随笔

    (1),linux开机流程: 固件是在软件与硬件之间的那部分,他们既不叫做硬件也不叫做软件, 开机自检  ,就是  在你按下开机键时,电脑就会自动检查你的硬盘  内存 cpu等器件, 那个CMOS是固 ...

  4. 关于sizeof 跟strlen 的区别

    char *t = "我a"; char t1[MAX_PATH] = "aaaaaa"; char display1[MAX_PATH]; char disp ...

  5. SwipeRefreshLayout嵌套ScrollView包裹复杂头布局和RecyclerView

    布局如下:上面是一个描述有:头像和部分信息的布局,底部是一个RecyclerView: 想法:想实现RecyclerView向上滚动的时候,隐藏上面的头像布局信息:使用了 CoordinatorLay ...

  6. Android根据文件路径使用File类获取文件相关信息

    Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等: 如图: 代码: public class MainActivity extends ...

  7. win10家庭版快速升级专业版

    win10家庭普通版升级专业版方法: 1.点击“开始”,选择控制面板. 2.点击“系统与安全”,选择“Windows Anytime Upgrade”.(或者:单击「开始」按钮,在搜索框中,键入any ...

  8. @EnableAutoConfiguration

    1. spring文档 解释一: Enable auto-configuration of the Spring Application Context, attempting to guess an ...

  9. easyui 中datagrid 点击行的事件

    $('#datagrid 的ID').datagrid({                onClickRow:function(index,data)                {        ...

  10. 阅读笔记Multi-task Learning for Stock Selection [NIPS1996]

    Multi-task Learning for Stock Selection  Joumana Ghosn and Yoshua Bengio 摘要 用人工神经网络预测未来回报以便于做出对应的金融决 ...