首页 > 软件开发 > HTML >

怎么将点击事件写的html中

来源:互联网 2023-03-16 19:15:49 409

在做前端页面开发时,我们经常会把dom元素的事件统一在js里附加,这样方便管理,维护。但当你没有使用js脚本库时,为了简洁,我们是可以直接在html里添加点击事件的,下面来看一下是怎么处理的。

JeI办公区 - 实用经验教程分享!

JeI办公区 - 实用经验教程分享!

方法/步骤

  • 1

    我们先在html里创建一个按钮。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 2

    很多时候,我们是通过jquery在js文件里为按钮添加事件的。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 3

    添加事件后,运行页面,点击页面上的按钮,可以正常触发事件的。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 4

    但如果你要在html里直接加上事件,也是很简单的,在按钮里加上onclick事件就行了,后面跟着的就是点击后要触发的事件函数。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 5

    我们在脚本里添加事件函数对应的方法和逻辑。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 6

    运行页面,再次点击事件,可以看到也有响应了。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 7

    但如果你同时加上了onclick事件,和jquery的附加事件,后者的事件逻辑会覆盖前者的。因此需要删除其中一个。

    JeI办公区 - 实用经验教程分享!

    JeI办公区 - 实用经验教程分享!

    怎么将点击事件写的html中JeI办公区 - 实用经验教程分享!

  • 7此文章未经许可获取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!JeI办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码