day03—JavaScript中DOM的Event事件方法
转行学开发，代码100天——2018-03-19
1、Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
2、常用的event属性有：
type //返回当前 Event 对象表示的事件的名称。
target //返回触发此事件的元素（事件的目标节点）
3、常用的event方法有：
initEvent() //初始化新创建的 Event 对象的属性
stopPropagation() //通知浏览器不要执行与事件关联的默认动作。即阻止事件冒泡
preventDefault() //不再派发事件。即阻止默认事件
<!DOCTYPE html>
<html>
<head>
<title>事件流</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
<a href="http://www.baidu.com" id="aid">百度</a>
</div> <script type="text/javascript">
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA); function showType(event)
{
alert(event.bubbles);//事件为冒泡事件，返回值为true
alert(event.type); //返回类型为click
alert(event.target); //返回[object HTMLButtonElement]
event.stopPropagation();//阻止事件冒泡
}
function showDiv()
{
alert("div");
}
function showA(event)
{
event.stopPropagation();//阻止冒泡事件
event.preventDefault(); //阻止a标签默认行为，即点击a标签时，不会跳转到相应网址 }
</script>
</body>
</html>
注意：事件传播
在 2 级 DOM 中，事件传播分为三个阶段：
第一阶段捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
第二个阶段发生在目标节点自身。直接注册在目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
第三阶段起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。
day03—JavaScript中DOM的Event事件方法的更多相关文章
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- 深入了解JavaScript中的Symbol的使用方法
这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...
- 总结Javascript中数组各种去重的方法
相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...
- JavaScript中类似PHP的uniqid()方法
JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...
- JavaScript中Number常用属性和方法
title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
随机推荐
- 总结：String类型与Int类型的转换【实现插入操作主键自增】
1.String类型(此类型是数字格式的字符串类型)转换成Int类型 String str = "10000"; 转换成Int类型: int num = Integer.parse ...
- MySql-8.0.16版本部分安装问题修正
本帖参考网站<https://blog.csdn.net/lx318/article/details/82686925>的安装步骤,并对8.0.16版本的部分安装问题进行修正 在MySQL ...
- 洛谷 - P2146 - 软件包管理器 - 重链剖分
https://www.luogu.org/problem/P2146 继续重链剖分. 这里好像很好懂,每次安装软件就区间改值赋值整个路径是1,然后比较前后的sum值变化就可以了.事实上后一次的sum ...
- Hls平台实现sobel算法（一）
索贝尔(Sobel)算子主要用于边缘检测,根据像素点的上下.左右邻点的灰度加权差与阈值进行比较,在边缘处达到极值的方法实现边缘检测. -------------序 一.原理性运行 流水线操作,将输入图 ...
- css设置不允许复制文本内容
之前做一个网上答题的页面时,考虑到要防止考生利用复制粘贴来提高作弊的可能性,就设计了不允许复制.方法也很简单,通过设置CSS 的 user-select就可以达到目的: -moz-user-selec ...
- 在Eclipse-jee-neon中配置Hibernate（jbosstools)
以下是在eclipse上安装Hibernate的插件,hibernate在编程上坚持出现,故需要在eclipse上进行如下安装. 首先把安装Hibernate插件,常用到JBoss,访问http:// ...
- CentOS7搭建Hadoop2.8.0集群及基础操作与测试
环境说明 示例环境 主机名 IP 角色 系统版本 数据目录 Hadoop版本 master 192.168.174.200 nameNode CentOS Linux release 7.4.1708 ...
- MongoDb学习 自定义配置mongodb连接
最近研究了mongodb获取本地连接属性的方案,场景就是mongodb的连接地址不在配置文件中配置,而是在代码中写好,代码中是从本地文件读取地址. public class MongoConfig { ...
- mona！mona！mona！
$ PS: $ 关于\(mona\) 是只很棒的猫啦!想知道的可以自己去看\(persona5\)的游戏流程或者动画版啦. \(PPS:\) 补充一下设定啊,\(mona\)是摩尔加纳(原名)的代号啦 ...
- python 在不同CPU上同时运行多个程序
出处/From https://www.quora.com/If-you-run-Python-under-a-dual-core-CPU-then-can-you-run-two-Python-pr ...