onclick只出现一次alert:我是click2【很正常第一次click事件会被第二次所覆盖】,但是addEventListener却可以先后运行,不会被覆盖【正如:它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】

<ul id="color-list">
<li id="addEvent">red</li>
<li id="on_click">yellow</li>
</ul>
<script type="text/javascript">
(function(){
var addEvent = document.getElementById("addEvent");
addEvent.addEventListener("click",function(){
alert("我是addEvent1");
},false);
addEvent.addEventListener("click",function(){
alert("我是addEvent2");
},false); var addEvent = document.getElementById("on_click"); on_click.onclick = function() {
alert("我是click1");
}
on_click.onclick = function() {
alert("我是click2");
}
})();
</script>

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。
  在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

  元素的点击事件先触发 ,然后再触发元素的点击事件。

    addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

    addEventListener(event, function, useCapture);

    默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

addEventListener和onclick的区别的更多相关文章

  1. addEventListener 和 onclick 简单比较

    首先说一下addEventListener 语法: element.addEventListener(event, function, useCapture) 这里的event是事件名,functio ...

  2. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  3. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  4. addEventListener和attachEvent的区别(转载)

    attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...

  5. click()和onclick()的区别

    click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...

  6. change和onchange、click和onclick的区别

    change和onchange.click和onclick的区别: onchange和onclick都是js方法 可以在标签元素上使用  <input  onchange="" ...

  7. 关于click和onclick的区别

    click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...

  8. addEventListener的click和onclick的区别

    前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料 事件绑定 onclick绑定方式 优点: - 简洁 - 处理事件的 ...

  9. addEventListener和attachEvent的区别

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

随机推荐

  1. 18 12 14 python提高 装饰器

    ---恢复内容开始--- 装饰器还真的有些没看懂  一个任意传参的装饰器   一个通用装饰器 def set_func(func): print("------开始进行装饰") # ...

  2. CNN:卷积输出分辨率计算

    卷积是CNN非常核心的操作,CNN主要就是通过卷积来实现特征提取的,在卷积操作的计算中会设计到几个概念:步长(strides).补充(padding).卷积核(kernel)等,那卷积的输出分辨率计算 ...

  3. ssh到ubuntu没颜色

    ssh远程到ubuntu系统, 没有颜色. 原因是 .bashrc 配置没生效. $ echo '. $HOME/.bashrc' > ~/.profile

  4. ZJNU 2342 - 夏华献要回家

    (夏华献在学校也要做一次梦!) 把5的答案手动算出 会发现从学校开始,兔子的数量呈斐波那契数列(第2项开始)增长 假如现在有n盏路灯 那么睡觉的时间可以得到为 但是n有1e18大,明显使用标准数学公式 ...

  5. 挑战目标跟踪算法极限,SiamRPN系列算法解读

    商汤科技智能视频团队首次开源其目标跟踪研究平台 PySOT.PySOT 包含了商汤科技 SiamRPN 系列算法,以及刚被 CVPR2019 收录为 Oral 的 SiamRPN++.此篇文章将解读目 ...

  6. 小程序Java多次请求Session不变

    微信小程序每次请求的sessionid是变化的,导致对应后台的session不一致,无法获取之前保存在session中的openid和sessionKey. 为了解决这个问题,需要强制同意每次小程序前 ...

  7. error_reporting() 设置 PHP 的报错级别并返回当前级别

    error_reporting() 设置 PHP 的报错级别并返回当前级别. 语法 error_reporting(report_level) 如果参数 level 未指定,当前报错级别将被返回.下面 ...

  8. 数组,字符串方法总结 Unicode 数字

    String.prototype.charCodeAt(index) 就是返回字符串中下标单个数值  对应的编码表的10进制表示数值 方法返回0到65535之间的整数,表示给定索引处的UTF-16代码 ...

  9. 剑指offer【09】- 跳台阶

    题目:一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 对于本题,前提只有 一次 1阶或者2阶的跳法. a.如果两种跳法,1阶或者 ...

  10. tensorflow用法记录

    使用 embedding 变量 import tensorflow as tf import numpy as np sess = tf.InteractiveSession() M = list(' ...