首页 > 其他分享 >解绑事件

解绑事件

时间:2023-08-17 20:12:08浏览次数:19  
标签:点击 事件 解绑 btn click fn

一、事件等级

  • L0(level 0)
    • 事件源.onclick=function(){}
  • L2(level 2)
    • 事件源.addEventListener(事件类型,事件处理函数,是否捕获){}

二、L0事件解绑

  • 重新给赋值为null
    事件源.onclick=null

L2事件解绑

  • 不能使用匿名的回调函数,否则无法解绑
  • 正确解绑方式如下
<!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">
    <title>Title</title>
</head>
<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')

        function fn() {
            alert('点击了')
        }
        //绑定事件
        btn.addEventListener('click', fn)
        //解绑事件
        btn.removeEventListener('click', fn)
    </script>
</body>

</html>

实现点击一次后,解绑,就无法再点击

    <script>
        const btn = document.querySelector('button')

        function fn() {
            alert('点击了')
            //解绑事件
            btn.removeEventListener('click', fn)
        }

        //绑定事件
        btn.addEventListener('click', fn)

    </script>

标签:点击,事件,解绑,btn,click,fn
From: https://www.cnblogs.com/bangbangzoutianya/p/17638736.html

相关文章

  • 关于 beforeinstallprompt 事件
    当浏览器检测到网站可以作为渐进式Web应用程序安装时,会触发beforeinstallprompt事件。没有保证触发此事件的时间,但它通常发生在页面加载时。此事件的典型用途是,当Web应用程序想要提供自己的应用程序内UI邀请用户安装该应用程序时,而不是浏览器提供的通用UI时。这使应......
  • 为什么 cl_gui_dialogbox_container 只能在 at selection output 事件中使用
    首先,我们来了解一下cl_gui_dialogbox_container类。这是SAP的一个类,用于创建一个对话框容器,通常用于在对话框中显示一些GUI控件,例如:图形、控件等。cl_gui_dialogbox_container对象主要用于在模态对话框中创建自定义容器,它允许我们将GUI控件(如ALVGRID,HTMLViewer等)嵌入......
  • 事件流的2个阶段
    第一个阶段:由父到子(捕获)第二个阶段:由子到父(冒泡)绑定事件/注册事件事件源.addEventListener(事件类型,事件函数,是否使用捕获)其中第三个参数默认为false,不使用捕获,实际工作也多使用冒泡,如事件委托L0的事件是没有捕获阶段的,如事件源.onclick=事件函数如果要使用捕获,就需要......
  • 全局事件总线
    全局事件总线——就是用来组件间通信使用的;可以理解为事件订阅main.js就一行代码Vue.prototype.$bus=newVue()1、组件种订阅this.$bus.on(eventName,function(params){})2、组件中发布this.$bus.$emit(eventName,params)解释:去官网可以看到一些用法:vm.$onvm.$emi......
  • 【HMS Core】已申请数据导出功能,且上报了预置事件,但可导出事件依然为0
    【问题描述】已申请数据导出功能,且上报了预置时间,但是预计导出数量为0【解决方案】一、查看事件管理是否有注册相关预置事件操作步骤见截图二、排查分析是否接入成功1.在初始化AnalyticsSDK前添加SDK日志开关如下:HiAnalyticsTools.enableLog();2.初始化SDK代码如下:HiAnalyticsIns......
  • 【HMS Core】已申请数据导出功能,且上报了预置事件,但可导出事件依然为0
    ​【问题描述】已申请数据导出功能,且上报了预置时间,但是预计导出数量为0​ 【解决方案】一、查看事件管理是否有注册相关预置事件操作步骤见截图​​二、排查分析是否接入成功1.在初始化AnalyticsSDK前添加SDK日志开关如下:HiAnalyticsTools.enableLog();2.初始化SDK代......
  • Vuejs装饰器风格开发教程(计算属性、事件派发、侦听器)
    计算属性计算属性的设计背景:在Vuejs开发时我们可以在模板中通过编写表达式的方式做一系列的逻辑处理,但这就偏离的模板的概念,还会使得模板的内容变得臃肿且难以维护,所以引入了计算属性的来对不该出现在模板中的复杂逻辑处理进行重构,使用计算属性重构后的依然保持了状态的响应式......
  • 【快应用】快应用接入Analytics后自动采集事件LAUNCHAPP参数unknown?
    【关键词】快应用、接入Analytics、LAUNCHAPP、华为分析【问题背景】有cp反馈,快应用接入Analytics打开调试后,在“应用调试”界面“应用启动”事件$LaunchApp里面的$StartType和$StartSence参数取值都是unknown是什么原因?问题截图如下:【问题分析】$LaunchApp对应自动采集事件LAUN......
  • teamcenter awc 这两个柱状图数据比例差别太大,导致进行中的13条数据显示不出来,点击事
    原因: 解决方法:修改参数: ......
  • teamcenter rac 下拉框选中能触发的事件
     publicvoidaddProductionLineChangeListener(finalJComboBox<String>productionLineComboBox){ productionLineComboBox.addItemListener(newItemListener(){ @Override publicvoiditemStateChanged(ItemEventevent){ if(event.getStateChange()......