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. POJ 1160:Post Office 邮局经典DP

    Post Office Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17168   Accepted: 9270 Desc ...

  2. 新iPhone要推出双卡双待这事是真的吗?

    自2007年发布以来,iPhone似乎一直都是"异类"--以自己独特的方式走着一条引领智能手机前进的路!如,在当年遍地按键键盘的年代,iPhone以触摸屏的奇葩姿态引领了新潮流:刚 ...

  3. JavaWeb乱码问题及统一全站编码(通过Filter实现)

    1. public class CharacterFilter implements Filter { private String characterEncoding = null; FilterC ...

  4. Swift 中调试状态下打印日志

    首先我们应该知道Swift中真个程序的入口就是在AppDelegate.swift中.所以在打印日志在 AppDelegate.swift中是这样的 import UIKit @UIApplicati ...

  5. iOS 中的延时操作方法

    1. dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_q ...

  6. mysql出现 too many connections

    出现这个问题的原因网上大致都是说这三种 1.慢sql 2.大量持久性的连接 3.程序没有及时关闭连接 解决方式 mysql -u 账号 -p 输入密码 show processlist; kill掉s ...

  7. 查看docker的挂载目录

    docker inspect container_name | grep Mounts -A 20docker inspect container_id | grep Mounts -A 20

  8. mysql 启动报错Host name could not be resolved解决办法

    mysql 启动报错信息如下: [root@xxx ~]# 2018-01-26 17:06:35 33 [Warning] Host name 'bogon' could not be resolv ...

  9. uni-app文章详情-富文本展示 优雅展示代码块

    在uni-app开发中,开发一个资讯详情页面,详情里包含图片和代码块.这时候用简单的rich-text控件已经不够用了.用官方demo里的html-parser.js也无法很好的展示代码区域.这个时候 ...

  10. Spring Boot 中集成 Shiro

    https://blog.csdn.net/taojin12/article/details/88343990