如何将多个动态事件监听器包装成一个？

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 中看到的，当点击进入文本区域时，eventListener 总是监听 #cl1，即使 .cl.active 切换使用相应的 TAB。

如果 .cl 处于活动状态，则文本区域中的事件只是相关的。我的目标是将所有三个 eventListener 合并为一个并将事件应用于活动流中的文本区域，但我尝试的所有操作都出错了......有人可以帮忙吗？ #Dontrepeatyourself #DRY

Answer 1

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

多田！

P.S。在 window.onload 中定义 greatFunction 是否有原因？

Answer 2

尝试使用 $(document).ready 函数在页面加载时加载代码。还可以使用 $('textarea #cl1').on 获取带有 #cl1 或您要使用的任何 ID 的文本区域，然后在使用 .on 后调用该函数。希望这可以帮助！让我知道它是否有效！

     $(document).ready(function () {

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

}

Answer 3

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

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

委托事件侦听器绑定到将要更改或创建的元素的 parent 元素上。然后它等待一个事件发生在它的 children 之一上。当它收到正在侦听的事件时，它会检查它源自的元素是否与侦听器的 child 选择器（第二个参数）匹配。如果确实匹配，它将处理 child 元素的事件。

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

$(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>

Answer 4

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

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

如果有帮助，请告诉我。

和平

如何将多个动态事件监听器包装成一个？

How to wrap multiple dynamic eventListeners into one?

javascript

jquery

dry

jquery-wrap