JavaScript-事件周期-点击替换颜色
事件周期
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-事件周期-点击替换颜色的更多相关文章
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- JavaScript 事件总结
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- JavaScript 事件循环
JavaScript 事件循环 事件循环 任务队列 async/await 又是如何处理的呢 ? 定时器问题 阻塞还是非阻塞 实际应用案例 拆分 CPU 过载任务 进度指示 在事件之后做一些事情 事件 ...
- JavaScript事件代理和委托（Delegation）
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript 事件
事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
随机推荐
- c/c++创建动态链接库
extern "C" C++保留了一部分过程式语言的特点,因而它可以定义不属于任何类的全局变量和函数.但是,C++毕竟是一种面向对象的程序设计语言,为了支持函数的重载,C++对全局 ...
- asp.net GDI+绘制五边形
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 9×9扫雷游戏代码-C写的
#include <stdio.h> #include <stdlib.h> //画棋盘 a雷表 b周围雷数表 c打开表 ][],][],][]) { ,j=; ;i<; ...
- Oracle分页存储过程
1.在oracle的sqlplus或其他工具中运行一下pl/sql块建立存储过程 --创建包create or replace package testpackage astype test_curs ...
- 支付宝App支付签名和验签
代码: using CMS.Utility.ReturnResult; using OAuthWebAPI.Package; using Common; using System; using Sys ...
- 模拟器报Installation error: INSTALL_FAILED_CONTAINER_ERROR解决方法
今天刚刚导入了一个项目,但是多次导入,始终有错误,解决不了.第一次是我导入项目之后,项目前边有红色叉号,但是项目里面却没有错误标志.重新打开Eclipse,方解决了这个问题.但是,在模拟器上运行,却始 ...
- apktool+dex2jar+xjad反编译android程序
1 将MyAdroid.apk拷贝到E:\disapk 2 下载apktool1.5.2.tar.bz2 和 apktool-install-windows-r05-ibot.tar.bz2 并解压到 ...
- jfreechart 整合sturts2牛刀小试
一.增加的jar包 struts2-jfreechart-plugin-2.1.6.jar 在struts2的相应jar包中找 jcommon-1.0.23.jar ...
- ［修改后］html+css 做成一个可浏览的表格
现在表格内容需要显示的要求如下: 1, 表格很大,界面放不小,需要放到div中. 2, 在div中可以用scroll滑动查看. 3, td中的内容保持在一行中. 4, 可以点击tr,然后可以选中并了解 ...
- mongo基本操作
创建数据库文件的存放位置,比如d:/mongodb/data/db.启动mongodb服务之前需要必须创建数据库文件的存放文件夹,否则命令不会自动创建,而且不能启动成功. 打开cmd(windows键 ...