web-绑定event事件比较

2023-05-16

HTML中为按钮绑定event方式有三种:

eg:<button type="submit" id="btn_submit"> submit </button>

一、使用jQuery进行绑定

$('#btn_submit').click(function(){});


二、使用原生js绑定

document.getElementById("#btn_submit").addEventListener(‘click’, function(){

}, false);


三、在button标签中使用onclick绑定

<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>

然后在<script>标签中定义btnAtion的方法

<script>
        function btnAction()
        { }

</script>


比较:

1、使用jquery绑定,代码简洁,使用方便,事件绑定方式为追加绑定,即绑定多少个方法就执行多少个方法。

在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为

速度的瓶颈,除非页面上绑定事件的元素超过上万个,否则响应速度就不必纠结了,只做个事件绑定还是很快的。

所以在做负载等要求不那么严格的“小程序”,从维护的角度上,建议用jQuery绑定,简单清楚,最容易维护。

2、使用原生js,代码量稍大,事件绑定方式为复写绑定,即绑定多个只保留最后一个绑定的方法。

原生js,这是真正的熟练者的工具,如果能写明白更好。

3、使用onclick标签绑定,代码量不大,但是html前端和js前端混在一起,不易于维护。

原则上HTML代码只能体现网页的结构,具体的行为应该使用JavaScript代码进行绑定。

如果在HTML中用onclick事件混杂js,会导致html前端和js前端的工作混在了一起,难以分离工作任务,

进而难以维护。这种做法临时调试可以,但如果正式成品中不应该出现,

所以不建议使用onclick标签方式进行绑定事件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

web-绑定event事件比较 的相关文章

  • 当指定为对象属性时,IIFE 如何影响其中的此关键字

    var a name Rhona check function return this name console log a check This returns 一个空字符串我希望它返回 Rhona 它没有给出 undefined 或 n
  • 我可以在为服务器提供 API 的同时提供静态文件吗?

    所以我对网络开发还很陌生 现在我和我更加面向网络的朋友开始了一个项目 他向我扔了各种各样的框架 我们正在做 Vuejs jade stylus 和 jeet 对于新手来说 这当然非常令人困惑 因为没有 Vuejs 示例使用 jade 没有
  • 客户端Web - 如何随时获取当前记录ID

    我正在努力 基于工作流程状态的不同权限 https stackoverflow com questions 10994216 different permissions based on workflow state问题 但我正在努力解决这
  • css位置固定根本不起作用

    我正在寻找一个页脚类型的东西布莱克霍利网站 http www blakehawley com它有一些不同的链接等 它应该是横幅样式 我的意思是它应该停留在底部并被修复 div 是 菜单 这是我的 HTML
  • Vaadin 与 Bootstrap

    我计划制作一个应用程序 该应用程序在客户端具有复杂表单和逻辑验证的视图 我计划使用 AJAX 进行提交并具有一些视觉吸引力 我想要那些具有 Bootstrap 和 或 CoffeeScript 和 Vaadin 开发经验的人的推荐 我有两个
  • php 和 html 文件扩展名有什么区别?

    我有一个 php文件包含以下代码 当我将文件的扩展名更改为 html那么它也以同样的方式表现 任何人都可以解释以下内容 为什么文件的行为方式与两个文件的行为方式相同 扩展 两者有什么区别 php and html文件扩展名 php file
  • 根据 $_POST 值填充字段

    我正在寻求有关我试图填写的表格的帮助 我通常会使用 onChange 函数 但我认为这不是一个选择 基本上我有一个
  • 如何判断是哪个控件导致ViewState加载失败?

    我的页面面临 Viewstate 加载问题 页面有一个登录工具来登录管理员和非管理员用户 当非管理员用户登录页面并单击启用了自动回发的复选框时 会出现奇怪的行为 错误详情如下 后来我发现 在左侧的导航面板中 承载链接 侧边栏如下图所示 Se
  • WebLogic Server :: 服务器不支持 J2EE Web 模块规范 3.0 版

    当我尝试使用 WebLogic 11g 10 3 5 服务器运行应用程序时 它显示 服务器不支持 J2EE Web 模块规范 3 0 版 如何克服这个问题 Thanks 使用支持的规范版本 Servlet 2 5 开发您的应用程序 或者使用
  • 将网页中的表格导入 Excel

    我只有中高级的Excel水平和中级的VBA与Excel背景 我想要做的是从链接中显示的网页导入表格 http www admission unmsm edu pe res20130914 A 011 0 html http www admi
  • 构建网站翻译文件

    我在建立网站时多次遇到这个问题 我将以使用 PHP 和 Laravel 为例进行解释 但这个问题在多个平台中都很常见 这已经在几个问题中得到了解决 post1 https stackoverflow com questions 317854
  • 如何在 Laravel 7.x 中从控制器返回视图时传递 cookie?

    在 laravel 7 x 中 有什么方法可以在返回视图时将 cookie 传递给客户端吗 类似于 return view welcome gt cookie name value min 嗯 我做了一些研究 发现有一些方法 我熟悉的两个是
  • 如何将 html 输入到 Flask 中?

    我有这个 html 位
  • 电话链接在 iframe 中不起作用,但在 iOS 9 Web 中的 div 中起作用。如何使电话链接在 iOS 9 safari 中正常工作?

    您好 我正在尝试 iOS9 中 iframe 内的电话链接 iOS9 中的 safari 中无法打开手机应用程序 当我在里面尝试相同的链接时 它就在那里工作 我正在尝试下面的锚标记 将此代码放入 div 中时会打开手机应用程序 但同样的代码
  • 我应该将标签存储在文本字段还是单独的表中?

    我有一个表 其中的行如下所示 id path tags 1 pictures pic1 jpg car bmw 3 pictures pic2 jpg cat animal pussy 4 pictures pic3 png gun 基本上
  • asp.NET 2.0网站无法访问App_Code中的类

    将我的网站部署到服务器后 我在访问课程时遇到问题 请注意 这是一个网络Site不是网络应用 错误是 编译器错误消息 CS0246 找不到类型或命名空间名称 Order 是否缺少 using 指令或程序集引用 版本信息 Microsoft N
  • 在 Tomcat 上部署 Java Web 项目,无需 WAR 或 EAR

    我有一个 Java Web 项目 Struts Spring 在我的本地主机上完美运行 我必须将其部署在我的网站上 但虚拟主机提供的 Tomcat Manager 界面显示 由于安全原因 它无法上传 WAR 文件 当联系技术支持时 我被告知
  • Java selenium - 如何在 TimeoutException 之后正确刷新网页?

    ChromeOptions options new ChromeOptions options addExtensions new File extension 6 2 5 0 crx ZenMate options addExtensio
  • Netty Nio java 中的通信

    我想在 Netty nio 中创建一个具有两个客户端和一个服务器的通信系统 更具体地说 首先 我希望当两个客户端与服务器连接时从服务器发送消息 然后能够在两个客户端之间交换数据 我正在使用本示例提供的代码 https github com
  • 使用 php ping 网站

    我想创建一个 php 脚本 它将 ping 一个域并列出响应时间以及请求的总大小 这将用于监控网站网络 我尝试过curl 这是我到目前为止的代码 function curlTest2 url clearstatcache return if

随机推荐

  • 记录fastboot刷系统中各个img文件

    Android系统adb刷机 在android的各个可用软件中 xff0c adb fastboot是最常用的一种 xff0c 还有一些基本的shell xff0c 作为爱搞机的开发人员来说 xff0c 我们需要经常的进行内核 xff0c
  • Lottie动画学习(Kotlin)

    最近一直在学习kotlin xff0c 又接触到 Lottie 动画 xff0c 网上是Java写的 Lottie动画 xff0c 我用kotlin写了一边 xff0c 发现了一写问题 总结一下 Lottie学习文章 Lottie for
  • Lottie 的相关下载及使用

    Lottie 是 Airbnb 开源的一套动画库 我们可以使用 Adobe After Effects 俗称AE 设计出动画 使用 Lottie提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式 就可以直接运用在 iOS
  • CentOS7下非root账号通过systemctl管理服务需要输入root密码

    问题描述 xff1a 使用普通账号test通过systemctl启动系统服务提示需要输入root密码 xff1a 解决方案一 xff1a 根据上面提示得知权限由polkit进行管理 xff0c 对应的是org freedesktop sys
  • SpringBoot 集成cas5.3 使用JDBC认证并实现自定义加密算法

    今天我们讲解一下CAS的认证方式 xff0c 有JDBC认证 白名单 Whitelist 认证 黑名单 Blacklist 认证 Shiro认证 Rest认证 目前只针对JDBC认证讲解 xff0c 更多抽时间更新 1 JDBC认证 在前面
  • log4j2配置文件详解及实战部分配置

    注 xff1a 原文转载链接出自 xff1a log4j2配置文件详解 牧凡的天空 CSDN博客 log4j2配置文件详解 一 关于配置文件的名称以及在项目中的存放位置 log4j 2 x版本不再支持像1 x中的 properties后缀的
  • 最短路径问题---Dijkstra算法详解

    此文章转载自 xff1a https blog csdn net heroacool article details 51014824 迪杰斯特拉 Dijkstra 算法是典型最短路径算法 xff0c 用于计算一个节点到其他节点的最短路径
  • Linux使用grep指令的时候汉字出现乱码

    今天在使用grep在文件中查找包含特定汉字的数据时总是出现乱码 不管是手动敲进去还是复制粘贴都不行 xff0c 不仅如此添加 删除汉字串等编辑操作也是特别混乱 在网上找了很多解决方案都不靠谱 xff0c 最后用了下面的方法解决啦 才知道是个
  • SQL-mysql设置utf8编码方法

    mysql gt SHOW VARIABLES LIKE 39 character set 39 43 43 43 Variable name Value 43 43 43 character set client latin1 chara
  • windows connect()返回错误的代码10061的解决办法

    即还没有开启服务器端 开启服务器端就可以了
  • Python爬虫(二)——爬取电影天堂,保存下载地址

    首先我们开始要分析一下 xff0c 下载种子我们需要哪几步 xff1a 获取所有电影页的访问地址获取电影页源码提取出下载地址将下载地址保存 首先第一步 xff0c 我们来分析一下电影天堂网站的结构 xff0c 发现他跟我们的古诗文网还是非常
  • [Android 基础] -- SELinux/SEAndroid 实例简述(三) 实例看 SELinux/SEAndroid

    扩展 xff1a 在传统的 Linux 系统中 xff0c 每一个应用程序都对应有一个可执行文件 在这种情况下 xff0c 我们就可以在安全策略中设定一个规则 xff1a 当一个可执行文件加载到一个进程中执行时 xff0c 该进程的安全上下
  • 水浒传水果拉霸类游戏物体旋转思路

    lt p gt 这种模式很常见 xff0c 也可以衍生类似的抽奖系统之类 xff0c 以水浒传为例 xff0c 市面上的水浒传有多种表现形式 xff0c 我见到过主要的两种 xff1a 一种是分为15个格子 xff0c 每个格子之内做单独自
  • 《离散数学》知识点总结

    离散数学 文章目录 离散数学 x1f921 命题 命题概念 x1f412 联结词 x1f6be 范式 x1f615 推理 x1f47b 谓词逻辑 综合复查知识点 x1f921 命题 命题概念 具有唯一真值的陈述句 1 感叹句 疑问句 祈使句
  • Python Scrapy中yield Request的理解

    最近在看 learn scrapy 中的关于爬虫的部分 xff0c 对于parse中的yield Request用法不是很理解 xff0c 现在总结下 lt pre gt lt pre name 61 34 code 34 class 61
  • MS COCO数据集人体关键点评估(Keypoint Evaluation)(来自官网)

    COCO系列文章 xff1a MS COCO数据集目标检测评估 xff08 Detection Evaluation xff09 xff08 来自官网 xff09 MS COCO数据集人体关键点评估 xff08 Keypoint Evalu
  • Unity VR游戏开发干货教程:VR中的交互方式

    游戏程序 平台类型 虚拟VR 程序设计 编程语言 引擎 SDK Unity3D 2D GameRes游资网授权发布 文 王寒 在VR项目中 xff0c 我们需要在用户 凝视 某个物体时将其激活 在VRSamples中 xff0c 我们构建了
  • 汉诺塔算法 ----C++语言递归实现

    起源 汉诺塔 xff08 又称河内塔 xff09 问题是源于印度一个古老传说的益智玩具 大梵天创造世界的时候做了三根金刚石柱子 xff0c 在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘 大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆
  • 解决ubuntu18.04环境下无法调整分辨率的问题

    解决ubuntu18 04环境下无法调整分辨率的问题 问题来源 一般ubuntu环境下不能调整分辨率主要是因为显卡驱动出问题 xff0c 所以本文通过执行显卡驱动相关的操作解决分辨率的问题 解决问题 如果电脑上还没有安装过显卡驱动 参考这篇
  • web-绑定event事件比较

    HTML中为按钮绑定event方式有三种 xff1a eg xff1a lt button type 61 34 submit 34 id 61 34 btn submit 34 gt submit lt button gt 一 使用jQu