大白跟着“菜鸟”学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 ...
随机推荐
- Django-rest-framework 接口实现 限制:(Throttle)
限制:(Throttle) 主要用来限制 单独一个用户的 访问次数 自定义一个 限制类 创建一个Throttle.py(截流)文件 注意 一定要写两个方法 def allow_request(self ...
- Python 特殊函数解析（lambda 函数，map 函数，filter 函数，reduce 函数）
写在之前 今天给大家介绍几个比较特殊的函数,他们具有函数式编程的特点,有人将它们视为 Python 可进行 「函数式编程」 的见证,至于什么是函数式编程,不是本篇文章的重点,感兴趣的可以去了解一下.老 ...
- 转://ASM与文件系统之间文件传输
熟悉数据库运维的程序猿都知道,数据的备份重于一切,随着业务的发展,数据量也会越来越大,有时候备份集会放在文件系统上面,有的备份集会放在asm存储上面,实现文件系统到文件系统之间的文件传输很简单,cp或 ...
- 阿里云轻量应用服务器debian8.9用apache多端口搭建多站点
前几天想要再搭个网站玩玩,就用阿里的服务器,apache本地搭建站点和服务器相差不多,然而却踩了大坑,差点耗死在这儿. 先进入apache这个目录,有如下文件夹: 打开ports.conf, 添加 ...
- 用java语言写一个简易版本的登录页面，包含用户注册、用户登录、用户注销、修改密码等功能
package com.Summer_0421.cn; import java.util.Arrays; import java.util.Scanner; /** * @author Summer ...
- face alignment[Ordinary Procrustes Analysis]
人脸识别,大致可以分为以下四个步骤: 人脸检测:从图片中准确定位到人脸,并以矩形框将其裁剪出来: 人脸矫正(对齐): 检测到的人脸,可能角度不是很正,需要使其对齐,比如旋转,缩放: 特征提取:对矫正后 ...
- Luogu P3321 [SDOI2015]序列统计
一道不错的多项式好题.还涉及了一些数论内容. 首先我们看到题目是求乘积模\(m\)的方案数,考虑到这种方案数我们一般都可以用生成函数来做. 但显然卷积的下标有加(FFT,NTT等)有位运算(FWT)但 ...
- 朱晔的互联网架构实践心得S2E5：浅谈四种API设计风格（RPC、REST、GraphQL、服务端驱动）
Web API设计其实是一个挺重要的设计话题,许多公司都会有公司层面的Web API设计规范,几乎所有的项目在详细设计阶段都会进行API设计,项目开发后都会有一份API文档供测试和联调.本文尝试根据自 ...
- python2.x版本与python3.x版本的区别以及运算符
python2.x中: 重复代码,语言不统一,不支持中文 py2中除法获取的都是整形 py2中有long(长整形) print 可以加括号也可以不加括号 range 在py2中打印的结果是列表 py2 ...
- 如何让.net程序支持TLS1.2
1.将.Net FrameWork设置成4.6以上版本 2.在需要的类中引入命名空间 using System.Net; 3.在程序调用接口(如支付)的地方,加一段代码即可 System.Net.Se ...