html标签触发方法，标签绑定事件

最新推荐文章于 2025-06-29 16:21:31 发布

温酒煮西瓜

最新推荐文章于 2025-06-29 16:21:31 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html js 事件绑定

本文链接：https://blog.youkuaiyun.com/qq_42795915/article/details/93851865

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍两种常见的JavaScript事件绑定方法：一种是在JS脚本中通过ID选择器绑定，另一种是在HTML标签上直接绑定事件。详细解释了如何使用这两种方法来响应用户交互。

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

html标签触发方法，标签绑定事件

1. js脚本里面通过ID绑定

$('#标签ID').click(function () {
	
})

$(’#标签ID’)就是通过标签ID拿到了标签，下面无论是触发点击事件还是什么，都可以自行操作

2. 在标签上绑定事件

html：
<span  id="id" class="class" onclick="事件名称(参数)" ></span>

js:
function 事件名称(参数) {


}

通常情况下，建议用第一种

以上送给正在学习前端的小白~~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

温酒煮西瓜

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML中绑定点击事件的方式

tylerlee008的专栏

01-22

3万+

HTML中为button绑定事件的方式有五种。例如以下标签： submit 一、使用jquery进行绑定 $('#btn_submit').click(function(){ }); 二、使用原生js绑定，（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Ope

php事件标签,HTML标签伪元素绑定事件的三种方式

weixin_30571837的博客

03-18

215

本篇文章给大家带来的内容是关于HTML标签伪元素绑定事件的三种方式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目中有所有页面都是通过伪元素来展示图标的，将所有页面中图标改成 DOM 元素也不太可行。在网上查了下，大部分都...

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

给HTML标签绑定事件

奔跑的煮玉米

08-04

842

1、在HTML中直接绑定button id="foo" onclick="dosomething()">Barbutton> 2、js绑定：document.getElementById('#foo').addEventListener('click', function() {/* Act on the event */}, false); 第二个参数也可以是

为html元素绑定事件的三种方式

最新发布

gzzeason的博客

06-29

355

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。

终于搞明白标签中绑定事件到底加不加括号了

伯约同学的前端学习之路

02-19

561

终于搞明白标签中绑定事件到底加不加括号了最近有看到文章讲解说用js绑定事件和标签内直接绑定事件的区别，但是比较零散，直说了对应的执行结果，让人看完还是迷迷糊糊，我就专门整理并对比了下区别，做下记录。首先说下事件绑定的三种主要方式： 1、内联模式：将函数名直接作为html标签中属性的属性值。 <button onclick="func()">内联模式</button> 这种方式的缺点就是不符合行为分离的基本规范 2、脚本模式：获取节点并给节点添加属性 var btn = docu

动态生成标签，标签上绑定事件问题

qq_39241421的博客

07-23

548

情景描述：解决办法：动态元素的方法可以用不同于静态方法的方法名来定义。例如：class=“newclass” function loadMore(){ $('.newclass').复制静态元素的方法。}...

JQuery：动态添加标签绑定事件

哈

05-06

3303

说明采用JQuery技术先获取页面元素，然后再在后面追加元素的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。之所以这样原因是因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到。动态添加的标签要事件委托才能获取到节点，具体解决办法：通过on绑定事件（注意使用on绑定事件时，hover无效，因为on的参数只能传一个函数） li...

jQuery动态添加li标签并添加属性和绑定事件方法

10-18

在本例中，我们学习了如何使用`append()`、`attr()`和`on()`方法来实现动态创建`li`标签、添加属性以及绑定事件。这个过程对于构建交互式Web应用是非常基础且重要的步骤。通过这种方式，开发者可以轻松地创建可...

jquery 为a标签绑定click事件示例代码

12-10

在给定的标题和描述中，我们看到如何使用 jQuery 为 HTML 中的 `<a>`（超链接）标签绑定 `click` 事件。下面将详细讲解这个过程，以及涉及到的相关知识点。首先，jQuery 的 `$` 符号是其库的简写形式，它用于选择...

element-ui中select组件绑定值改变,触发change事件方法

10-18

本文将详细解析Element UI中select组件绑定值改变时如何触发change事件的方法。 Element UI是一个基于Vue.js的前端UI框架，它提供了一套完整的组件库以帮助开发者快速构建美观、风格统一的界面。select组件是其中...

VUE解决 v-html不能触发点击事件的问题

12-30

背景：后端返前端html格式的数据，前端用v-html解析渲染，如：<a></a>，a标签能成功渲染，但其绑定的事件无法触发。原因：vue没有将其作为vue的模板解析渲染解决方案：不用v-html而是component模板编译上干货： ...

jQuery 还未生成元素时如何绑定事件？

xzpwo222007的专栏

11-13

1792

很多时候我们可能需要使用JS生成一些数据及部分页面。那么在还没有生成的页面中使用JQuery的click $("#id").click(function() { $("#id").toggle(); });或bind $("#id").bind("click", function () { $("#id").toggle(); });显然是绑定不上的，因为元素还未生成。

如何给html元素的onclick事件传递参数即如何获取html标签的data

u012053925的博客

09-11

1478

某些非text元素，如a、button等用于触发时间的标签可已将要传的数据放在一个属性中，如data，这个属性必须是不影响样式的，可以使用任意非html定义的名字命名属性，然后将数据传到属性中，<button data="123" id="but" onclick="fun()">按钮</button>然后通过attr这个方法获取属性内容$(‘#but’).attr(‘data’) 其实完全可以直

jQuery为相同id的标签添加相同的事件

weixin_43755104的博客

07-23

1329

文章目录场景例如:写了一个通用的顶部返回栏好几个页面公用，无论点击那个页面，都能返回上一个页面当为同一个标签添加相同id相同事件时只有第一个生效解决如下 jQuery $(function(){ $("[id = delete]").click(function(){ alert("hi"); }); }); id为你写的id 选择具有相同 CSS class的元素，就要用class 选择器。建议用class选择器 html页面确实不应该有相同id的元素，还是用class合

动态生成的html元素绑定click事件

极客神殿

04-25

2008

第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定

如何对动态加载的标签绑定事件

shuang7924的专栏

08-30

791

动态加载的标签，事件不能用bind,需要使用on 来绑定注册事件后台方法 /// <summary> /// 获取系统花色尺码信息 /// </summary> /// <param name="data"></param> /// <returns></ret..

HTML控件如何绑定方法

鸭梨的博客

02-06

1002

HTML控件绑定方法的选择取决于项目的规模、复杂度以及开发团队的技术栈。方法优点缺点直接在HTML中使用事件属性简单直观，易于上手不符合现代开发最佳实践，维护困难使用灵活且推荐，支持动态绑定初学难度较高，需手动管理事件处理函数使用框架或库（如jQuery）简化开发流程，提高代码可读性和跨浏览器兼容性需引入第三方库，增加页面加载时间使用现代框架（如Vue.js）数据驱动视图更新，组件化开发能力强学习曲线陡峭，需配置构建工具事件委托提高性能，减少事件处理函数数量。

html中＜button＞绑定点击事件的三种方法