转行学开发，代码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. “希希敬敬对”队软件工程第九次作业-beta冲刺第一次随笔

    队名:  “希希敬敬对” 龙江腾(队长) 201810775001 杨希                   201810812008 何敬上 201810812004 今日讨论会议照片一张: 每个人 ...

  2. linux 截取变量字符串

    STR=123456abc FINAL=`echo ${STR: -1}` 或者 FINAL=${STR: -1} 都可以让FINAL获得c这个最后一个字符   Linux 的字符串截取很有用.有八种 ...

  3. 如何配置属于自己的Git账户

    如何配置属于自己的Git账户:https://jingyan.baidu.com/article/3d69c55123e556f0cf02d730.html

  4. 2019 Multi-University Training Contest 2 - 1008 - Harmonious Army - 最大流

    http://acm.hdu.edu.cn/showproblem.php?pid=6598 一开始就觉得是网络流,但是一直都不会怎么建图. 这里要考虑. 每一组边(u,v,a,b,c)建立如下的连接 ...

  5. python的cls，self，classmethod，staticmethod

    python类里会出现这三个单词,self和cls都可以用别的单词代替,类的方法有三种, 一是通过def定义的 普通的一般的,需要至少传递一个参数,一般用self,这样的方法必须通过一个类的实例去访问 ...

  6. Angular.js 使用$http的response得到的phone属性为undefined

    这是个坑~ 先说解决方案:把response打印出来找你的属性 记录一下,经验不足,有些东西想当然了,所有错误出现都应该一步步去排查!!!切记想当然的自以为. 源码: js $scope.phone= ...

  7. <input>/<textarea>输入框设置默认提示文字（隐藏式）

    html代码如下: <tr>    <td>签   名:</td>    <td><input type="text" nam ...

  8. eclipse codeFormatter 和 codeTemplates 模板

    下载  eclipse_modles.rar 好用高效的eclipse的注释和代码风格模板.     版权声明:本文为博主原创文章,未经博主允许不得转载.

  9. tf.clip_by_global_norm

    首先明白这个事干嘛的,在我们做求导的时候,会遇到一种情况,求导函数突然变得特别陡峭,是不是意味着下一步的进行会远远高于正常值,这个函数的意义在于,在突然变得陡峭的求导函数中,加上一些判定,如果过于陡峭 ...

  10. spring requestbody json

    1  @requestbody string param 前台将jsonobject序列化成字符串 后台解析成JsonObject 2 @requestbody map<string,objec ...