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

(不是打广告,无视文本内容)

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

为什么不是两次,而是输出三次呢?

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. 使用socat查看ios日志

    仅供记录自己查看 mac连接ios后进程ios shell apt-get socat安装 socat socat - UNIX-CONNECT:/var/run/lockdown/syslog.so ...

  2. 前端获取的数据是undefined

    var id = $("id1").val(); var username = $("username1").val(); var password = $(& ...

  3. JavaScript-年月日转换12小时制

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. hbase shell operate

    , start hdfs [hadoop@alamps sbin]$ ./start-all.sh This script is Deprecated. Instead use start-dfs.s ...

  5. 合并dict、list的方法

    dict1={1:[1,11,111],2:[2,22,222]}dict2={3:[3,33,333],4:[4,44,444]}合并两个字典得到类似 {1:[1,11,111],2:[2,22,2 ...

  6. Android Studio -- 关联源码

    1,昨天刚把SDK升级到25,然后准备开始 新的一年码代码,结果发现查看源码的时候出现了一堆的“ throw new RuntimeException("Stub!");” 网上搜 ...

  7. c++ 常用的数据结构

    set // constructing sets #include <iostream> #include <set> void checkin(std::set<int ...

  8. python遍历某一位置所有文件夹中的文件

    通过多次遍历达到找出所有文件的目的 import os rootdir=["d:/77"] c=[] for i in rootdir: for parent,dirnames,f ...

  9. python2.7之乱码问题

    python 3之后当然不存在乱码问题了.python 2的乱码问题有时就有点头疼了.(代码均为在windows下测试) 示例:保存为test1.py 报错信息如下: 解决办法: 我将代码保存为tes ...

  10. Python -- print(dataframe)时,省略部分列。

    import pandas as pd # 导入后加入以下列,再显示时显示完全. pd.set_option('display.max_rows',500) pd.set_option('displa ...