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

实例来自菜鸟教程：

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. Scrapy 框架 使用 selenium 爬取动态加载内容

    使用 selenium 爬取动态加载内容 开启中间件 DOWNLOADER_MIDDLEWARES = { 'wangyiPro.middlewares.WangyiproDownloaderMidd ...

  2. WPFのDecorator 、Adorner和AdornerDecorator

    Decorator 和 Adorner 它们都有“装饰品”的意思. Decorator类负责包装某个UI元素,以提供额外的行为.它有一个类型为UIElement的Child属性,其中含有待包装的内容. ...

  3. [JXOI2018]游戏

    嘟嘟嘟 九条可怜竟然有这种良心题,似乎稍稍刷新了我对九条可怜的认识. 首先假设我们求出了所有必须要筛出来的数m,那么\(t(p)\)就只受最后一个数的位置影响. 所以我们枚举最后一个数的位置,然后用组 ...

  4. ganache与metamask

    1.其实ganache其实就相当于一个私有链ganache安装,这个是图形化界面的: 2.(testRpc跟他其实是一个用处,有一个即可,只不过testRpc是非图形化界面.要注意两者都仅运行在內存中 ...

  5. Spring AOP无法拦截Controller中的方法

    想使用AOP Annotation配置Spring MVC的Controller进行拦截, 发现无法拦截Controller的方法, 却可以拦截Service层的方法. 一开始: Spring的配置文 ...

  6. 修改tomcat JVM 大小

    参考:https://blog.csdn.net/mynamepg/article/details/80591348 1.Xms表示初始分配给jvm的内存大小,-Xmx表示最大可分配给jvm的内存大小 ...

  7. mysql查询表结果排序

    要求:将数据表tab1中DeviceName为‘XI003’,'DO107'的数据放在查询结果的前面,同时对其他查询结果进行降序排序 sql语句: SELECT DISTINCT DeviceName ...

  8. Luogu P3703 [SDOI2017]树点涂色

    比较有趣的综合树上问题,刷LCT题单时做的但是发现后面LCT只是起了辅助作用233 首先我们分析每一个操作,\(1\)的定义就让我们联想到了access,我们回忆一下LCT的性质: LCT中每一个sp ...

  9. NLog配置分享

    新建一个文件命名为NLog.Config,然后添加如下代码 <?xml version="1.0" encoding="utf-8" ?> < ...

  10. 使用后台线程BackgroundWorker处理任务的总结

    在一些耗时的操作过程中,在长时间运行时可能会导致用户界面 (UI) 处于停止响应状态,用户在这操作期间无法进行其他的操作,为了不使UI层处于停止响应状态,我们倾向推荐用户使用BackgroundWor ...