转行学开发，代码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. APMServ升级PHP至5.3

    APMServ5.2.6 的php版本是php5.2.6,所以需要升级一下PHP版本:1.到 php下载地址下载PHP5.3的VC6版本的zip文件,我下载的是:php-5.3.23-Win32-VC ...

  2. python学习第四十五天__name__用法和作用

    在python导入模块导入另外一个模块的时候,有时候只是想用其一个方法,会出现其他的方法也运行了,python用到__name__==‘__main__’ 解决问题,那么__name__用法和作用 1 ...

  3. 【JAVA】增强for循环for(int a : arr)

    介绍 这种有冒号的for循环叫做foreach循环,foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简 ...

  4. 详聊js中的原型/原型链

    先以一段简单的代码为例: function Dog(params){     this.name = param.name;     this.age = param.age;     this.ba ...

  5. python 安装opencv及问题解决

    正常安装模式 pip install opencv-python==3.4.5.20 pip install opencv-contrib-python==3.4.5.20 -i http://pyp ...

  6. 信号量Semaphore实现原理

    Semaphore用于管理信号量,在并发编程中,可以控制返访问同步代码的线程数量.Semaphore在实例化时传入一个int值,也就是指明信号数量.主要方法有两个:acquire()和release( ...

  7. Apache Mesos1.0.1 编译安装部署教程(ubuntu)

    参考资料 官方文档:http://mesos.apache.org/documentation 中文翻译:http://mesos.mydoc.io/ GitHub:https://github.co ...

  8. spring boot 加载指定xml

    方法一:使用@ImportResource 方法二:在test中 @ContextConfiguration(locations = "classpath:spring-profile.xm ...

  9. k8s基本概念

    1)Master模块简介:     Master是Cluster的大脑,它的主要职责是调度,即决定将应用放在哪里运行.Master运行Linux操作系统,可以是物理机或者虚拟机.为了实现高可用,可以运 ...

  10. java程序员必知的 8大排序

    Java常用的八种排序算法与代码实现 排序问题一直是程序员工作与面试的重点,今天特意整理研究下与大家共勉!这里列出8种常见的经典排序,基本涵盖了所有的排序算法. 1.直接插入排序 我们经常会到这样一类 ...