转行学开发，代码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事件方法的更多相关文章

  1. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  2. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  3. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  4. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  5. 深入了解JavaScript中的Symbol的使用方法

    这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...

  6. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...

  7. JavaScript中类似PHP的uniqid()方法

    JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...

  8. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  9. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

随机推荐

  1. 前端 CSS的选择器 伪类选择器

    伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...

  2. linux内核的gpiolib详解

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...

  3. Log4Net 之走进Log4Net （四）

    原文:Log4Net 之走进Log4Net (四) 一.Log4net的结构 log4net 有四种主要的组件,分别是Logger(记录器), Repository(库), Appender(附着器) ...

  4. Python 爬虫 校花网

    爬虫:是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. 福利来了  校花网 ,首先说为什么要爬这个网站呢,第一这个网站简单爬起来容易,不会受到打击,第二呢 你懂得.... 1.第一步,需要下 ...

  5. Python之路-Python中的线程与进程

    一.发展背景 任务调度 大部分操作系统(如Windows.Linux)的任务调度是采用时间片轮转的抢占式调度方式,也就是说一个任务执行一小段时间后强制暂停去执行下一个任务,每个任务轮流执行.任务执行的 ...

  6. 解决javax.servlet.jsp.JspException cannot be resolved to a type

    转自:https://blog.csdn.net/fengspg/article/details/41645159

  7. java.lang.NoClassDefFoundError: javax/transaction/Synchronization

    转自:https://blog.csdn.net/andsionok/article/details/68490848 今天在整合ssh框架中 程序报告Java.lang.NoClassDefFoun ...

  8. BZOJ 1911 特别行动队 （斜率优化）

    $ BZOJ~1911~*~ $ 特别行动队: (斜率优化) $ solution: $ 感觉这道题目还是比较常规的,首先我们很容易想到DP,因为题目里面说了选出的人都是连续的,这意味着我们可以从前往 ...

  9. div+css做出带三角的弹出框 和箭头

    一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...

  10. golang test模块

    1 创建文件夹testing101 2 被测试程序 package testing101 func Sum(numbers []int) int { sum :=0 for _,n :=range n ...