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

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

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

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

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. 笔记 : 将本地项目上传到GitHub

    一.准备工作 1. 注册github账号https://github.com, 安装git工具 https://git-for-windows.github.io/ 2. 创建SSH KEY(由于本地 ...

  2. IIS转发需要的模块

    1.Application Request Routing https://www.iis.net/downloads/microsoft/application-request-routing  2 ...

  3. Apache Storm Installation

    安装的过程参照此处的过程介绍(https://www.tutorialspoint.com/apache_storm/apache_storm_installation.htm) 安装的过程要安装3个 ...

  4. Unity3d之如何截屏

    Unity3d中有时有截屏的需求,那如何截屏呢,代码如下: /// <summary> /// 截屏 /// </summary> /// <param name=&qu ...

  5. C语言堆栈的区别

    堆(heap)和栈(stack)有什么区别?? 简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. astack:是自动分配变量,以及函数调用的时候所使用的 ...

  6. codeforces 980D Perfect Groups

    题意: 有这样一个问题,给出一个数组,把里面的数字分组,使得每一个组里面的数两两相乘都是完全平方数. 问最少可以分成的组数k是多少. 现在一个人有一个数组,他想知道这个数组的连续子数组中,使得上面的问 ...

  7. 网站图标 favicon.ico

    默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404 ...

  8. Javascript深入理解构造函数和原型对象

    1.在典型的oop的语言中,如java,都存在类的概念,类就是对象的模板,对象就是类的实例.但在js中不存在类的概念,js不是基于类,而是通过构造函数(constructor)和原型链(propoty ...

  9. OAuth2.0 知多少（好）

    https://www.cnblogs.com/sheng-jie/p/6564520.html 简书集成的社交登录,大大简化了我们的注册登录流程,真是一号在手上网无忧啊.这看似简单的集成,但背后的技 ...

  10. BUAA 111 圆有点挤

    题目描述 gg最近想给女友送两个精美的小礼品:两个底面半径分别为R1和R2的圆柱形宝石,并想装在一个盒子里送给女友. 好不容易找到了一个长方体的盒子,其底面为A*B的矩形,他感觉好像宝石装不进去,但又 ...