js：按钮绑定多个事件的三种方法（js，DOM，jQuery）

1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。

2.DOM可以通过事件监听函数addEventListener绑定事件。

3.Jquery可以通过click方法来绑定事件。

完整代码：

<!DOCTYPE html>
<html lang="en"><head><title>按钮绑定多个事件</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body style="text-align: center;"><h1>按钮绑定多个事件</h1><button id="btn1" onclick="hello();hello();">按钮1</button><button id="btn2">按钮2</button><button id="btn3">按钮3</button><p id="demo-text"></p></body><script type="text/javascript" src="jquery-3.6.0.js"></script><script>function hello(){document.getElementById("demo-text").innerHTML += "hello js!<br/>";//注意换行,使用<br>标签而不是\n}let btn2 = document.getElementById("btn2");//创建btn2对象指向按钮2（对象的“=”不是赋值而是指向，前后是同一个对象）btn2.addEventListener("click",hello);//事件监听函数，第一参数是事件，第二个参数是触发事件调用的函数btn2.addEventListener("click",() => {document.getElementById("demo-text").innerHTML += "hello DOM!<br/>";});//第二个参数可以使用箭头函数直接创建一个新的匿名函数let btn3 = $("#btn3");btn3.click(function(){$("#demo-text").append("<p>hello jQuery!</p><br/>");//append是在当前元素后创建新的元素（新的元素作为当前元素的子元素）})btn3.click(() => {$("#demo-text").after("hellp jQuery!");//after是在当前元素后创建新的文本（新的文本在当前元素中）})</script>
</html>

js：按钮绑定多个事件的三种方法（js，DOM，jQuery）相关推荐

html中＜button＞绑定点击事件的三种方法
<button id = 'btn'>按钮</button> 1.原生写法 document.getElementById('btn').addEventListener('c ...
[js]绑定点击事件的三种方式
绑定点击事件的三种方式使用 onclick 属性(不推荐) <!doctype html> <html lang="en"> <head>&l ...
在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
js按钮绑定点击事件
1.第一种 $("#btn").click(function(){操作 }) 2.第二种 document.getElementById('#foo').addEventListe ...
canvas 判断哪个元素被点击_监听 Canvas 内部元素点击事件的三种方法
canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在"元素"这个概念,他们仅仅是canvas绘制出来的图形.这对于交互开发来说是一个必经障碍,想 ...
node.js中mysql批量插入更新的三种方法
[背景]在项目中遇到一个批量插入数据的需求,由于之前写过的sql语句都是插入一个对象一条数据,于是去网上搜关键词 "sql批量插入"."mysql批量插入"等, ...
js输出数字用千分号分隔的三种方法
第一种方法:将数字转换成字符串进行处理. function formatNumber(num) {var decimalPart = '';num = num.toString();if (num.i ...
JS中阻止冒泡事件的三种方法
冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡. <div class="box"><button c ...

js：按钮绑定多个事件的三种方法（js，DOM，jQuery）

js：按钮绑定多个事件的三种方法（js，DOM，jQuery）相关推荐

最新文章

热门文章