草庐IT

removeEventListener取消事件监听的坑

自己瞎琢磨 2023-05-01 原文

从addEventListener说起，上代码

onMounted(() => {
    window.addEventListener("click", ()=>{
        doSth(param)//param为参数
    })
})

addEventListener有一个箭头函数回调函数，这个函数本身不能传参（当然event除外），如果你要传参，只能在doSth函数上传，我们也可以将箭头函数回调函数替换成一个函数，但是这个函数明显不能有参数

onMounted(() => {
    window.addEventListener("click", doSth)//这个doSth就没有参数了
})

非要让doSth有参数，可以在函数外面包上一层函数

let doSth1=()=>{
    doSth(param)
}
onMounted(() => {
    window.addEventListener("click", doSth1)//这个doSth1就是外面包装的函数
})

以上的原理都适用于removeEventListener，但是emoveEventListener还有一个注意点，见下

onMounted(() => {
    window.addEventListener("click", () => {
        doSth()
    })
})
onUnmounted(() => {
    window.removeEventListener("click", () => {
        doSth()
    })
})

以上这样的代码是通不过的，因为removeEventListener的第二个参数，也就是那个回调函数必须和addEventListener的回调函数是同一个函数，共享内存，下面这种写法就行得通

onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click",doSth)
})

然而，上面这种写法还是不能传参，所以要传参的话还是要外包一个函数，如下

let doSth = (str: string) => {
    console.log(str);
}
let doSth1 = () => {
    doSth("haha")
}

onMounted(() => {
    window.addEventListener("click", doSth1)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth1)
})

然而，如果你用ts的话，doSth函数的参数可以是一个可选参数，如下

let doSth = (str?: string) => {
    if (typeof str == "string") {
        console.log("传参了");
    } else {
        console.log("没传参");
    }

}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

这样的情况则会提示一则消息：

没有与此调用匹配的重载。
  第 1 个重载(共 2 个)，“(type: "click", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void”，出现以下错误。
  第 2 个重载(共 2 个)，“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void”，出现以下错误。

当然这样实际运行是可以的，没什么问题，但是报错很难看，解决这个问题又不想在外面包上一层函数，那么可以直接给doSth加上any类型

let doSth: any = (str: string) => {
    if (typeof str == "string") {
        console.log("传参了");
    } else {
        console.log("没传参");
    }

}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

 当然其中原因还是没能搞懂，唉，慢慢来吧

removeEventListener取消xff0cdoSthxff0javascripttypescript前端

有关removeEventListener取消事件监听的坑的更多相关文章

  1. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  2. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  3. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  4. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  5. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  6. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

  7. ruby - 在没有数据库的情况下伪造一个事件记录模型 - 2

    我觉得我错过了什么。我正在编写一个ruby​​gem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？ 最佳答案

  8. ruby-on-rails - 在事件记录库中添加某些方法的首选方法是什么？ - 2

    我想创建一个模块，为从事件记录库继承的类提供一些通用方法。以下是我们可以实现的两种方式。1)moduleCommentabledefself.extended(base)base.class_evaldoincludeInstanceMethodsextendClassMethodsendendmoduleClassMethodsdeftest_commentable_classmethodputs'testclassmethod'endendmoduleInstanceMethodsdeftest_commentable_instance_methodputs'testinstanc

  9. ruby-on-rails - 取消 Rails 数据库连接 - 2

    我正在编写一个将服务器端事件与ActionController::Live结合使用的应用程序。它正在使用puma应用程序服务器。当用户连接等待来自Redis的消息时，消息Controller中的方法保持事件状态。问题是我不想通过这种方法连接到Postgres。我在六个选项卡中打开应用程序后，它有超过五个连接，由config/database.yml文件中的池大小定义，应用程序崩溃。无论如何，在调用该方法时是否可以告诉我的应用它不需要连接到数据库，因为其中没有ActiveRecord查询调用？ 最佳答案 一种可能的方法是使用中间件。设

  10. ruby-on-rails - Rails 是否支持监听 UDP 套接字的简洁方式？ - 2

    在Rails中，什么是集成更新模型某些元素的UDP监听过程的最佳方式(特别是它将向其中一个表添加行)。简单的答案似乎是在同一个进程中使用UDP套接字对象启动一个线程，但我什至不清楚我应该在哪里做适合Rails方式的事情。有没有一种巧妙的方法来开始收听UDP？具体来说，我希望能够编写一个UDPController并在每个数据报消息上调用一个特定的方法。理想情况下，我希望避免在UDP上使用HTTP(因为它会浪费一些在这种情况下非常宝贵的空间)，但我完全控制消息格式，因此我可以为Rails提供它需要的任何信息。 最佳答案 Rails是一个

随机推荐