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中单击文本区域时所看到的那样，即使#cl1和相应的TAB一起切换，eventListener也会始终监听.cl.active。

如果.cl有效，则文本区域中的事件只是相关的。我的目标是将所有三个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)
});

多田！

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

Answer 3

尝试使用$（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 4

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

接下来，绑定已被压缩到单个委托事件侦听器中。由于您在评论中漏掉了在移动或添加活动对象后该元素不适用于活动元素的情况，因此这表明您正在处理动态元素。委托事件侦听器是处理此类事件的一种方法。

Delegate事件侦听器绑定在将更改或创建的元素的父元素上。然后，它等待事件发生在其中一个孩子身上。当它获取正在监听的事件时，它将检查其来源元素是否与监听器的子选择器（第二个参数）匹配。如果匹配，它将处理子元素的事件。

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

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

如何将多个动态eventListener合并为一个？

4 个答案: