如何将多个动态eventListener包装成一个？

Question

我刚开始学习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();        
      });

我准备了一个js.fiddle - 正如你在console.log中看到的那样，当点击textarea时，eventListener总是监听#cl1，即使.cl.active与相应的TAB一起切换。

如果.cl活跃，textarea中的事件就是相关的。我的目标是将所有三个eventListener包装成一个并将事件应用到活动流中的textarea，但我尝试的都出错了...任何人都可以帮忙吗？ #Dontrepeatyourself #DRY

Answer 1

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

这将使用此关键字找到的唯一ID单独绑定事件，并将所有事件侦听器包装到一个函数中，但是当您想要处理具有相同功能的每个事件时，这会更好

请让我知道这可不可以帮你。

和平

Answer 2

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

然后！

附：是否有理由在window.onload中定义了greatFunction？

Answer 3

尝试使用$（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)
        });  

}

Answer 4

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

接下来，绑定已压缩为单个委托事件侦听器。由于您在评论中没有注意到在移动或添加活动元素后它不适用于活动元素，这反映出您正在处理动态元素。委托事件监听器是处理此类事情的一种方法。

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

最后，我添加了一些按钮来交换活动类，因此您可以在代码片段中看到事件处理程序将开始为您激活的任何元素开始工作，无论它是以这种方式开始的。

$(window).on('load', function () {
  function greatFunction (elem) {
    console.log(elem.value);
  }
  
  $(document.body).on(
      'focus change mousedown mouseout keyup mouseup',
      '.cl.active .chatTextarea',
      function () {
          greatFunction(this);
      }
  );
  
  $('.makeActive').on('click', function () {
    $('.active').removeClass('active');
    $(this).closest('div').addClass('active');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cl1" class="cl active"><textarea class="chatTextarea">aa</textarea><button class="makeActive">Make Active</button></div>
<div id="cl2" class="cl"><textarea class="chatTextarea">bb</textarea><button class="makeActive">Make Active</button></div>
<div id="cl3" class="cl"><textarea class="chatTextarea">cc</textarea><button class="makeActive">Make Active</button></div>