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

实例来自菜鸟教程：

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. WPF窗体の投影效果

    有时候我们需要给WPF窗体加上一个毛边(投影效果) 我们可以在窗体下加上如下代码 <Window.Effect> <DropShadowEffect BlurRadius=" ...

  2. C和指针 （pointers on C）——第七章：函数（上）

    第七章 函数 这一章对于有一定C的基础的人有一定优秀代码风格的人来说,并非非常虐.关于stdarg宏可能有些陌生.它负责可变參数列表的定义. 总结: 新式风格和旧式风格就不要提了.八百年前的事情. 函 ...

  3. AJAX问题 XMLHttpRequest.status = 0是什么含义

    在调用AJAX的时候遇到了XMLHttpRequest. status为0 的情况,http协议里可是没这个状态码的,众所周知,XMLHttpRequest. Status为HTTP请求状态码,一般为 ...

  4. [国家集训队]happiness

    嘟嘟嘟 就这么建. --- #include<cstdio> #include<iostream> #include<cmath> #include<algo ...

  5. 转://通过udev创建ASM共享磁盘（RAC）

    OS:RedHat EL6.0 Oracle:   Oracle 11gR2 在Oracle 11gR2,构建RAC时可以通过ASM创建asm disk,但是需要安装asmlib相关软件:对于RedH ...

  6. Flask路由报错：raise FormDataRoutingRedirect(request)

    raise FormDataRoutingRedirect(request)FormDataRoutingRedirect: A request was sent to this URL (http: ...

  7. shell去除换行和空格

    #!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ...

  8. Generative Adversarial Nets[pix2pix]

    本文来自<Image-to-Image Translation with Conditional Adversarial Networks>,是Phillip Isola与朱俊彦等人的作品 ...

  9. rabbitMQ教程（五）rabbitmq 指令 以及解决web管理界面无法使用guest用户登录

    安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的账号guest登陆管理控制台,却提示登陆失败. 翻看官方的release文档后,得知由于账号gues ...

  10. NLP是什么

    NLP是什么 而在计算机领域, NLP(Natural Language Processing),也就是人们常说的「自然语言处理」,就是研究如何让计算机读懂人类语言. 这包括,既要能让计算机理解自然语 ...