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

实例来自菜鸟教程：

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. Linux三剑客-SED

    1.Sed是什么 Sed:字符流编辑器,Stream Editor 2.Sed功能与版本 处理日志文件,日志,配置文件等 增加.删除.修改.查询 sed --version 可以通过man sed 来 ...

  2. Harbor是什么

    第一次听到这个名字应该是2016年初的时候,那是在容器技术已经兴起的,各个容器管理平台正处于群雄逐鹿的时候,mesos.kubernetes.swarm等被国内外各个厂商用来作为容器的管理系统.这个时 ...

  3. [BJOI2015]树的同构

    嘟嘟嘟 判断树的同构的方法就是树上哈希. 如果树是一棵有根树,那么只要从根节点出发dfs,每一个节点的哈希值等于按传统方式算出来的子树的哈希值的结果.需要注意的是,算完子树的哈希值后要先排序再加起来, ...

  4. 2018年尚硅谷《全套Java、Android、HTML5前端视频》

    全套整合一个盘里:链接:https://pan.baidu.com/s/1nwnrWOp 密码:h4bw 如果分类里没有请下载下边那些小项教程链接 感谢尚硅谷提供的视频教程:http://www.at ...

  5. Python：Day26 socket

    SOCKET通信流程 服务器创建套接字链接: 1.创建SOCKET,socket.socket(family=AF_INET, type=SOCK_STREAM, proto=0, fileno=No ...

  6. Java消息队列——JMS概述

    一.什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...

  7. 【vue】css解决“防抖动”——防止页面加载图片抖动

    overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%

  8. 对Android系统权限的认识

    Android系统是运行在Linux内核上的,Android与Linux分别有自己的一套严格的安全及权限机制 Android系统权限相关的内容 (一)linux文件系统上的权限 -rwxr-x--x ...

  9. [Flume][Kafka]Flume 与 Kakfa结合例子（Kakfa 作为flume 的sink 输出到 Kafka topic）

    Flume 与 Kakfa结合例子(Kakfa 作为flume 的sink 输出到 Kafka topic) 进行准备工作: $sudo mkdir -p /flume/web_spooldir$su ...

  10. EntityFramework Core并发深挖详解，一纸长文，你准备好看完了吗？

    前言 之前有关EF并发探讨过几次,但是呢,博主感觉还是有问题,为什么会觉得有问题,其实就是理解不够透彻罢了,于是在项目中都是用的存储过程或者SQL语句来实现,利用放假时间好好补补EF Core并发的问 ...