昨天遇到一个面试题，主要就是事件覆盖问题和触发问题

（不是打广告，无视文本内容）

总之这样的话，会输出三次“做自己的网站”。

为什么不是两次，而是输出三次呢？

1.首先onclick=function...是DOM0级事件处理程序，而addEventListener是DOM2级事件处理程序，这两种属于不同类，不会相互覆盖。

2.此外事件监听的第三个参数是设置事件处理程序的调用阶段，true是捕获阶段，false是冒泡阶段，默认为false。如果处在不同阶段的话就不会相互覆盖。

综上两点，所以会输出三次。

JS事件覆盖问题和触发问题的更多相关文章

  1. MSCRM4.0如何使js事件在批量编辑表单中触发

    MSCRM4.0如何使js事件在批量编辑表单中触发 MSCRM4.0如何使js事件在批量编辑表单中触发 MSCRM3.0我们可以通过在onload事件加入以下代码来控制某个属性为只读.crmForm. ...

  2. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)

    四.伪DOM自定义事件 这里的“伪DOM自定义事件”是自己定义的一个名词,用来区分DOM自定义事件的.例如jQuery库,其是基于包装器(一个包含DOM元素的中间层)扩展事件的,既与DOM相关,又不直 ...

  3. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  4. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  5. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  6. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  7. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  8. js事件(十二)

    一.事件三要素1.事件目标[谁触发的该事件(引起该事件触发的源头:target)]2.事件处理程序[处理相应事件的函数]3.事件对象[触发事件产生的携带事件信息的对象] 二.事件流[从页面中接受事件的 ...

  9. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

随机推荐

  1. Objective-C中NSArray的基本用法示例

    NSArray的一些用法 NSArray只允许装OC对象,并且不能装空值,空代表数组元素的结束 #pragma mark - NSArray的基本用法 // 创建一个空数组 NSArray *arra ...

  2. cocos2d JS-(JavaScript) 使用特权方法的例子

    function User(name,age) { var year = (new Date()).getFullYear() - age; this.getYearBorn = function ( ...

  3. UGUI之Scrollbar使用

    这个效果主要用到了3个组件(对象): 1:Scrollbar对象  滚动条 2:Scroll Rect组件  让对象具有滑动效果 3:Mask组件  遮罩层.把多余的部分隐藏不显示 Scrollbar ...

  4. UVAL 4728 Squares(旋转卡壳)

    Squares [题目链接]Squares [题目类型]旋转卡壳 &题解: 听着算法名字,感觉挺难,仔细一看之后,发现其实很简单,就是依靠所构成三角行面积来快速的找对踵点,就可以省去很多的复杂 ...

  5. 三级菜单（低端版VS高端版）

    >>>低端版 menu={'山西': {'太原': {'迎泽':['柳巷','五一广场','太原站'], '小店':['山西财经大学','山西大学','武宿机场'], '晋源':[' ...

  6. MYSQLi数据访问分页查询

    <?php //分页工具 直接加载使用 /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录 ...

  7. jQuery属性--addClass()和removeClass()

       addClass(class|fn) 概述 为每个匹配的元素添加指定的类名 参数 class  一个或多个要添加到元素中的CSS类名,请用空格分开: function(index, class) ...

  8. Ngine X 完全开发指南 读书笔记-前言

    一开始接触的编程语言是VF,那是一种可视化编程语言,所谓的可视化,就是运行结果能直接看得到的,非常直观,便于调试,适合刚刚接触编程的新人学习.当时学得懵懂,半知半解,就是感觉程序非常神奇,常常几句代码 ...

  9. locust 的使用

    Contents Locust这一款开源性能测试工具.然而,当前在网络上针对Locust的教程极少,不管是中文还是英文,基本都是介绍安装方法和简单的测试案例演示,但对于较复杂测试场景的案例演示却基本没 ...

  10. 苹果企业版签名分发相关问题，蒲公英签名，fir.im分发，安装ipa设置信任

    苹果企业版签名分发相关问题,蒲公英签名,fir.im分发,安装ipa设置信任蒲公英 - 高效安全的内测应用发布.管理平台https://www.pgyer.com/app/signature分发版 2 ...