js绑定点击事件的方法

点击按钮的三种方式
方式一:给对象的属性赋值

注意点:由于是将函数(function)赋值给了一个对象(oBtn)的属性(onclick),所以后赋值的会覆盖先赋值的。

    oBtn.onclick = function () {console.log("666");}oBtn.onclick = function () {console.log("777");}只打印777,不打印666
方式二:

通过addEventListener方法添加。
需要给addEventListener方法传入两个参数:

  • 参数一:执行的事件.
  • 参数二:事件发生后的回调方法。
  • 注意点:
    1.事件名称不需要添加on
    2.后添加的不会覆盖先添加的
    3.只支持最新的浏览器IE9及以上。
  •     oBtn.addEventListener("click", function () {console.log(666);})oBtn.addEventListener("click", function () {console.log(777);})
    
    方式三:低版本的浏览器支持的方法
  • 注意点:
    1.事件名称需要添加on
    2.后添加的不会覆盖先添加的
    3.只支持IE9以下的浏览器
  •     oBtn.attachEvent("onclick", function () {console.log(666);})oBtn.attachEvent("onclick", function () {console.log(777);})
    

    除了以上三种方法以外还有一种简便方式

  • 布局html页面,放入一个button按钮即可。<button id="btn">我是按钮</button>
    1
    获取button按钮var oBtn = document.getElementById("btn");
    即可执行点击事件

    希望可以帮到大家

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云免费证书过期更换证书操作步骤:

阿里云证书过期更换证书操作步骤&#xff1a; 登录阿里云控制台&#xff0c;搜索ssl证书&#xff0c;选择免费证书 点击创建证书&#xff0c;输入域名点确定&#xff0c;然后点击证书申请 选择文件验证方式&#xff0c;提交申请 下载验证文件fileauth.text到&#xff0c;解压后…

OpenHarmony实战:命令行工具hdc安装应用指南

一、工具概述 hdc&#xff08;OpenHarmony Device Connector&#xff09;是为开发人员提供的用于设备连接调试的命令行工具&#xff0c;该工具需支持部署在 Windows/Linux/Mac 等系统上与 OpenHarmony 设备&#xff08;或模拟器&#xff09;进行连接调试通信。 简言之&#xf…

XenCenter 2024 导出虚拟机

选择导出 选择需要导出的虚拟机 导出位置&#xff0c;导出格式&#xff0c;名称 EULA 文档&#xff0c;根据自己需求配置 OVA是否需要加密验证&#xff0c;自己需要看&#xff0c;是否单独的OVA 确认导出配置&#xff0c;等待导出完成。 本地目录查看导出完成

05 过滤器

文章目录 Filter01.javaFilter02.javaFilter03.javaFilter04.java Filter01.java package com.aistart.filter;import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRes…

【REP】hrms-ERPNext 容器安装配置

需要安装frappe ——>ERPNext ——>hrms https://github.com/frappe/hrms 安装 dokcer compose cd /usr/local/bin/ wget https://github.com/docker/compose/releases/download/v2.2.3/docker-compose-linux-x86_64 mv docker-compose-linux-x86_64 docker-compose …

Isaac sim的一些例程

一、standalone_examples 里面有AMR自主导航的例子&#xff0c;jetbot强化学习的例子等等&#xff1b; 二、 Simulated -> Demo Scenes &#xff08;physics demo scenes&#xff09; 这个里面有很多物理场景演示&#xff0c;如各种形态车辆&#xff0c;关节机器人&#xf…

亚远景科技-ASPICE评估输入

评估输入应在评估的数据收集阶段之前确定&#xff0c;并得到评估发起人的批准。 评估输入的任何更改都应征得发起人或发起人授权人的同意&#xff0c;并记录在评估记录中。 评估输入至少应明确以下内容&#xff1a; 原文链接&#xff1a;ASPICE评估-ASPICE评估输入-亚远景

拼多多跨境电商Temu:1688选品进货新思路

Temu&#xff0c;作为拼多多推出的跨境电商平台&#xff0c;自2022年9月正式上线以来&#xff0c;迅速在全球市场上崭露头角。这个平台秉承了拼多多的理念&#xff0c;致力于通过社交电商模式&#xff0c;为全球消费者提供物美价廉的商品。它不仅是一个购物平台&#xff0c;更是…

算法题 — 排列硬币

总共有 n 枚硬币&#xff0c;将它们摆成一个阶梯形状&#xff0c;第 k 行就必须正好有 k 枚硬币。 给定一个数字 n&#xff0c;找出可形成完整阶梯行的总行数。 n 是一个非负整数&#xff0c;并且在 32 位有符号整型的范围内。 暴力算法&#xff1a; public static int arr…

智能之选:ChatGPT助力你撰写高水平学术论文

ChatGPT无限次数:点击直达 智能之选&#xff1a;ChatGPT助力你撰写高水平学术论文 作为CSDN网站上的优质创作者&#xff0c;我们时常需要撰写高质量的学术论文来分享我们的观点和研究成果。然而&#xff0c;论文写作并非易事&#xff0c;常常需要消耗大量时间和精力。在这个信息…

inBuilder 低代码平台新特性推荐 - 第十七期

今天来给大家带来的是 inBuilder 低代码平台特性推荐系列第十七期——如何在列表上添加图片。 一、 场景介绍 在表单开发的业务场景中&#xff0c;会有需要在列表上显示图片的场景&#xff0c;本文以车辆登记信息场景为例&#xff0c;介绍如何在列表上添加图片的开发过程。 …

linux离线安装NodeJs

一、官方下载 地址&#xff1a;Node.js — Download Node.js 选择linux系统版本 为了防止安装过程出现一些适配问题&#xff0c;我没有选择下载最新版&#xff0c;实际应该下载你的前端所用的nodejs版本 未完待续。。

C++ map 常用部分

文章目录 定义及初始化一些基本操作插入查找删除遍历 定义及初始化 #include <map>map<string, int> m1; m1[first]7;map<string,int> m2 {{"first",1}, {"sec",2}, {"trd",3} };map<string, int> m3; m3.insert({ &q…

GPT-5:更强的ChatGPT!将在高级推理功能上实现重大进步!GPT-5有哪些功能作用?

自 Claude 3 发布以来&#xff0c;外界对 GPT-5 的期待越来越强。毕竟Claude 3已经全面超越了 GPT-4&#xff0c;成为迄今为止最强大模型。 对于即将发布的GPT-5&#xff0c;有哪些期待&#xff1f; 目前来说&#xff0c;GPT-5的将具备哪些新能力&#xff1f; GPT-5性能进步…

C语言求解最大公约数(欧几里得算法的应用)

今天我们来看看两个数的最大公约数怎么求&#xff0c;话不多说之间开干&#xff01; 代码1&#xff08;呆呆的暴力求解&#xff09; #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() {int x, y;printf("请输入两个正整数&#xff1a;>");sc…

Python是解释型语言,为啥还有 __pycache__ 文件呢?为啥还有.pyc 文件呢?

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 …

【算法集训】基础算法:双指针

344. 反转字符串 // 双指针思路 void reverseString(char* s, int sSize) {int i 0,j sSize - 1;while(i < j) {char tmp s[i];s[i] s[j];s[j] tmp;i , j --;} }392. 判断子序列 // 双指针 bool isSubsequence(char* s, char* t) {// 定义s和t的下标指针int i 0, j …

使用Java流API构建树形结构数据

简介&#xff1a; 在实际开发中&#xff0c;构建树状层次结构是常见需求&#xff0c;如组织架构、目录结构或菜单系统。本教案通过解析给定的Java代码&#xff0c;展示如何使用Java 8 Stream API将扁平化的菜单数据转换为具有层级关系的树形结构。 1. 核心类定义 - Menu Data…

【图论】【拓扑排序】1857. 有向图中最大颜色值

本文涉及的知识点 图论 拓扑排序 LeetCode1857. 有向图中最大颜色值 给你一个 有向图 &#xff0c;它含有 n 个节点和 m 条边。节点编号从 0 到 n - 1 。 给你一个字符串 colors &#xff0c;其中 colors[i] 是小写英文字母&#xff0c;表示图中第 i 个节点的 颜色 &#xf…

MySQL进阶-----SQL提示与覆盖索引

目录 前言 一、SQL提示 1.数据准备 2. SQL的自我选择 3.SQL提示 二、覆盖索引 前言 MySQL进阶篇的索引部分基本上要结束了&#xff0c;这里就剩下SQL提示、覆盖索引、前缀索引以及单例联合索引的内容。那本期的话我们就先讲解SQL提示和覆盖索引先&#xff0c;剩下的内容就…