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理解上在看过博客园各个大神 ...
随机推荐
- ASP.NET之Cookie（坑爹的Response.Cookies.Remove）(转)
在web开发中Cookie是必不可少的 .NET自然也有一个强大的Cookie操作类,我们用起来也非常方便,不过在使用中我们会发现一个坑爹的事情Response.Cookies.Remove删除不 ...
- spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 消息管理
- 关于prototype和__proto__ 以及 constructor的文字总结
//函数的construct 指向了 function Function(){} undefined //实例化的对象 constructor 指向 函数本身 undefined //每个函数都有pr ...
- iOS的架构
根据多年的iOS开发经验,常用的iOS开发架构有:MVC.MVVM.CDD等,在这里我就不一一列举了. 做一个项目一般首先要搭建主流框架界面:常见的有TabBar控制器可以切换子控制器,上面又有Nav ...
- linux 软件的安装与Tarball
Linux 系统上真正认识的可执行文件其实是二进制文件 ( binary program ) shell scripts 只是利用 shell (例如 bash) 这支程序的功能进行一些判断式,而最终 ...
- Spark RDD aggregateByKey
aggregateByKey 这个RDD有点繁琐,整理一下使用示例,供参考 直接上代码 import org.apache.spark.rdd.RDD import org.apache.spark. ...
- 构造 & 析构 & 匿名对象
以前仅知道创建对象,但对匿名对象的了解基本为0. 通过阅读google chromium源代码 中关于 log 的使用,查阅相关资料,了解了一下匿名对象,予以记录. 什么是匿名对象 匿名对象可以理 ...
- Visual Studio 实现 编写一套.net代码，同时编译到 多个平台，多版本的操作笔记
如题,把一套代码.NET代码.编译成多平台,多版本dll文件. 项目结构如图(Cvs文件读写开源组件 https://github.com/JoshClose/CsvHelper) 如上图.项目工程 ...
- 记录Qt的一个诡异Bug
公司的一款项目,在迭代开发阶段,突然发现运行速度越来越慢,界面切换卡顿时间在2秒以上.经过和某个不卡版本的对比,惊奇的发现程序二进制都一模一样,就几个图片资源和脚本不一样.经过差不多一天的排查,发现是 ...
- 四元数(Quaternions)简介
经常在代码中看到Quaternions,也知道它是用来表达三维空间的旋转的,但一直没有更深的理解.这两天终于花点时间看了看维基百科的介绍,算是多了解了点.做个记录吧! 本质上而言,四元数是一个数学概念 ...