文档章节

javascript对象--8 事件

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

事件对象 :在执行响应对象函数前由浏览器创建的对象。该对象封装了本次事件的基本信息以及处理事件流的方法。(在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
博文 79
码字总数 129412
作品 0
大连
JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

JavaScript核心概念归纳整理

原文出处: 熊俊漉 JavaScript语言本身是一个庞大而复杂的知识体系,复杂程度不低于任何一门后端语言,本文针对JavaScript语言的核心概念进行简单的梳理,对应的每个知识点仅仅点到为止,不作...

音乐宇Code ⋅ 05/27 ⋅ 0

四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳 ⋅ 05/02 ⋅ 0

AJAX基础之JavaScript基础与增强(一)

一、什么是JavaScript   JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现...

architect刘源源 ⋅ 05/08 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

JavaScript的self和this使用小结

一、self   这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返...

new个对象 ⋅ 05/07 ⋅ 0

[Node.js源码解读(1)]Node.js的启动过程

本文原载于https://github.com/DavidCai1993/my-blog/issues/26 经原作者授权连载于alinode官方博客,未经原作者允许,不得转载。 大家可能会好奇,在 Node.js 启动后,第一个执行的 JavaSc...

_朴灵_ ⋅ 05/14 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

WEB前端面试的10个最基础JavaScript问题!

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 40分钟前 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部