文档章节

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
码字总数 129412
作品 0
大连
JavaScript 学习(1)

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

明天以后
2014/09/30
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 学习(2)

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

明天以后
2014/10/01
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部