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 ...
随机推荐
- PAT甲级——A1087 All Roads Lead to Rome【30】
Indeed there are many different tourist routes from our city to Rome. You are supposed to find your ...
- PAT甲级——A1086 Tree Traversals Again
An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example ...
- PAT甲级——1072 Gas Station
A gas station has to be built at such a location that the minimum distance between the station and a ...
- 04_springmvc注解开发
一.注解开发 需求:1.进入商品查询列表页面. 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询),要修改的商品从数据库查询,根据商品id(主键)查询商品信息. 3.在商品修改页 ...
- ValueError: Variable conv1/weights already exists.
跑TensorFlow程序的过程中出现了错误,解决之后再次跑时,报如下错误: ValueError: Variable conv1/weights already exists, 原因: 这是因为我在 ...
- 跟我一起学习webpack(一)
跟我一起打包我们的第一个应用 第一步安装webpack 接下来我们新建文件 //add-content.js export default function(){ document.write('he ...
- walle(瓦力)部署系统的安装和简单使用
Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...
- yolo-windows检测高分辨率图像及封装应用
YOLO训练自己的数据集的一些心得 封装yolo-windows为动态链接库 yolo-windows源码 项目开源代码:LargeImageDetect-yolo-windows 由于项目需要,需要 ...
- leetcode算法题笔记|two sum
题目: 我的答案: /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = ...
- php条件语句(一)
PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...