Javascript 如何将多个DynamicEventListener包装成一个？

我刚开始学习js，需要一些帮助：我有以下功能：

   //SET CHAT BEHAVIOR
   function chatSettings() {

        console.log('ChatSettings called')         

        function BtnAndScrollBar(texteditor) {     
            console.log('BTNAndScrollBar called');    
            const sendBtn = $('.cl.active').find('.sendBtn');
            const attachBtn = $('.cl.active').find('.attachBtn');
            console.log(sendBtn)          
        }

        function sendAndDeleteMessage(send) {
            console.log(send);
        }   

        var sendBtn = $('.cl.active').find('.sendBtn');
        sendBtn.mousedown(function () {      
            sendAndDeleteMessage(this);
        });               

        var textEditor1 = $('.cl.active').find('.chatTextarea');                  
        textEditor1.on('focus change mousedown mouseout keyup mouseup', function (){
            console.log(this);
            BtnAndScrollBar(this)
        });
   }       

      $('document').ready(function () {
          console.log('hello');
          $('.tabs').tabs();
          chatSettings();        
      });

我准备了一个-正如您在单击文本区域时从console.log看到的，eventListener始终侦听cl1，即使.cl.active与相应的选项卡一起切换

如果.cl处于活动状态，则文本区域中的事件只是相关的。我的目标是将所有三个eventListener打包成一个，并将事件应用到活动流中的textarea，但我所做的一切都出错了。。。有人能帮忙吗？不要把自己擦干

$(".cl textarea").on('focus change mousedown mouseout keyup mouseup', function () {
    greatFunction(this)
});   

塔达

---

另外，是否有理由在窗口内定义greatFunction.onload？

尝试使用$document.ready函数在页面加载时加载代码。 还可以使用$'textarea cl1'.on获取包含cl1或您想要使用的id的textarea，然后在使用.on后调用该函数。 希望这有帮助！ 让我知道它是否有效

     $(document).ready(function () {

  function greatFunction(elem) {     
//do stuff
}    
      $('textarea').on('focus change mousedown mouseout keyup mouseup', function () {
            greatFunction(this)
        });  

}

首先，我将onload改为使用jQuery绑定，因此您的所有逻辑都是进行jQuery绑定，而不是在jQuery和vanillarjavascript之间来回交换。此外，执行实际绑定会删除内联绑定

接下来，绑定已压缩为单个委托事件侦听器。由于您在注释中回避了在活动元素被移动或添加后，它不适用于活动元素，这反映了您正在处理动态元素。委托事件侦听器是处理此类事件的一种方法

委托事件侦听器绑定在将要更改或创建的元素的父元素上。然后，它等待事件发生在它的一个子系统上。当它获取它正在侦听的事件时，它会检查它所源自的元素是否与侦听器的子选择器第二个参数匹配。如果匹配，它将处理子元素的事件

最后，我添加了一些按钮来交换活动类，因此您可以在代码段中看到，事件处理程序将开始为任何您激活的元素工作，而不管它是如何启动的

$window.on'load'，函数{ 函数大函数元素{ console.logelem.value； } $document.body.on “焦点更改鼠标向下鼠标向外键向上鼠标”， “.cl.active.chatTextarea”， 作用{ 非常感谢这一点； } ; $'.makeActive'。单击，函数{ $'.active'.removeClass'active'； $this.最近的'div'。addClass'active'； }; }; aa激活 使活跃 激活 这将使用使用该关键字找到的唯一id单独绑定事件，并将所有事件侦听器包装到一个函数中，但如果您希望使用相同的功能处理每个事件，这会更好

请让我知道这是否有帮助

---

Peace

ID在给定页面中必须是唯一的。ChatterXTArea的重复性比单独选择每一个都要大，为什么不使用他们共享的cl类来选择它们呢？谢谢。这是一个复制粘贴错误。。。您的建议产生了一个问题-我尝试使用$'.cl.active'，但它只对第一个元素有效，而在第二个元素激活后，它就不起作用了。可能是因为它只在加载时启动一次。您只希望活动元素的函数发生吗？这在问题中没有表达出来。可能是重复的。我已经更新了我的答案，通过使用textarea选择页面上的所有textarea，只有一个jquery函数。请查看我制定的解决方案，让我知道这是否对您有帮助。这非常有帮助：$'.cl'.find'.chatterArea'.eachfunction{$this.on'focus change mousedown mouseout keyup mouseup'，函数{console.log$this.val；BtnAndScrollBarthis}；用$document替换$'document'

$(".chatTextarea").on(
'focus change mousedown mouseout keyup mouseup', 
function (this) {
//this.id can contain the unique id
greatFunction(this);
});