事件周期

 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. c#winform窗体嵌入

    最近开发项目,错误的理解了需求,自己做了个窗体的嵌套,虽然是错误的理解了,但是功能还是实现了,做下标记,需要时可以拿来看看. 新建两个窗体Form1和Form2,现在需要将Form2显示到Form1里 ...

  2. (C语言)数组与指针的区别

    以前常常听过这种说法,说数组和指针这两者比较像,但是不能混淆,可是一直没能理解.刚刚在李云的<专业嵌入式软件开发>中,看了讲述数组与指针区别的一章,似乎有所领悟.本着知乎上看到的这张图,我 ...

  3. MyEclipse配置Tomcat开发JavaWeb程序JSP以及Servlet

    1.安装准备 1).下载安装MyEclipse2014,这已经是最新版本. 2).下载Tomcat 官网:http://tomcat.apache.org/ 我们选择8.0: http://tomca ...

  4. (转)java中静态代码块的用法 static用法详解

    一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来 ...

  5. 02 Apache Solr: 概览 Solr在信息系统架构中的位置

    概述:      Apache Solr是一个用JAVA语言构建在Apache Lucene项目上的开源的企业级搜索平台.主要特性包含:全文搜索.命中高亮.片段式搜索.实时索引.动态集群.数据库集成. ...

  6. VS2015 +EF6 连接MYSQL数据库生成实体

      VS2015 +EF6 连接MYSQL数据库生成实体   已安装软件:VS2015                       XAMPP Control Panel(Mysql服务器)      ...

  7. LVM增大和减小ext4、xfs分区

    可以对ext4调整分区大小,能自动识别要增大还是减小 lvresize -L 300M -r /dev/vg/lvol0 原文地址http://www.361way.com/lvm-xfs-ext4/ ...

  8. JavaScript基础知识整理（2）

    15.处理图像 注意:(1)在写js文件时,尽量将函数的声明往后写,将函数调用写在前面,这样能够使代码结构很清晰. (2)一个网页中翻转器一般超过3个,所以使用for循环减少重复使用翻转器代码的次数. ...

  9. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  10. Linux系统编程温故知新系列 --- 01

    1.大端法与小端法 大端法:按照从最高有效字节到最低有效字节的顺序存储,称为大端法 小端法:按照从最低有效字节到最高有效字节的顺序存储,称为小端法 网际协议使用大端字节序来传送TCP分节中的多字节整数 ...