Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2015, 13:18
Новичок на форуме
Отправить личное сообщение для nani_t Посмотреть профиль Найти все сообщения от nani_t
 
Регистрация: 23.04.2015
Сообщений: 4

Совмещение обработчиков
Добрый день. Есть два обработчика

$('.search-button').on('click', function () {
        searchClients();
    });

    $('.search-input-string input').on('keyup', function(event) { 
          //кусочек кода
           searchClients();
    });


Один на нажатие кнопки, второй ловит нажатие enter в инпуте. Вопрос - прямо так и оставить в целом адекватно либо можно их как то обьединить ввиду одинакового содержания?
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2015, 14:22
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Объединить что?

Кстати первый раз вы можете просто написать имя функции. У вас же пустая обертка. То есть так

$('.search-button').on('click', searchClients);
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2015, 16:56
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

nani_t,
Если у вас инпут и кнопка в форме находятся, то можно так:
<form action="" id="search-form">
  <div class="search-input-string">
    <input type="text" placeholder="Search">
  </div>
  <input class="search-button" type="submit" value="Search">
</form>

  <script>
function searchClients(){
  console.log('Searching...');
}

$('#search-form').on('submit', function(event) { 
   event.preventDefault();
   searchClients();
});
  </script>

Последний раз редактировалось Sigizmund2012, 22.07.2015 в 16:58.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2015, 18:06
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Куда keyup дели?
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2015, 18:30
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Сообщение от kostyanet Посмотреть сообщение
Куда keyup дели?
Он не нужен, форма сабмитится и по Enter на инпуте и по клику на кнопку.
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2015, 16:30
Новичок на форуме
Отправить личное сообщение для nani_t Посмотреть профиль Найти все сообщения от nani_t
 
Регистрация: 23.04.2015
Сообщений: 4

кнопка с инпутом не в одной форме.
Просто у меня есть некий код (в виде функции searchClients) который должен выполняться при наступлении разных событий. Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию (просто передавать будут свои параметры)

Поэтому я решил уточнить этот момент - тупа перечислять элементы и указывать им обработчик события (как в моем самом первом посте) это в целом нормально? либо есть какой-то паттерн, прием, методология которая позволяет это сделать более красиво.

Последний раз редактировалось nani_t, 23.07.2015 в 16:34.
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2015, 16:39
Аспирант
Посмотреть профиль Найти все сообщения от tysonfury2015
 
Регистрация: 22.07.2015
Сообщений: 68

можешь вот так написать
$('.search-button').on('click', searchClients);
 
    $('.search-input-string input').addEventListener('keyup', searchClients);
        $('.search-input-string input').addEventListener('keyup', function(e){кусочек кода});

если тебя повторяемость так напрягла

Последний раз редактировалось tysonfury2015, 23.07.2015 в 16:42.
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2015, 01:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от nani_t
Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunc(e) {
    alert(e.target.id)
} 
$(function() {
    $('body').on('keyup click keypress', '#one,#two,#three', myFunc)
});
</script>     
</head> 
<body>
<input id="one" />
<input id="two" />
<input id="three" />
</body> 
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2015, 10:09
Новичок на форуме
Отправить личное сообщение для nani_t Посмотреть профиль Найти все сообщения от nani_t
 
Регистрация: 23.04.2015
Сообщений: 4

laimas, решение видимо самое очевидное Можно сказать почти то что мне нужно. Единственное есть подозрение что при добавлении в наборы событий и элементов принципиально разных событий (например click и blur) и элементов, то логика поломается.
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2015, 12:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

То есть, если вызывать функцию по событию обрабатываемую отдельно установленными обработчиками, то логика не поломается?

Что у меня написано, что вы будете вызывать функцию из разных обработчиков, все едино - пока ваша функция каким либо образом не будет знать источника события, толку от этой функции не будет. Поэтому в примере и показано - определили id источника. Кроме этого, можно определять в одном обработчике и тип события, и принимать соответствующее действие. В противном случае бессмыслица получается.

В обработчик можно передавать и event-map, где свойствами будут события, а их значения соответствующие обработчики. Возможно это как раз и было бы лучшее в данном случае.

Последний раз редактировалось laimas, 24.07.2015 в 12:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое создание обработчиков Кирюха =) jQuery 6 17.09.2014 17:41
AJAX и Deferred: последовательность выполнения обработчиков dmsuslov AJAX и COMET 2 30.07.2014 17:32
Помогите в замыкании универсальной функции для обработчиков событий addEventListener iis_ Events/DOM/Window 6 30.01.2014 00:09
Несколько обработчиков в document.onclick at- Events/DOM/Window 4 08.10.2012 19:26
Конфликт iframe и обработчиков onmousemove mailman Элементы интерфейса 5 18.10.2009 08:26