当前位置:Gxlcms > JavaScript > javascript事件接收与发送机制理解(代码示例)

javascript事件接收与发送机制理解(代码示例)

时间:2021-07-01 10:21:17 帮助过:6人阅读

本篇文章给大家带来的内容是关于javascript事件接收与发送机制理解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

其实事件的发送与接收机制很简单,只是没有去思考而已

在node模块中使用的就会比较的多

  1. var events=require('events');
  2. var eventEmitter=new events.EventEmitter();
  3. eventEmitter.on('say',function(name){
  4. console.log('Hello',name);
  5. })
  6. eventEmitter.emit('say','Jony yu');

在vue中也父子组件的传递也采用了事件的发送与接收,emit和on来制作

那么接下来我们来看一看吧

  1. function myEvent() {
  2. this.on = function() {
  3. if (!this.handles) {
  4. this.handles = {};
  5. }
  6. if (!this.handles[eventName]) {
  7. this.handles[eventName] = [];
  8. }
  9. this.handles[eventName].push(callBack);
  10. }
  11. this.emit = function() {
  12. if (this.handles[eventName]) {
  13. for (var i = 0; o < this.handles[eventName].length; i++) {
  14. this.handles[eventName][i](obj);
  15. }
  16. }
  17. }
  18. return this;
  19. }

测试一下

  1. var event1=new Events();
  2. var event2=new Events();
  3. event1.on('say',function(){
  4. console.log('Jony event1');
  5. });
  6. event2.on('say',function(){
  7. console.log('Jony event2');
  8. })
  9. event1.emit('say');
  10. event2.emit('say');
  11. //event1、event2之间的事件监听互相不影响
  12. //
输出结果为'Jony event1' 'Jony event2'

这就是事件发送与接收的机制。

以上就是javascript事件接收与发送机制理解(代码示例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行