HTML 原生事件与 UI Semantic 事件的比较与使用

最新推荐文章于 2025-08-21 19:09:58 发布

创梦引领

最新推荐文章于 2025-08-21 19:09:58 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/python_bug262/article/details/133591706

JavaScript 专栏收录该内容

313 篇文章 ¥59.90 ¥99.00

订阅专栏

本文探讨了HTML原生事件与UI Semantic事件在JavaScript中处理用户交互的区别。HTML原生事件简单易用，适用于基础操作，而UI Semantic事件提供丰富的组件和功能，适合复杂交互。通过示例展示了两者如何监听按钮点击事件并显示消息框。

HTML 原生事件和 UI Semantic 事件都是在 JavaScript 中处理用户交互的常见方式。它们允许开发人员对网页元素进行监听，并在特定事件发生时执行相应的操作。本文将比较这两种事件，并提供相关的源代码示例。

HTML 原生事件
HTML 原生事件是与 HTML 元素直接相关的事件。开发人员可以通过 JavaScript 代码将事件处理程序附加到 HTML 元素上。当事件被触发时，相关的 JavaScript 代码将被执行。

以下是一个示例，展示如何使用 HTML 原生事件监听按钮的点击事件，并在点击时显示一条消息框：

<!DOCTYPE html>
<html>
<

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

创梦引领

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

11-06

752

这是Jerry 2020年的第80篇文章，也是汪子熙公众号总共第262篇原创文章。系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) UI5 控件渲染机制 (3) HTML原生事件 VS SAP UI5 Semantic事件(本文) (4) UI5控件元数据实现细节 (5) UI5控件的实例数据实现细节 (6) UI5控件数据绑定的实现原理 (7) UI5控件数据绑定的三种模式：One Way，Two Way和OneTime实现原理比较 (

参与评论您还未登录，请先登录后发表或查看评论

让布局自带业务语义的利器：SAP UI5 sap.f.semantic 全面解析与实践

最新发布

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

08-21

118

在很多自由式应用里，团队为了落地 SAP Fiori 设计规范，会一遍遍地琢磨标题栏、页眉、页脚、操作按钮的摆放与顺序。做久了你会发现，真正难的不是把按钮渲染出来，而是让它们在不同项目、不同团队、不同屏幕宽度下都呈现出一致而正确的语义与交互。正是为此而生：它把Fiori 2.0的页面语义抽象为一套可复用的UI5控件与约定，让开发者用更少的代码，交付更一致的体验。官方定义里，是对的增强实现，遵循Fiori 2.0设计规范，把具有业务语义的控件统一定位到标题、分享菜单与页脚等区域。沿着这个线索往下看，语义与。

native-ui:HTML原生UI组件

04-30

native-ui HTML原生UI组件这是一组基于原生HTML的UI组件，兼容性较差(部分组件有polyfill)，部分标签或属性甚至还在草稿阶段，仅供学习和了解，请勿用于生产环境. DEMO仅限Chrome浏览器浏览。 Dialog Progress Collapse Range

HTML5原生拖放事件的学习与实践

weixin_34008933的博客

04-20

150

前言之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。

html绑定原生事件,给组件绑定原生事件

weixin_42469169的博客

06-01

395

//这里绑定的事件是指的自定义事件Vue.component("child", {//这里绑定的事件是指的原生的事件template: "I am a child",methods: {handleChildClick: function() {alert("childClick");//想触发父组件的handleClick必须这样做：this.$emit("click")}}});var vm ...

html原生触发事件,jQ点击事件用原生写的方法.html

weixin_39846186的博客

05-31

1536

onclick事件htmlOnClickHandlerhtml元素不加on不会触发事件htmlOnClickjsOnClickaddEventListeneraddEventListener1// JQ点击事件的写法/**$(function(){$("button").click(function(){alert("JQ click 事件");});});**/// 原生js有三种可以触发onc...

HTML原生UI的实现

weixin_34378045的博客

07-26

1166

HTML5中有很多十分有趣的标签，相比于article/section等这些我们所熟知并且已经应用的标签，还有些标签或者因为兼容性，或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap/Element等UI组件时，常常看到某个标签上会应用一些如role="dialog"的不常见的属性，这是因为HTML语义化的需要。role属性主要供有障碍人士使用，作用是告诉如屏幕朗读程序等辅助程序当前...

JavaScript与前端框架Semantic UI

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

01-11

851

Semantic UI是一个基于LESS的前端框架，它通过类来定义样式，使得HTML结构更加语义化。其设计目标是让开发者能够以最简单的方式构建出高质量的用户界面。Semantic UI不仅提供了大量的预定义组件，还支持通过主题变量进行深度自定义。

基于JavaScript和CSS的Semantic Ui管理模板Stagb

02-23

Semantic UI 是一个流行的开源前端框架，它以语义化的方式设计HTML类名，使得开发者能够更直观地理解代码含义，从而提升开发效率和代码可读性。Stagb 是一个基于 Semantic UI 的管理模板，利用JavaScript和CSS技术，...

html怎么用ui打开,HTML5教程如何使用原生UI

weixin_31452537的博客

06-11

352

本篇教程探讨了HTML5教程如何使用原生UI，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。<原生UI的设计目的HTML和css有一个优势就是灵活的样式设计。在大多数情况下，我们都应该使用HTML+css来负责UI。但是有些情况下，我们发现HTML+css的UI不满足需求。1.绝对置顶HTML的video等元素，以及5+的map等原生元素，这些原生控件的层...

html事件原理,JavaScript之事件原理完整篇

weixin_29031161的博客

05-30

445

导航目录html原生事件自定义事件node中的自定义事件前端框架的自定义事件一、html原生事件1. 概念观察者模式被观察者：特定事件。触发该事件的对象为：目标对象Target观察者：观察了该特定事件的对象，currentTarget(站在事件流角度来理解)事件Event// 观察者模式被观察者：特定事件。触发该事件的对象为：目标对象Target观察者：观察了该特定事件的对象，currentTar...

原生DOM中的事件（事件流、事件委托）

一碗周

12-11

1974

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第四十四篇-《原生DOM中的事件》写在前面事件是什么所谓事件，就是浏览器告知JavaScript程序用户的行为，并且会提供一个自动加载某种动作（例如：运行一些代码）的机制。例如：如果用户在网页上点击一个按钮，显示一个信息框来响应这个动作。在HTML中，时间在浏览器窗口中被触发并且通常被绑定到窗口内部的待定部分——可能是一个元素、一系列元素、被加载到这个窗口的HTML代码或.

页面生命周期：DOMContentLoaded，load，beforeunload，unload

LeviDing的博客

12-16

1768

DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HT...

DOM原生事件概念以及绑定事件解绑事件（含代码解析）

m0_60273757的博客

10-21

672

目录什么是事件？事件三要素事件的执行步骤代码讲解事件对象概念实例高级事件绑定事件绑定HTML元素绑定DOM对象代码讲解解绑事件解绑HTML元素解绑DOM对象代码讲解什么是事件？ HTML 事件是发生在 HTML 元素上的事情。例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件，在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。 ...

【记录】原生html中 点击事件onclick失效的情况

weixin_41492957的博客

12-08

1892

form标签中， button 无法绑定onclick事件

原生html 绑定事件

weixin_73140145的博客

08-30

735

移除事件监听 .removeEventListener('事件'，回调函数，捕获或冒泡)3：添加事件监听选择到元素.addEventListener('事件'，回调函数，捕获或冒泡)2：选择到元素.onclick= function(){}1：行内直接绑定 onclick=""...

关于使用semantic UI的按钮组件时需要注意的事情

imyLove7的博客

04-11

743

今天做表单测试时，刚开始还没有任何问题。在我做了一些改动之后，出现了一个问题：表单会重复提交两次，我进行了简单的debug之后没有发现哪里不对，上网搜索一番之后，有人说是 button 标签的默认 submit 方式提交，和JavaScript方式的提交（进行一些表单验证的JS），我寻思着我也没有用JS表单验证。然后我就发现，提交按钮我用的是 button 标签，该标签class类中有“but...

js自定义事件

@黄小泽的个人博客

05-23

1759

HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。下面的ImgsLoader工具类，可以实现多图片预加载。 <script src="ImgsLoader.js"></script> 然后将图片路径放到一个数组imgs中，然后调用load（imgs）方法即可，如 var ...

Semantic UI 中Checkbox的选中等事件

nnn_net的博客

12-29

5037

Semantic UI Checkbox

基于RESTful路由与SemanticUI的博客应用演示

从标题和描述来看，“使用 SemanticUI 设置样式的简单博客”表明该应用在视觉呈现上采用了 Semantic UI 这一现代化、语义清晰且高度可定制的前端 UI 框架，而“演示 RESTful 路由约定”则强调了其在 API 设计和...