Как обернуть несколько динамических EventListeners в один?

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 - Как вы можете видеть из консоли.В журнале при щелчке по текстовой области eventListener всегда слушает #cl1, даже если .cl.active переключается вместе с соответствующим TAB.

События в текстовой области просто актуальны, если .cl активен.Моя цель - обернуть все три eventListener в один и применить событие к текстовой области в активном потоке, но все, что я пробовал, пошло не так ... Кто-нибудь может помочь?#Drerepeatyourself # DRY

Answer 1

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

Это свяжет событие по отдельности с уникальным идентификатором, найденным по этому ключевому слову, а также обернет всех слушателей событий в одну функцию, но это лучше, когда вы хотите обрабатывать каждое событие с одинаковой функциональностью

, пожалуйста, дайте мнезнаю, поможет ли это.

Peace

Answer 2

Попробуйте использовать функцию $ (document) .ready для загрузки кода при загрузке страницы.Также используйте $ ('textarea # cl1'). On, чтобы получить текстовую область с # cl1 или любым другим идентификатором, который вы хотите использовать, а затем вызовите функцию после использования .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 и 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>

Answer 4

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

Тада!

PS Есть ли причина, по которой greatFunction определена внутри window.onload?