DOM-BOM-EVENT（7）
7.事件深入
7.1.事件捕获
事件流分为事件冒泡和事件捕获两种，事件冒泡指事件从里往外传播，而事件捕获刚好相反，指事件从外向內传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{
width: 600px;
height: 400px;
background-color: black;
margin: 100px auto;
border: 1px solid
}
#box2{
width: 400px;
height: 200px;
margin: 100px auto;
background-color: orangered;
border: 1px solid
}
#box3{
width: 200px;
height: 100px;
margin: 50px auto;
background-color: #009f95
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var oBox1 = document.getElementById("box1")
var oBox2 = document.getElementById("box2")
var oBox3 = document.getElementById("box3")
function fn(){
alert(this.id)
}
oBox1.onclick = fn;
oBox2.onclick = fn;
oBox3.onclick = fn;
// 事件绑定的另外一种形式
// addEventListener 第一个参数是 事件名称，第二个参数是事件处理函数，第三个参数表示 是否捕获
// true表示捕获 false表示不捕获，捕获就是冒泡
// 下面是事件冒泡的写法
// oBox1.addEventListener('click',fn,false)
// oBox2.addEventListener('click',fn,false)
// oBox3.addEventListener('click',fn,false)
// 下面是事件捕获的写法
oBox1.addEventListener('click',fn,true)
oBox2.addEventListener('click',fn,true)
oBox3.addEventListener('click',fn,true)
</script>
</body>
</html>
7.2.事件绑定形式总结
第一种写法，直接绑定在元素身上
<div id="box" onclick="fn(this)"></div>
<script>
function fn(obj){
alert(obj.id)
}
</script>
第二种写法 对象.事件 = 事件处理函数
<div id="box" ></div>
<script>
var oBox = document.getElementById("box")
oBox.onclick = function(){
alert(this.id)
}
</script>
注意： 这种写法有个问题就是，如果同时绑定两个事件处理函数，后面的会把前面的覆盖,例如：
<div id="box" ></div>
<script>
var oBox = document.getElementById("box")
oBox.onclick = function(){
alert(this.id)
}
oBox.onclick = function(){
alert("nodeing.com")
}
</script>
第三种写法：addEventListener
<div id="box" ></div>
<script>
var oBox = document.getElementById("box")
oBox.addEventListener("click", function(){
alert(this.id)
}, false)
oBox.addEventListener('click', function(){
alert("nodeing.com")
}, false)
</script>
注意：这种写法在ie上有兼容性问题，因此，可以封装一个兼容性处理函数
function addEvent(obj, type, fn){
if(obj.addEventListener){
obj.addEventListener(type, fn, false);
} else if(obj.attachEvent){
obj.attachEvent('on' + type, fn);
} else {
obj['on' + type] = fn;
}
}
7.3.事件取消
function removeEvent(obj, type, fn){
if(obj.removeEventListener){
obj.removeEventListener(type, fn, false);
} else if(obj.detachEvent){
obj.detachEvent('on' + type, fn);
} else {
obj['on' + type] = null;
}
}
7.4.事件默认行为
如果是通过 对象.onclick = fn 这种形式来绑定的， 可以直接在事件处理函数中return false来取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
height: 200px;
width: 100px;
background-color: orangered;
position: absolute;
display: none
}
</style>
</head>
<body>
<div id="box" ></div>
<script>
var oBox = document.getElementById("box")
document.oncontextmenu = function(ev){
var ev = ev || event
oBox.style.display = "block"
oBox.style.left = ev.clientX + "px"
oBox.style.top = ev.clientY + "px"
// 取消事件默认行为
return false
}
document.onclick = function(){
oBox.style.display = "none"
}
</script>
</body>
</html>
如果是通过addEventListener这种形式来绑定的，需要通过 ev.preventDefault()这种形式来取消
document.addEventListener("contextmenu", function(ev){
var ev = ev || event
oBox.style.display = "block"
oBox.style.left = ev.clientX + "px"
oBox.style.top = ev.clientY + "px"
// return false
ev.preventDefault()
}, false)
螺钉课堂视频课程地址：http://edu.nodeing.com
DOM-BOM-EVENT（7）的更多相关文章
- BOM基础（四）
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- c#中的delegate（委托）和event（事件）
c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- DOM学习笔记（二）对象方法与属性
所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...
- DOM之事件（一）
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...
- DOM的概念（1）
什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...
- JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- Liunx下使用wine容器实现跨平台使用软件
首先在Liunx中使用QQ,网易云音乐,等这些软件是很痛苦的,某些软件可能会有Liunx版本,但是像腾讯QQ早年前也提供过Linux版本,后来就下架了!!! 这里我以ubuntu18.04版本为列,讲 ...
- Java实现 LeetCode 741 摘樱桃（DFS || 递推 || 传纸条）
741. 摘樱桃 一个N x N的网格(grid) 代表了一块樱桃地,每个格子由以下三种数字的一种来表示: 0 表示这个格子是空的,所以你可以穿过它. 1 表示这个格子里装着一个樱桃,你可以摘到樱桃然 ...
- （Java实现） 图的m着色问题
图的m着色问题 [问题描述] 给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色.如果有一种着色法使G中每条边的2个顶点着不同颜色,则称这个图是m可着色的.图的m着色问 ...
- Java实现 LeetCode 676 实现一个魔法字典（暴力）
676. 实现一个魔法字典 实现一个带有buildDict, 以及 search方法的魔法字典. 对于buildDict方法,你将被给定一串不重复的单词来构建一个字典. 对于search方法,你将被给 ...
- Java实现 LeetCode 668 乘法表中第k小的数（二分）
668. 乘法表中第k小的数 几乎每一个人都用 乘法表.但是你能在乘法表中快速找到第k小的数字吗? 给定高度m .宽度n 的一张 m * n的乘法表,以及正整数k,你需要返回表中第k 小的数字. 例 ...
- Java实现 蓝桥杯 算法提高 P0101
算法提高 P0101 时间限制:1.0s 内存限制:256.0MB 提交此题 一个水分子的质量是3.0*10-23克,一夸脱水的质量是950克.写一个程序输入水的夸脱数n(0 <= n &l ...
- java实现第四届蓝桥杯买不到的数目
买不到的数目 题目描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的两种.糖果不能拆包卖. 小朋友来买糖的时候,他就用这两种包装来组合.当然有些糖果数目是无法组合出来的,比如要买 ...
- Linux ACL权限查看与设定
getfacl 文件名,可以查看文件的acl权限 setfacl [选项] 文件名,可以设定文件的acl权限,例如:setfacl -m u:boduo:rx /project/ 这时候,创建了bod ...
- Linux权限管理命令chmod详解
命令chmod详解 命令chmod(英文原意:change permissions mode of a file),所在路径为: 可以看到,它的路径为:/usr/bin/chmod,因此,它的执行权限 ...
- TZOJ 公交车
描述 公交车在一条笔直的道路(道路宽度忽略,设为X轴)上行驶,按顺序路上有若干个站点(X坐标值),crq的家也在道路旁某个位置h(X坐标值),现在crq想知道哪个站点下车离家最近. 输入 输入数据的第 ...