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

实例来自菜鸟教程：

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. 3-jsp 内置对象、转发与重定向

    1.request:请求常用api: getParameter("name"):获取页面表单单个元素的值 getParameterValues("name"): ...

  2. 吴恩达课后作业学习2-week3-tensorflow learning-1-基本概念

    参考:https://blog.csdn.net/u013733326/article/details/79971488 希望大家直接到上面的网址去查看代码,下面是本人的笔记  到目前为止,我们一直在 ...

  3. ORA-20011 ORA-29913 KUP-11024 GATHER_TABLE_STATS

    --alter 日志Sat Mar 30 22:01:08 2019DBMS_STATS: GATHER_STATS_JOB encountered errors. Check the trace f ...

  4. list.remove操作注意点

    通过源码分析一下结果public class Test { public static void main(String[] args) { // test1(); // test2(); test3 ...

  5. 在使用 Spring Boot 和 MyBatis 动态切换数据源时遇到的问题以及解决方法

    相关项目地址:https://github.com/helloworlde/SpringBoot-DynamicDataSource 1. org.apache.ibatis.binding.Bind ...

  6. ubuntu部分端口命令的使用----开启端口/开启防火墙

    环境系统: ubuntu 工具:xshell + virtualbox 1.测试远程主机的端口是否开启(windows命令行下执行) telnet 192.168.1.103 80 远程访问主机的80 ...

  7. Java NIO5：通道和文件通道

    一.通道是什么 通道式(Channel)是java.nio的第二个主要创新.通道既不是一个扩展也不是一项增强,而是全新的.极好的Java I/O示例,提供与I/O服务的直接连接.Channel用于在字 ...

  8. .net ElasticSearch-Sql 扩展类【原创】

    官方提供的是java sdk,并支持jdbc方式的查询结果输出;但是却没有.net sdk的支持. 开发 ElasticSearch-Sql 第三方开源项目的.net sdk,未来集成入bsf框架.( ...

  9. Postman的Tests标签测试

    接口测试最重要的就是返回数据的检查,一个简单的接口,我们可以肉眼检查返回数据,但接口一旦多起来且复杂,每次的检查都会很费劲,此时我们就需要postman 的tests模块来代替 postman面板: ...

  10. Spring_AOP 记录系统关键操作日志用法

    问题: 系统需要记录用户的关键操作日志,以便后期的系统维护,方便的查看问题,及时排除 分析: (1)保存字段:作为一个日志记录功能,首先数据库新建一张表保存用户的操作关键字段, 用户名,ip,操作描述 ...