web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1、JS事件详解-事件流
1.1、事件流
1.事件流：
描述的是在页面中接受事件的顺序
2.事件冒泡：
由最具体的元素接收，然后逐级上传播至最不具体的节点（文档）
3.事件捕获：
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="btn"></button>
<!--冒泡的方式
先点击btn第一接收的应该是按钮，
然后应该是包含他的div，再就是html标签，
最后应该就是html文档了 事件的捕获：
最先接收的是文档型接收，然后就是div接收，
最后才是最具体的button接收-->
</div>
</body>
</html>
2、JS事件详解-事件处理
1.HTML事件处理：
直接添加到HTML结构中
2.DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
注：只能添加一个事件处理程序；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){alert("DOM0级事件处理111");}
//第一个事件被覆盖。
// DOM0级事件处理程序只会处理最后一个事件处理程序
btn.onclick = function(){alert("DOM0级事件处理222");} // btn.onclick = null;/*将DOM0级事件处理程序清除*/
</script>
</body>
</html>
3.DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡
removeEventListener();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3); function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
function demo3(){
alert("DOM2级事件处理程序3");
}
btn.removeEventListener("click",demo2);
</script>
</body>
</html>
DOM2级事件处理程序处理方便。
4.IE事件处理程序
attachEvent
detachEvent
这两个是比IE8低的版本使用的语句。
使用如下代码可解决问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn"); if(btn.addEventListener){ // alert("1");
// btn.onclick = demo();
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
alert("2");
btn.attachEvent("onclick",demo);
}else{
alert("3");
btn.onclick = demo;
}
function demo(){
alert("111");
} </script>
</body>
</html>
3、JS事件详解-事件对象
3.1、事件对象：
在触发DOM事件的时候都会产生一个对象
3.2、事件对象event
1.type：获取事件类型
2.target：获取事件目标
3.stopPropagation：阻止事件冒泡
4.preventDefault：阻止事件默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">点击按钮</button>
<a id="aid" href="http://www.baidu.com">百度一下</a>
</div>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(){
alert(event.type);//顾名思义
alert(event.target);//顾名思义
event.stopPropagation();//阻止事件冒泡，否则还会触发点击div的事件
}
function showDiv(){
alert("div");
}
function showA(){
event.stopPropagation();
event.preventDefault();//阻止事件的默认行为
} </script>
</body>
</html>
web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解的更多相关文章
- ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务
感谢一路走来默默支持和陪伴的你~~~ -------------------欢迎来访,拒绝转载-------------------- 一.Rest API基础 ArcGIS 平台提供了丰富的REST ...
- Linux 学习笔记之 --- epoll 事件模型详解
epoll 主要采用对已就绪的 fd 进行轮询操作 一.epoll 触发方式 epoll支持 ET 和 LT 两种触发方式 ET(边缘触发):Nginx 就是采用 ET 触发方式,只支持 no-b ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 腾讯Web前端开发框架JX(Javascript eXtension tools)
转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...
- IP地址和子网划分学习笔记之《IP地址详解》
2018-05-03 18:47:37 在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...
- Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（转）
通过前面的学习,你可能大致了解了Quartz,本篇博文为你打开学习SSMM+Quartz的旅程!欢迎上车,开始美好的旅程! 本篇是在SSM框架基础上进行的. 参考文章: 1.Quartz学习——Qua ...
随机推荐
- [原创]Java调用PageOffice给Word中的Table赋值
Word中的table操作需要借助数据区域(DataRegion)实现的,要求数据区域完整的包含了整个Table的内容,这样才可以通过数据区域控制和操作table.因此,要想使用table,则必须在w ...
- day70test
day_70: #api / urls: from django.conf.urls import url from . import views urlpatterns = [ url(r'^car ...
- <每日一题>题目13：列表的简单问题
''' 分析: python赋值是通过指针来进行的. 很显然第一.三.四次调用都指向同一个列表,并未完成清空, 第二次调用只是指向了另一个列表,也未完成清空,很显然结果是累计的 结果: [0, 1] ...
- mysql工具使用
mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...
- 全栈之路-微信小程序-架构总览
第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...
- hbuilder scss自动编译
hbuilder 命令参数: --no-cache %FileName% %FileBaseName%.css --style compact
- Django项目：CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名
# classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...
- http和tcp/ip,socket的区别
http协议和tcp/ip协议乍看起来,感觉是同一类的东西,其实不然,下面简单的说说他们的区别. http协议是应用层的一种数据封装协议,类似的还有ftp,telnet等等,而tcp/ip是数据传输层 ...
- 19-10-15-Night-E
信心赛??高考赛…… 过程 T1码了暴力+随机化. T2没码完.$Kuku$了 T3写了暴力+ puts("86400\n-1"); 骗了点分. T1 ××你告诉我CF E题是T1 ...
- Java虚拟机系列（四）---查看GC日志
这一节穿插一点如何在eclipse中配置并查看某个Java应用GC日志的知识点,我也是通过调研知道的,因为书中写的不是很详细,主要是为下一节做准备. 一.eclipse中配置GC 在eclipse中如 ...