事件抛发

一、事件侦听和抛发
必须先侦听后抛发

document.addEventListener("自定义事件",anhaoHandler);

// new Event()指创建一个事件对象
var  evt=new Event("自定义事件");
evt.a=10;
// 向document抛发新建的event事件
document.dispatchEvent(evt);

function anhaoHandler(e){
    console.log(e===evt);//打印结果true
    console.log(e.a);//打印结果10
}

作用1:解耦合

// 高耦合
// 烂代码
var obj1={
    a:function(){
        obj2.d(5);
    },
    b:function(sum){
        console.log(sum)
    }
}

var obj2={
    c:function(){
        obj1.b(10);
    },
    d:function(s){
        console.log(s);
    }
}

// 对象间的数据传递
obj1.a();//5
obj2.c();//10
// 解耦
var obj1={
    a:function(){
        // this  对象的方法中this就是该对象自身,这里this就是obj1
        document.addEventListener("aaa",this.b);
    },
    b:function(e){
        // 传到这里
        console.log(e.s);
    }
}

var obj2={
    v:10,
    c:function(){
        var s=5;
        var evt=new Event("aaa");
        evt.s=s;
        document.dispatchEvent(evt);
    },
    d:function(){

    }

}

// 打算执行obj2.c 将局部变量5传递给obj1的方法b中

obj1.a();
obj2.c();//打印结果5

二、jQuery中的事件抛发

$(document).on('abc',a,function(e,obj){
      console.log(e,a,obj);
     });
$(document).trigger('abc',{a:1,b:[1,2,3]});

jQuery中没有dipatchEvent方法
trigger抛发事件,类似于dipatchEvent
事件抛发过程中是可以传参的
(原生事件中事件本身是不能有第二个参数的,
但在jq中可以有第二个参数)
如果传参是数组,事件接收函数中从第二位参数向后对应数组的每个元素
如果传参使用的是对象或者其他数据,事件接收函数中只有第二位参数可以接收
不支持事件抛发时多个数据直接传参,也就是说trigger函数只有两个参数,第一个是事件类型,第二个是要传的参数

事件传参有两个
1、事件触发前传参,侦听时传入的参数
2、事件触发时传参,抛发事件时传入的参数

abc();
function abc(){
   var a=1;
  //  这个a就是事件触发前传参
   $(document).on("abc",a,abcHandler);
   $(document).on("click",clickHandler);
}

function abcHandler(e,b,c){
  // console.log(e.data),这个就是事件触发前传参的a
  // console.log(b,c);这个b和c就是抛发事件时传参b和c
  console.log(e.data);
  console.log(b,c);
}

function clickHandler(){
   var b=3;
   var c=5;
  $(document).trigger("abc",[b,c])
}

三、nodejs中的events内置模块

const events = require('events');

// events模块是一个类

class MyEvent extends events {}

let ev = new MyEvent();

ev.on('sayHi', function() { // 监听事件
    console.log('hi');
});

ev.emit('sayHi'); // 用于触发事件

eventEmitter.emit() 方法可以传任意数量的参数到监听器函数。 当监听器函数被调用时, this 关键词会被指向监听器所绑定的 EventEmitter 实例。

const events=require('events');

// console.log(events);//是一个类
class MyEvent extends events{};//继承
let evt=new MyEvent();//实例化对象

evt.on('sayhi',function(a,b){//监听事件
    console.log(a,b,this);
    /* aaa bbb MyEvent {
        _events: [Object: null prototype] { sayhi: [Function] },
        _eventsCount: 1,
        _maxListeners: undefined,
        [Symbol(kCapture)]: false
    } */
});

evt.emit('sayhi','aaa','bbb');
### 实现 Blazor 应用程序中的邮件功能 为了在 Blazor 应用程序中实现送电子邮件的功能,可以采用服务器端的方法来处理实际的邮件送操作。客户端仅负责触该动作并传递必要的数据给服务端。 #### 使用 ASP.NET Core 提供的服务来进行邮件送 ASP.NET Core 支持多种方式配置 SMTP 客户端以支持邮件送。通常情况下,在 `Startup.cs` 或者新的项目结构下的 `Program.cs` 中注册邮件服务是非常常见的做法[^1]。 ```csharp builder.Services.AddScoped<IMailService, MailService>(); ``` 这里假设有一个名为 `IMailService` 接口以及其实现类 `MailService` 来封装具体的邮件送逻辑。 #### 创建 IMailService 接口及其具体实现 定义接口如下: ```csharp public interface IMailService { Task SendEmailAsync(string toAddress, string subject, string body); } ``` 接着创建其对应的实现类 `MailService`: ```csharp using System.Net; using System.Net.Mail; public class MailService : IMailService { private readonly ILogger<MailService> _logger; public MailService(ILogger<MailService> logger){ _logger = logger; } public async Task SendEmailAsync(string toAddress, string subject, string body) { try{ var smtpClient = new SmtpClient("smtp.example.com") { Port = 587, Credentials = new NetworkCredential("username", "password"), EnableSsl = true }; await smtpClient.SendMailAsync(new MailMessage("from@example.com", toAddress, subject, body)); } catch(Exception ex){ _logger.LogError(ex.Message); throw; // 可选:重新出异常以便进一步处理 } } } ``` 请注意替换 `"smtp.example.com"`、用户名和密码等信息为你自己的SMTP设置详情。 #### 在 Blazor 页面上调用邮件服务 当用户执行某些特定的操作(比如点击按钮),可以通过注入的方式获取到之前已经注册好的 `IMailService` 并调用相应方法完成邮件送的任务。 ```razor @inject IMailService mailService <button type="button" @onclick="SendEmail">送测试邮件</button> @code { private async Task SendEmail(){ await mailService.SendEmailAsync("test@test.com","主题","正文"); } } ``` 以上代码片段展示了如何在一个简单的按钮点击事件处理器里调用了 `SendEmailAsync()` 方法来向指定地址送一封简单格式化的邮件[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值