首页 > 编程语言 >用JavaScript实现按钮的事件委托并且区分按钮

用JavaScript实现按钮的事件委托并且区分按钮

时间:2022-11-09 13:33:05浏览次数:46  
标签:btnEle 区分 JavaScript 按钮 var boxEle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <button data-action="remove">移除</button>
        <button data-action="new">新建</button>
        <button data-action="revise">修改</button>
        <button data-action="search">查找</button>
    </div>
    <script>
        var boxEle=document.querySelector('.box')
        boxEle.addEventListener('click',function(e){
            var btnEle=e.target;
            console.log(btnEle.dataset.action);
        })
    </script>
</body>
</html>

 

标签:btnEle,区分,JavaScript,按钮,var,boxEle
From: https://www.cnblogs.com/theYT/p/16873324.html

相关文章

  • Apple开发_给按钮添加系统声音
    1、操作步骤1.1导入framework在工程下的target-BuildPhases--LinkBinaryWithLibraries--添加AudioToolbox.framework1.2代码操作//在头文件中声明......
  • 00017-layui 对话框 layer.open 点击保存,按钮失效,保存完后,再恢复
    00017-layui对话框layer.open点击保存,按钮失效,保存完后,再恢复 原创认真的coder2020-05-3022:28:43©著作权文章标签layui文章分类jQuery前端开发阅读数816......
  • JavaScript函数总结
    定义函数形如functionabs(x){if(x>=0){returnx;}else{return-x;}}或varabs=function(x){if(x>=0){......
  • 18 个杀手级 JavaScript One Lines
    英文|https://javascript.plainenglish.io/18-killer-javascript-one-liners-%EF%B8%8F-b11f0c796024翻译|杨小二1、复制到剪贴板使用navigator.clipboard.writeText......
  • 5 个 JavaScript 字符串操作库
    英文|https://blog.bitsrc.io/5-string-manipulation-libraries-for-javascript-9ca5da8b4eb8翻译|杨小二使用字符串可能是一项繁琐的任务,因为有许多不同的用例。例如,将......
  • JavaScript基础
    一、JavaScript基础(一)变量和数据类型1、JavaScript介绍​ 1)JavaScript是什么?​ JavaScript是运行在客户端(浏览器)的编程语言,实现人机交互。​ 2)作用​ 网页特效(监听......
  • JavaScript
    JavaScriptJS基础语法1.JS三部分:ECMAScript:规定了基础语法DOM:文档对象模型BOM:浏览器对象模型2.书写位置:内嵌式:所以的js中的代码都是单引号行内式外部式:......
  • 点击按钮复制
    使用navigator提供的剪贴板能力复制 exportconstuseCopy=async(str:string)=>{try{awaitnavigator.clipboard.writeText(str)cons......
  • JavaScript中的箭头函数
    前言本文可以让你了解所有有关JavaScript箭头函数的信息。我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误。你会看到很多例子来说......
  • 用JavaScript实现事件移除,派发,委托
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......