文档章节

javascript对象--8 事件

奋斗的小芋头
 奋斗的小芋头
发布于 2016/12/06 19:09
字数 609
阅读 6
收藏 2

事件对象 :在执行响应对象函数前由浏览器创建的对象。该对象封装了本次事件的基本信息以及处理事件流的方法。(在DOM标准中规定的事件对象的功能较少,因此哥哥浏览器都做了扩充,因此很多事件属性和方法不兼容)

事件对象 :{

基础事件对象的属性方法

一、常用基本属性 :(下面四个对象均为只读属性)

target : 获取事件对应的最详细元素的Dom对象

currentTarget : 获取绑定了响应函数的Dom对象

currentTarget :不一定与target相等

type : 获取事件类型, 例如   click

timeStamp : 获取时间戳。 Numbe类型 ---当前触发事件的时间点

1、target : 获取事件对应的最详细元素的Dom对象

<script>
			window.addEventListener("load", function(){
				register ();
			})
			
			function register (){
				document.getElementById("outerDiv").addEventListener("click" ,handleEvent )
			}
			
			function handleEvent(e){
				//e就是浏览器封装好的 event 对象
				// 获取当前事件对象的第二种方式:window.event(window.event === e);
				//e.target不一定是绑定事件的dom元素,是当前操作的最详细的DIV,距离点击最近的元素
				console.log(e.target);
				
			}
</script>
<h2>只读基本属性</h2>
		<div id="outerDiv" style="height: 200px; width: 200px; background-color: coral;">
			<div id="innerDiv" style="height: 100px; width:100px; background-color:cornflowerblue;">
			
		    </div>
</div>

2、获取当前绑定事件对象

//获取绑定了事件的事件源 target不一定与currentTarget相等
console.log(e.currentTarget);
console.log(e.currentTarget);
console.log(e.type);
console.log(e.timeStamp);

二、阻止冒泡及捕获的属性以及方法

bubbles :获取绑定的事件的方式是否设定了冒泡或捕获( 只有使用 DOM2级绑定方式是返回true).Boolean类型。

stopPropagation( ) ;在bubbles为true时,阻止继续冒泡或捕获。

stopImmediate Propagation():强制阻止冒泡或捕获。

阻止默认行为的属性和方法

window.addEventListener("load", function(){
				register ();
			})
			
			function register (){
				
		        document.getElementById("outerDiv").addEventListener("click" ,function(){
					alert("outerDIV1执行");
				},false); //冒泡阶段
				
				document.getElementById("innerDiv").addEventListener("click" ,function(){
					alert("innerDIV1执行");
				},false);//冒泡阶段
			}

点击innerDIV时

在冒泡阶段先执行 

1、弹出   innerDIV=1执行    2、弹出 outerDIV执行

document.getElementById("innerDiv").addEventListener("click" ,function(){
					alert("innerDIV1执行");
					event.stopImmediatePropagation();//阻止继续冒泡
					
				},false);//冒泡阶段
			}

默认行为:

某些元素在用户操作时,在不调用任何程序的情况下也会发生具体行为。例如 input type = submit 点击时会提交整个form表单。

defaultPrevented :获取是否组织了默认行为,boolean类型。

preventDefault( ) :阻止默认行为。

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
JavaScript 学习(1)

参考资料:http://www.w3school.com.cn/js/index.asp 额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言,可插入html页面中,并由...

明天以后
2014/09/30
0
0
JavaScript 学习(2)

参考: http://www.w3cschool.cc/js/js-window.html 四、浏览器 BOM 浏览器对象模型(BOM)使JavaScript有能力与浏览器“对话”。 (1)Window 浏览器对象模型(Browser Object Model),尚无...

明天以后
2014/10/01
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
JavaScript面试大全(二)

eval()是做什么的? [eval()是“魔鬼”][1] null,undefined 的区别? [来看看大神阮一峰的解释吧][2] 写一个通用的事件侦听器函数。 [JS事件监听器][3] Node.js的适用场景? [NodeJS优缺点及...

百变茄
2014/06/05
0
0
JavaScript的基本使用

一、JavaScript的简单介绍   JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaS...

码农47
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么只有你每次提交代码,log里面会出现merge

http://www.cnblogs.com/Sinte-Beuve/p/9195018.html

踏破铁鞋无觅处
4分钟前
0
0
如何学习大数据:spark发布程序

一、对于spark程序只是用于默认的spark包的情况 直接点击pcakage 将程序进行在linux当中进行发布 客户端模式:测试 spark-submit --class com.keduox.App \ --master yarn \ --deploy-mode ...

架构师springboot
4分钟前
0
0
oracle job(定时任务)

创建 定时任务 job declare job number;BEGIN DBMS_JOB.SUBMIT( JOB => job, -- job任务的唯一标识(自动生成) WHAT => 'INSERT into TEXTL (id) VALUES(TEXT......

骑羊放狼灬
8分钟前
0
0
Spring声明式事务在抛出异常时不回滚(RollBack)

Spring声明式事务默认只在RuntimeException时Rollback(回滚),不当的try catch会导致事务不回滚。 spring事务默认运行时异常回滚,RuntimeException 配置时添加异常回滚 rollback-for="Th...

叶落花开
8分钟前
0
0
赋能时空云计算 阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云云栖社区
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部