转行学开发，代码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. [Vim 填坑] 01 Vim 中替换与注释的补充

    目录 1. print( 坑的信息 ) 2. 开始填坑 (1) :n1,n2s/old/new/gc 的后续命令 ^E ^Y (2) 利用"V-可视"模式进行多行注释 1. pri ...

  2. java8 stream 用法收集

    public class Test1 { public static void main(String[] args) { List<Integer> numbers = new Arra ...

  3. [APIO2019] [LOJ 3146] 路灯 (cdq分治或树状数组套线段树)

    [APIO2019] [LOJ 3146] 路灯 (cdq分治或树状数组套线段树) 题面 略 分析 首先把一组询问(x,y)看成二维平面上的一个点,我们想办法用数据结构维护这个二维平面(注意根据题意这 ...

  4. 洛谷P2460 [SDOI2007]科比的比赛(题解)(贪心+搜索)

    科比的比赛(题解)(贪心+搜索) 标签:算法--贪心 阅读体验:https://zybuluo.com/Junlier/note/1301158 贪心+搜索 洛谷题目:P2460 [SDOI2007] ...

  5. Python学习第四十一天函数装饰器传参数的用法

    在不改变函数的结构的基础,我们给函数加新的功能,用是函数装饰器,如果要给函数传递参数,那么应该怎么做呢 @timerdef test2(name,age): time.sleep(3) print(' ...

  6. JavaScript基础9——操作DOM树

    appendChild()方法:添加子节点到末尾 类似于剪切粘贴的效果   insertBefore(newNode, oldNode)方法:在某个节点之前插入一个节点 newNode为要插入的节点, ...

  7. 关键字static介绍

    static关键字 java中针对多个对象有共同的成员变量值得时候,就提供了static关键字来修饰. (1)静态的意思.可以修饰成员变量和成员方法. (2)静态的特点: A:随着类的加载而加载 B: ...

  8. linux开启 Sersync 守护进程进行数据同步

    a.配置 Sersync 环境变量 [root@SERSYNC sersync]# echo 'export PATH=$PATH:/usr/local/sersync/bin'>>/et ...

  9. nodejs http服务器简单搭建

    var http = require('http') // 1. 创建 Server var server = http.createServer() // 2. 监听 request 请求事件,设置 ...

  10. CSS3 ::before和::after伪元素的实际应用

    实例 1.清除浮动 通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签,然后在设置它的清除浮动要是,使用after伪元素,我们就不需要添加无意义的div标签在html中了,下面的例子就 ...