文档章节

javascript对象--8 事件

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

精选30+云产品,助力企业轻松上云!>>>

事件对象 :在执行响应对象函数前由浏览器创建的对象。该对象封装了本次事件的基本信息以及处理事件流的方法。(在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
博文 167
码字总数 129482
作品 0
大连
私信 提问
加载中
请先登录后再评论。
JavaScript 学习(1)

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

明天以后
2014/09/30
250
0
二、HTML嵌入JavaScript脚本(了解)

1、在<head></head>标签中使用<script></script> <html> <head> <titel></title> <script language = "javascript"> window.alert("hello world!"); </script> </head> <body></body> </html......

osc_od61rt0p
2018/03/01
1
0
细说JavaScript数据类型及转换

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

开元中国2015
2015/07/13
139
1
JavaScript学习运用

~JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向对象、事件驱动式的网页脚本语言。JavaScript语言的前作叫做Livescript。 ~JavaScript的作用: 交互式操作 表单验证 网页...

xyx_小新
2015/03/11
2
0
php面试专题---12、JavaScript和jQuery基础考点

php面试专题---12、JavaScript和jQuery基础考点 一、总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件、样式操作。 1、下列不属于JavaScript语法关键/保留...

osc_to22dmsu
2019/06/20
5
0

没有更多内容

加载失败,请刷新页面

加载更多

在Python中从字符串转换为布尔值? - Converting from a string to boolean in Python?

问题: Does anyone know how to do convert from a string to a boolean in Python? 有谁知道如何在Python中从字符串转换为布尔值? I found this link . 我找到了此链接 。 But it doesn't......

javail
15分钟前
19
0
中国饭店协会数据表明

记者了解到,中国饭店协会数据表明,2018年全国餐饮收入42716亿元,同比增长9.5%.根据国家统计局数据显示,截至2017年底,限额以上餐饮行业的从业人数达到2232万人,巨大的餐饮市场背后,餐饮行业的...

asd369
37分钟前
29
0
OSChina 周六乱弹 —— 日本的丧尸光天化日之下都开始……

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《風の手枕》- 増田俊郎 手机党少年们想听歌,请使劲儿戳(这里) @码界农民工 :...

小小编辑
49分钟前
22
0
Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 02:01 The TikTok app is no longer permitted on mobile devices that access Amazon email - (twitter.com) TikTok应用程序不再允许在访问亚马逊电子邮件的移动设备上......

FalconChen
今天
155
0
是否有可能从另一个git存储库中挑选一个提交? - Is it possible to cherry-pick a commit from another git repository?

问题: I'm working with a git repository that needs a commit from another git repository that knows nothing of the first. 我正在使用一个git存储库,需要从另一个不知道第一个存储库......

技术盛宴
昨天
29
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部