若存在两个同名事件，触发事件时，两个事件监听器的回调函数会被按次序先后调用。

实例来自菜鸟教程：

var events=require('events');

var emitter=new events.EventEmitter();

emitter.on('someEvent',function(arg1,arg2){

    console.log('listener1',arg1,arg2);

});

emitter.on('someEvent',function(arg1,arg2){

    console.log('listener2',arg1,arg2);

})

emitter.emit('someEvent','arg1参数','arg2参数');

运行结果：

（图省事把名字命名成同名事件了……）

来猜想一下JS中的同名事件……

呀一下子记不太全JS的事件绑定方法有哪些和区别了……

直接在DOM里绑定事件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>同名事件测试</title>

</head>

<body>

        <button onclick="alert('1')" onclick="alert('2')">点击</button>    //谁会写这种代码啊？？？只是测试测试

</body>

</html>

这样子绑定，结果弹出：1

脚本里绑定：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>同名事件测试</title>

</head>

<body>

        <button>点击</button>

        <script type="text/javascript">

            window.onload=function(){

                var btn=document.getElementsByTagName('button')[0];

                btn.onclick=function(){

                    alert('1')

                }

                btn.onclick=function(){

                    alert('2')

                }

            }

        </script>

</body>

</html>

这样子绑定，结果弹出：　　2

猜猜看这个的结果，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>同名事件测试</title>

</head>

<body>

        <button onclick="alert('1')" onclick="alert('2')">点击</button>

        <script type="text/javascript">

            window.onload=function(){

                var btn=document.getElementsByTagName('button')[0];

                btn.onclick=function(){

                    alert('3')

                }

                btn.onclick=function(){

                    alert('4')

                }

            }

        </script>

</body>

</html>

结果是，弹出：4

直接在DOM里绑定事件和脚本里面绑定的事件有优先级吗？还是说会触发后绑定的。

addeventListener可以同时绑定多个事件，且都会执行：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>同名事件测试</title>

</head>

<body>

        <button onclick="alert('1')" onclick="alert('2')">点击</button>

        <script type="text/javascript">

            window.onload=function(){

                var btn=document.getElementsByTagName('button')[0];

                btn.addEventListener('click',function(){

                    alert('3')

                });

                btn.addEventListener('click',function(){

                    alert('4')

                });

            }

        </script>

</body>

</html>

结果，这里依次弹出 1，3，4  好厉害

大白跟着“菜鸟”学node——同名事件的更多相关文章

  1. Node.js事件的正确使用方法

    前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...

  2. 【跟着大佬学JavaScript】之节流

    前言 js的典型的场景 监听页面的scroll事件 拖拽事件 监听鼠标的 mousemove 事件 ... 这些事件会频繁触发会影响性能,如果使用节流,降低频次,保留了用户体验,又提升了执行速度,节省 ...

  3. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  4. node.js事件轮询（1）

    事件轮询(引用) 事件轮询是node的核心内容.一个系统(或者说一个程序)中必须至少包含一个大的循环结构(我称之为"泵"),它是维持系统持续运行的前提.nodejs中一样包含这样的 ...

  5. Node.js 事件

    Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...

  6. 菜鸟学自动化测试（八）----selenium 2.0环境搭建（基于maven）

    菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...

  7. 从零开始学node(一): nodejs开发环境的配置

    从零开始学node系列(一): nodejs环境安装 一.安装node.js 1. node官网,node安装十分方便快捷,所以这一步还是很顺利的. 2. webstorm是一款强大的前端开发IDE, ...

  8. Node.js 事件循环（Event Loop）介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  9. Node.js事件循环

    Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...

随机推荐

  1. spool

    一.常用设置 set lin 1000 --一行可容纳字符数{80|n};输出大于设置值,则折行显示set wrap on --输出行长度大于设置长度时(set lin n设置);值为on,多余字符另 ...

  2. Python：Day46 Javascript DOM

    history对象: History 对象包含用户(在浏览器窗口中)访问过的 URL.窗口之间是相互独立的. <input type="button" onclick=&qu ...

  3. extjs 中的一些鲜为人知的属性（深渊巨坑）

    1. new Ext.form.FormPanel  组件中,去除边框属性为:baseCls:'my-panel-no-border', 2.当 new Ext.form.FormPanel  嵌套b ...

  4. 面试官问，说一个你在工作非常有价值的bug

    如果你去参考面试,做足了准备,面对面试官员从容不迫,吐沫横飞的大谈自己的工作经历.突然,面试官横插一句:说一个你在工作非常有价值的bug.顿时,整个空气都仿佛都凝固了!“What?”... 我想没几个 ...

  5. face recognition[angular/consine-margin-based][L2-Softmax]

    本文来自<L2-constrained Softmax Loss for Discriminative Face Verification>,时间线为2017年6月. 近些年,人脸验证的性 ...

  6. git冲突Please move or remove them before you can merge

    解决Git冲突造成的Please move or remove them before you can merge git clean -d -fx ""其中x -----删除忽略 ...

  7. 使用Git进行代码管理的心得--github for windows

    首先简述一下Git进行代码管理的情况 我使用的是github for windows,官网下载的速度太慢,所以用了离线安装包.安装之后会有GitHub和GitShell两个软件,其中Github采用图 ...

  8. Python学习总结 10 自动化测试Selenium2

    一, 配置 Selenium2 1 Selenium是什么? Selenium是一个用于Web应用程序测试的工具.Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括I ...

  9. 实现RunOnUiThread和RunOnUiThreadBlock

    现在需要实现一个工具类,RunUtils,这个类中包含runOnUiThread(Context context, Runnable runnable)和runOnUiThreadBlock(Cont ...

  10. PowerMock单元测试踩坑与总结

    1.Mock是什么? 通过提供定制的类加载器以及一些字节码篡改技巧的应用,PowerMock 现了对静态方法.构造方法.私有方法以及 Final 方法的模拟支持,对静态初始化过程的移除等强大的功能. ...