大白跟着“菜鸟”学node——同名事件
若存在两个同名事件，触发事件时，两个事件监听器的回调函数会被按次序先后调用。
实例来自菜鸟教程：
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——同名事件的更多相关文章
- Node.js事件的正确使用方法
前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...
- 【跟着大佬学JavaScript】之节流
前言 js的典型的场景 监听页面的scroll事件 拖拽事件 监听鼠标的 mousemove 事件 ... 这些事件会频繁触发会影响性能,如果使用节流,降低频次,保留了用户体验,又提升了执行速度,节省 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- node.js事件轮询（1）
事件轮询(引用) 事件轮询是node的核心内容.一个系统(或者说一个程序)中必须至少包含一个大的循环结构(我称之为"泵"),它是维持系统持续运行的前提.nodejs中一样包含这样的 ...
- Node.js 事件
Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...
- 菜鸟学自动化测试（八）----selenium 2.0环境搭建（基于maven）
菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...
- 从零开始学node(一): nodejs开发环境的配置
从零开始学node系列(一): nodejs环境安装 一.安装node.js 1. node官网,node安装十分方便快捷,所以这一步还是很顺利的. 2. webstorm是一款强大的前端开发IDE, ...
- Node.js 事件循环（Event Loop）介绍
Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
- Node.js事件循环
Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...
随机推荐
- 使用VMWare虚拟mac系统，设置网络的正确姿势
1. 启动mac虚拟机: 2. 虚拟机-虚拟机设置-网络适配器-选择NAT模式: 3. 打开mac的网络设置,选择使用DHCP模式,并设置DNS服务器为win的DNS: 4. 回到win,控制面板-网 ...
- ansible-playbook 进行批量安装tomcat8
ansible-playbook 进行安装tomcat操作 说明: get_url 中下载的内容直接到目的主机 安装的时候需要指定copy: no,说明需直接从目标主机进行安装包 [root@ans ...
- ElasticSearch(站内搜索） 转发 https://www.cnblogs.com/xibei666/p/5929970.html
简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三者进行组合.Elasticse ...
- Android/Linux boot time分析优化
如果需要优化boot time,就需要一个量化的工具来分析每个阶段的时间消耗.这种类型的优化特别适合使用基于timeline的图表,有着明显的时间顺序.要求不但能给出整个流程消耗的时间,还要能对流程进 ...
- linux内存源码分析 - 内存压缩(实现流程)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 概述 本文章最好结合linux内存管理源码分析 - 页框分配器与linux内存源码分析 -伙伴系统(初始化和申请 ...
- mongodb .explain('executionStats') 查询性能分析(转)
mongodb性能分析方法:explain() 为了演示的效果,我们先来创建一个有200万个文档的记录.(我自己的电脑耗了15分钟左右插入完成.如果你想插更多的文档也没问题,只要有耐心等就可以了.) ...
- 微信小程序获取formId时提示"the formId is a mock one"
微信小程序使用模板消息需要使用表单提交 formId,因此进行了简单的代码测试,在 wxml 文件中创建 form 对象,并在 form 标签中声明属性 report-submit="tru ...
- Leetcode 665. Non-decreasing Array(Easy)
Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...
- c++继承实例
#include <iostream> #include <vector> #include <string> using namespace std; class ...
- 2198: 小P当志愿者送餐
题目描述 在ICPC程序设计大赛期间,小P作为志愿者的任务是给各个学校送盒饭,小P一次最多可以携带M份盒饭.总共有N个学校来参加比赛,这N个学校的休息点在一条笔直的马路边一字排开,路的一头是小P取盒饭 ...