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

最新推荐文章于 2025-01-11 02:23:55 发布
最新推荐文章于 2025-01-11 02:23:55 发布
阅读量84 收藏
点赞数
文章标签： html ui javascript JavaScript
版权声明：本文为博主原创文章，遵循 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事件提供丰富的组件和功能，适合复杂交互。通过示例展示了两者如何监听按钮点击事件并显示消息框。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

<!DOCTYPE html>
<html>
<
了解本专栏 订阅专栏 解锁全文
深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
11-06 592
这是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实现原理比较 (
如何使用原生的 JavaScript 代码，触发 SAP UI5 按钮控件的点击事件处理函数
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-26 1093
我的技术交流群里，有朋友提问： 我有个 UI5 按钮，想用原生 js 去触发 click 事件。在 dom 上检测到 click 已经触发了，但是按按钮的动作响应没有发生。请问如何解决，谢谢。 解决这个问题的理论依据：深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件 我写了一个简单的 SAP UI5 应用，index.html 的完整代码贴在本文末尾。 第一个按钮的点击事件处理函数，逻辑为在其显示文本的末尾添加1，比如触发一次后，button text 显
HTML5原生拖放事件的学习与实践
weixin_34008933的博客
04-20 135
前言 之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。 具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。 例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。
html绑定原生事件,给组件绑定原生事件
weixin_42469169的博客
06-01 372
//这里绑定的事件是指的自定义事件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 1503
onclick事件htmlOnClickHandlerhtml元素不加on不会触发事件htmlOnClickjsOnClickaddEventListeneraddEventListener1// JQ点击事件的写法/**$(function(){$("button").click(function(){alert("JQ click 事件");});});**/// 原生js有三种可以触发onc...
html事件原理,JavaScript之事件原理完整篇
weixin_29031161的博客
05-30 418
导航目录html原生事件自定义事件node中的自定义事件前端框架的自定义事件一、html原生事件1. 概念观察者模式被观察者：特定事件。触发该事件的对象为：目标对象Target观察者：观察了该特定事件的对象，currentTarget(站在事件流角度来理解)事件Event// 观察者模式被观察者：特定事件。触发该事件的对象为：目标对象Target观察者：观察了该特定事件的对象，currentTar...
原生DOM中的事件（事件流、事件委托）
一碗周
12-11 1876
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第四十四篇-《原生DOM中的事件》 写在前面 事件是什么 所谓事件，就是浏览器告知JavaScript程序用户的行为，并且会提供一个自动加载某种动作（例如：运行一些代码）的机制。例如：如果用户在网页上点击一个按钮，显示一个信息框来响应这个动作。 在HTML中，时间在浏览器窗口中被触发并且通常被绑定到窗口内部的待定部分——可能是一个元素、一系列元素、被加载到这个窗口的HTML代码或.
JavaScript与前端框架Semantic UI
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
01-11 756
Semantic UI是一个基于LESS的前端框架，它通过类来定义样式，使得HTML结构更加语义化。其设计目标是让开发者能够以最简单的方式构建出高质量的用户界面。Semantic UI不仅提供了大量的预定义组件，还支持通过主题变量进行深度自定义。
基于JavaScript和CSS的Semantic Ui管理模板Stagb
02-23
Semantic UI 是一个流行的开源前端框架，它以语义化的方式设计HTML类名，使得开发者能够更直观地理解代码含义，从而提升开发效率和代码可读性。Stagb 是一个基于 Semantic UI 的管理模板，利用JavaScript和CSS技术，...
页面生命周期：DOMContentLoaded，load，beforeunload，unload
LeviDing的博客
12-16 1603
DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HT...
【记录】原生html中 点击事件onclick失效的情况
weixin_41492957的博客
12-08 1841
form标签中， button 无法绑定onclick事件
原生html 绑定事件
weixin_73140145的博客
08-30 711
移除事件监听 .removeEventListener('事件'，回调函数，捕获或冒泡)3：添加事件 监听 选择到元素.addEventListener('事件'，回调函数，捕获或冒泡)2：选择到元素.onclick= function(){}1：行内直接绑定 onclick=""...
关于使用semantic UI的按钮组件时需要注意的事情
imyLove7的博客
04-11 717
今天做表单测试时，刚开始还没有任何问题。在我做了一些改动之后，出现了一个问题：表单会重复提交两次，我进行了简单的debug之后没有发现哪里不对，上网搜索一番之后，有人说是 button 标签的默认 submit 方式提交，和JavaScript方式的提交（进行一些表单验证的JS），我寻思着我也没有用JS表单验证。 然后我就发现，提交按钮我用的是 button 标签，该标签class类中有“but...
js自定义事件
@黄小泽的个人博客
05-23 1727
HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。 下面的ImgsLoader工具类，可以实现多图片预加载。   &lt;script src="ImgsLoader.js"&gt;&lt;/script&gt;   然后将图片路径放到一个数组imgs中，然后调用load（imgs）方法即可，如   var ...
Semantic UI 中Checkbox的选中等事件
nnn_net的博客
12-29 5001
Semantic UI Checkbox
Semantic UI中的验证控件的事件的使用
weixin_30826095的博客
04-03 298
1.Semantic UI中的验证控件，功能挺不错的，中文官网的文档写的都比较详细了，我再这里就不再进行重复了，主要是想说一下它的事件的使用方法，这个可能有部分朋友刚开始接触的时候不太了解 注意看这几个事件：前两个是对于字段验证通过和失败之后的事件的调用，后两个是对整个form是否都验证通过或者失败时调用的事件，于是我们在调用的时候可以这么写 function login(...
semantic-ui懒方法使用
弱小和无知不是生存的障碍 傲慢才是！
10-26 2426
先去 下载地址 然后 &lt;link rel="stylesheet" href="semantic.min.css"&gt; &lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="semantic.min.js"&gt;&lt;/script&gt; 就O
Semantic UI 的基本使用（二）：具体案例
05-06 7327
1、网格<div class="ui grid"> <div class="four wide column">1</div> <div class="four wide column">2</div> <div class="four wide column">3</div> <div class="four wide column">4</div> </div>2、标签页<div
HTML5+ - 窗口事件及原生dom事件
yzp0112的博客
05-20 5045
详细信息 addEventListener 添加事件监听函数 document.addEventListener( event, callback, capture ); 参数： event: ( DOMString ) 必选 要添加监听的事件类型，可取下面面列出的所有事件常量 callback: ( EventTrigCallback ) 必选 扩展API加载完毕触发的回调函数 capt...
美味鸡尾酒食谱博客：便捷的食谱收集与食谱生成指南
3. 鸡尾酒食谱平台：该平台是一个用于收集和分享鸡尾酒食谱的博客网站，其前端界面使用了ReactJS和SemanticUI进行构建。这样的平台方便了食谱的分类、搜索和浏览，为用户提供了便捷的食谱管理服务。 4. Torch和LSTM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值