首页 > 其他分享 >BootstrapBlazor调用浏览器全局事件

BootstrapBlazor调用浏览器全局事件

时间:2023-08-06 11:33:28浏览次数:41  
标签:调用 浏览器 Description BootstrapBlazor 枚举 事件

BootstrapBlazor组件库调用浏览器全局事件

有时候blazor开发的时候可能会使用一些浏览器的全局事件,但是blazor默认没有提供相关的方法去调用,只能通过js。

BootstrapBlazor组件库为我们提供了封装好的方法可以很方便的去调用。

[Inject]
[NotNull]
private IJSRuntimeEventHandler? JSRuntimeEventHandler { get; set; }

protected override async Task OnAfterRenderAsync(boolfirstRender)
{
    if (firstRender)
    {
        await JSRuntimeEventHandler.RegisterEvent(DOMEvents.Scroll);
        JSRuntimeEventHandler.OnScroll += OnScroll;
    }
}

private async void OnScroll()
{
    await ...
}

这样就成功订阅了一个浏览器的全局滚动事件

下面是支持的事件列表

public enum DOMEvents
{
    /// <summary>
    /// Click 事件枚举
    /// </summary>
    [Description("click")]
    Click,
    /// <summary>
    /// Dblclick 事件枚举
    /// </summary>
    [Description("dblclick")]
    Dblclick,
    /// <summary>
    /// Mouseup 事件枚举
    /// </summary>
    [Description("mouseup")]
    Mouseup,
    /// <summary>
    /// Mousedown 事件枚举
    /// </summary>
    [Description("mousedown")]
    Mousedown,
    /// <summary>
    /// Contextmenu 事件枚举
    /// </summary>
    [Description("contextmenu")]
    Contextmenu,
    /// <summary>
    /// Mousewheel 事件枚举
    /// </summary>
    [Description("mousewheel")]
    Mousewheel,
    /// <summary>
    /// DOMMouseScroll 事件枚举
    /// </summary>
    [Description("dOMMouseScroll")]
    DOMMouseScroll,
    /// <summary>
    /// Mouseover 事件枚举
    /// </summary>
    [Description("mouseover")]
    Mouseover,
    /// <summary>
    /// Mouseout 事件枚举
    /// </summary>
    [Description("mouseout")]
    Mouseout,
    /// <summary>
    /// Mousemove 事件枚举
    /// </summary>
    [Description("mousemove")]
    Mousemove,
    /// <summary>
    /// Selectstart 事件枚举
    /// </summary>
    [Description("selectstart")]
    Selectstart,
    /// <summary>
    /// Selectend 事件枚举
    /// </summary>
    [Description("selectend")]
    Selectend,
    /// <summary>
    /// Keydown 事件枚举
    /// </summary>
    [Description("keydown")]
    Keydown,
    /// <summary>
    /// Keypress 事件枚举
    /// </summary>
    [Description("keypress")]
    Keypress,
    /// <summary>
    /// Keyup 事件枚举
    /// </summary>
    [Description("keyup")]
    Keyup,
    /// <summary>
    /// Orientationchange 事件枚举
    /// </summary>
    [Description("orientationchange")]
    Orientationchange,
    /// <summary>
    /// Touchstart 事件枚举
    /// </summary>
    [Description("touchstart")]
    Touchstart,
    /// <summary>
    /// Touchmove 事件枚举
    /// </summary>
    [Description("touchmove")]
    Touchmove,
    /// <summary>
    /// Touchend 事件枚举
    /// </summary>
    [Description("touchend")]
    Touchend,
    /// <summary>
    /// Touchcancel 事件枚举
    /// </summary>
    [Description("touchcancel")]
    Touchcancel,
    /// <summary>
    /// Pointerdown 事件枚举
    /// </summary>
    [Description("pointerdown")]
    Pointerdown,
    /// <summary>
    /// Pointermove 事件枚举
    /// </summary>
    [Description("pointermove")]
    Pointermove,
    /// <summary>
    /// Pointerup 事件枚举
    /// </summary>
    [Description("pointerup")]
    Pointerup,
    /// <summary>
    /// Pointerleave 事件枚举
    /// </summary>
    [Description("pointerleave")]
    Pointerleave,
    /// <summary>
    /// Pointercancel 事件枚举
    /// </summary>
    [Description("pointercancel")]
    Pointercancel,
    /// <summary>
    /// Gesturestart 事件枚举
    /// </summary>
    [Description("gesturestart")]
    Gesturestart,
    /// <summary>
    /// Gesturechange 事件枚举
    /// </summary>
    [Description("gesturechange")]
    Gesturechange,
    /// <summary>
    /// Gestureend 事件枚举
    /// </summary>
    [Description("gestureend")]
    Gestureend,
    /// <summary>
    /// Focus 事件枚举
    /// </summary>
    [Description("focus")]
    Focus,
    /// <summary>
    /// Blur 事件枚举
    /// </summary>
    [Description("blur")]
    Blur,
    /// <summary>
    /// Change 事件枚举
    /// </summary>
    [Description("change")]
    Change,
    /// <summary>
    /// Reset 事件枚举
    /// </summary>
    [Description("reset")]
    Reset,
    /// <summary>
    /// Select 事件枚举
    /// </summary>
    [Description("select")]
    Select,
    /// <summary>
    /// Submit 事件枚举
    /// </summary>
    [Description("submit")]
    Submit,
    /// <summary>
    /// Focusin 事件枚举
    /// </summary>
    [Description("focusin")]
    Focusin,
    /// <summary>
    /// Focusout 事件枚举
    /// </summary>
    [Description("focusout")]
    Focusout,
    /// <summary>
    /// Load 事件枚举
    /// </summary>
    [Description("load")]
    Load,
    /// <summary>
    /// Unload 事件枚举
    /// </summary>
    [Description("unload")]
    Unload,
    /// <summary>
    /// Beforeunload 事件枚举
    /// </summary>
    [Description("beforeunload")]
    Beforeunload,
    /// <summary>
    /// Resize 事件枚举
    /// </summary>
    [Description("resize")]
    Resize,
    /// <summary>
    /// Move 事件枚举
    /// </summary>
    [Description("move")]
    Move,
    /// <summary>
    /// DOMContentLoaded 事件枚举
    /// </summary>
    [Description("dOMContentLoaded")]
    DOMContentLoaded,
    /// <summary>
    /// Readystatechange 事件枚举
    /// </summary>
    [Description("readystatechange")]
    Readystatechange,
    /// <summary>
    /// Error 事件枚举
    /// </summary>
    [Description("error")]
    Error,
    /// <summary>
    /// Abort 事件枚举
    /// </summary>
    [Description("abort")]
    Abort,
    /// <summary>
    /// Scroll 事件枚举
    /// </summary>
    [Description("scroll")]
    Scroll
}

标签:调用,浏览器,Description,BootstrapBlazor,枚举,事件
From: https://www.cnblogs.com/codecopier/p/17609206.html

相关文章

  • BootstrapBlazor组件库更优雅的调用js方法
    BootstrapBlazor组件库更优雅的调用js方法在blazor开发中,有时候需要去调用js代码来处理一些逻辑。使用BootstrapBlazor组件库自带的JSModuleAutoLoader特性可以帮助我们更加方便、简洁的去调用js下面我们用Live2DDisplay这个组件为例我们首先在razor文件中继承接口@inheritsB......
  • "静态方法和实例方法" 这两种函数调用的区别
    来看两段代码第一段:publicclassRegexDemo{publicstaticvoidmain(String[]args){func();}privatestaticvoidfunc(){Stringinput="123456";booleanmatches=input.matches("\\d+");Syste......
  • 从read 系统调用到 C10M 问题
    一.前言从上个世纪到现在,工程师们在优化服务器性能的过程中,提出了各种不同的io模型,比如非阻塞io,io复用,信号驱动式io,异步io。具体io模型在不同平台上的实现也不一样,比如io复用在bsd上可以由kqueue实现,在solaris系统上可以由/dev/poll实现。为了实现系统的可移植性,POSIX确保selec......
  • 多个C文件混合编译,涉及函数相互调用,地址传递要注意的!
    tc.h#pragmaoncechar*fun();//main函数调用到这个函数,但是在其他.c中定义,在头文件申明下先tacc.c#include<stdio.h>char*fun(){printf("saDHAKJHFJ\n");inti=100;printf("i=%d\n",i);char*pr=(char*)malloc(100);*pr......
  • python中如何实现链式调用
    Python中实现链式调用通常使用方法链(MethodChaining)技术。方法链可以通过在每个方法末尾返回实例本身(即self)来实现。如:classPerson:def__init__(self,name,age):self.name=nameself.age=agedefset_name(self,name):self.name......
  • 系统调用
    系统调用系统调用是什么:  系统调用是用户在编程时调用的操作系统功能。系统调用的作用:  系统调用是操作系统提供给编程人员的唯一接口;使CPU状态从用户态陷入内核态的唯一途径。典型系统调用举例:每个操作系统都提供几百种系统调用(进程控制、进程通信、文件使用、目录操作......
  • C# 如何调用C++ dll string类型返回
    这篇文章主要介绍了C# 如何调用C++ dll string类型返回问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 −目录C#调用C++dllstring类型返回C++端:(定义返回数据为结构体Vector4)C#端:(接收返回的结构体Vector4)C#调用C++dll类型......
  • ITK在C++文件里面,可以这样调用开旁路的函数
    问题:如果直接在c++文件引入开旁路函数POM_AM__set_application_bypass,是编译不通过的(PS:好像是因为开旁路函数是用C写的,和C++不兼容,具体也不是很懂的,有懂的大佬,可以帮忙评论解答下) 解决方法:在c++文件前面加上这行extern"C"intPOM_AM__set_application_bypass(logicalbypa......
  • 函数(void *) 被谁调用了——图像采集卡经验总结
    一块图像采集卡上有两个CameraLink接口,程序里“采集卡”理解为:一个接口就是一个采集卡。即工控机上插一块,就是两个采集卡对象。【问题】函数(void*)被谁哪个采集卡调用了?下面通过IKap、Matrox、Silicon三个采集卡的案例来理解1、2、3、Windows的创建线程函数,LPVOID其实......
  • BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中
    BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中BootstrapBlazor版本更新到7.9.0后,Menu组件出现首页同时被选中的情况默认首页/路径是选中状态,但是当选中其他路径后,首页路径还是选中状态。这是因为在BootstrapBlazor组件最新版中支持了一个新特性。可......