事件周期

 DOM：3个阶段

 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件

 2.目标触发:优先触发目标元素绑定的事件处理函数

       目标元素:实际点击的元素

 3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数

 修改事件触发的顺序:

 btn.addEventListener("事件名称",函数对象,capture)

 其中:capture表示是否在捕获阶段就提前触发

      默认false,只在冒泡阶段才触发

      改为true,在捕获阶段提前触发

 阻止冒泡必须要用到的事件对象:event

     事件发生时,自动创建的,封装事件信息的对象

     还提供了对事件进行操作的API

 如何获得event对象:

     按照DOM对象:事件发生时会自动创建event对象

     会将event对象作为事件处理函数的第一个参数自动传入

 阻止冒泡:e.stopPropagation();

 e.target//获得目标元素

 e.preventDefault()//阻止默认行为
<!DOCTYPE HTML>

<html>

    <head>

        <title>事件处理</title>

        <meta charset="utf-8"/>

        <style>

            .d1 .d2 .d3{cursor:pointer}

            .d1 {

                background-color: green;

                position: relative;

                width: 150px;

                height: 150px;

                text-align: center;

                cursor: pointer;

            }

            .d2 {

                background-color: blue;

                position: absolute;

                top: 25px;

                left: 25px;

                width: 100px;

                height: 100px;

            }

            .d3 {

                background-color: red;

                position: absolute;

                top: 25px;

                left: 25px;

                width: 50px;

                height: 50px;

                line-height: 50px;

            }

        </style>

    </head>

    <body>

        <div  id="d1" class="d1">

            <div id="d2" class="d2" >

                <div id="d3" class="d3" >

                </div>

            </div>

        </div>

        <script>

            //定义函数highLight

            function hL(e){

                //设置当前div的背景颜色为黄色

                this.style.background="yellow";

                //弹出提示:我是id

                alert("我是 "+this.id);

                //清除当前div的背景颜色

                this.style.background="";

                //阻止冒泡

                e.stopPropagation();

            };

            d1.addEventListener("click",hL);

            //为id为d1的元素的添加事件监听:事件名为click，事件处理函数为highLight

            d2.addEventListener("click",hL);

            //为id为d2的元素的添加事件监听:事件名为click，事件处理函数为highLight

            d3.addEventListener("click",hL);

            //为id为d3的元素的添加事件监听:事件名为click，事件处理函数为highLight

        </script>

    </body>

</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. APS.net controller

    在controller 路由配置为: routes.MapRoute( name:"Default", url:"{controller}/{action}/{id}&q ...

  2. cf732f

    思路:先缩点,再以最大连同分量为根dfs,代码太垃圾不想贴

  3. swt controls里的控件list

    swt controls里的控件list,怎么显示滚动条,并且滚动条自动移动到最下边时,显示最新内容 package com.jokul; import org.eclipse.swt.widgets ...

  4. REORG TABLE命令优化数据库性能

    [转]DB2日常维护——REORG TABLE命令优化数据库性能     一个完整的日常维护规范可以帮助 DBA 理顺每天需要的操作,以便更好的监控和维护数据库,保证数据库的正常.安全.高效运行,防止 ...

  5. http之100-continue(转)

    1.http 100-continue用于客户端在发送POST数据给服务器前,征询服务器情况,看服务器是否处理POST的数据,如果不处理,客户端则不上传POST数据,如果处理,则POST上传数据.在现 ...

  6. HTML页面弹出自定义对话框带遮蔽罩（使用JavaScript）

    转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html 原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设 ...

  7. UDP异步通信

    先看效果图 Server: using System; using System.Collections.Generic; using System.Text; using System.Net; u ...

  8. 大话JSON之Gson解析JSON

    (三)解析Json数组(多条Json数据) 比如有如下Json数据: [{'name':'John', 'grade':[{'course':'English','score':100},{'cour ...

  9. 03 Apache Solr: 安装和运行

         前面介绍了Solr在项目中的使用和构建高度可用.高度可扩展的Solr服务器的一些想法.但是光说不练假把式,现在开始,把Solr运行起来继续深入了解吧! 安装 安装JAVA Apache So ...

  10. centos 常见软件安装

    centos虚拟机扩展硬盘空间 http://www.cnblogs.com/sixiweb/p/3360008.html http://blog.csdn.net/remote_roamer/art ...