Дублировать обработчики событий одного элемента на другой?

Как скопировать обработчик событий из одного элемента в другой? Например:

$('#firstEl')
    .click(function() {
        alert("Handled!");
    })
;

// here's where the magic happens 
$('#secondEl').click = $('#firstEl').click; // ????

Обратите внимание, что второй элемент обрабатывается в другое время по сравнению с тем, когда первый элемент получает свой обработчик, что означает, что это:

$('#firstEl, #secondEl').click(function() { ... });

... не сработает.

К сожалению, ни один из ответов не показывает этого без использования jQuery.

Shane Reustle 04.05.2012 13:12

@ShaneReustle, это вопрос о событиях jQuery ...

nickf 06.05.2012 23:21

Которые в фоновом режиме работают как обычные события. Я надеялся увидеть, как это сделать без использования jQuery для стандартных событий JS.

Shane Reustle 26.05.2012 07:28

@ShaneReustle То же самое для меня ... Думаю, я еще погуглию, иначе я отправлю ответ JavaScript

yyny 07.06.2015 21:56
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
11
4
10 159
6

Ответы 6

Вы не можете легко (и, вероятно, не должны) «копировать» событие. Что вы можете сделать, так это использовать одну и ту же функцию для обработки каждого из них:

var clickHandler = function() { alert('click'); };
// or just function clickHandler() { alert('click'); };

$('#firstEl').click(clickHandler);

// and later
$('#secondEl').click(clickHandler);

В качестве альтернативы вы можете запустить событие для первого элемента во втором обработчике:

$('#firstEl').click(function() {
    alert('click');
});

$('secondEl').click(function() {
    $('#firstEl').click();
});

Обновлено: @nickf беспокоится о загрязнении глобального пространства имен, но этого почти всегда можно избежать, обернув код в объект:

function SomeObject() {
    this.clickHandler = function() { alert('click'); };
}
SomeObject.prototype.initFirstEvent = function() {
    $('#firstEl').click(this.clickHandler);
};
SomeObject.prototype.initSecondEvent = function() {
    $('#secondEl').click(this.clickHandler);
};

или оберните ваш код анонимной функцией и немедленно вызовите ее:

(function() {
    var clickHandler = function() { alert('click'); };
    $('#firstEl').click(clickHandler);
    $('#secondEl').click(clickHandler);
})();

ах, да, это сработает, но я надеялся на метод, который не загрязнил бы глобальное пространство имен.

nickf 14.01.2009 06:57

Это то, что вы ищите?

var clickHandler = function() { alert("Handled!"); }
$('#firstEl').click(clickHandler);
$('#secondEl').click(clickHandler);

$ ('# secondEl'). click = $ ('# firstEl'). click.bind ($ ('# secondEl'));

Предполагая, что вы используете Prototype JS (http://www.prototypejs.org/api/function/bind)

Возможно, вас заинтересует triggerHandler метод

// here's where the magic happens 
//$('#secondEl').click = $('#firstEl').click; // ????
$('#secondEl').click(function() {
    $('#firstEl').triggerHandler('click');
});

На этот вопрос уже был дан ответ, но для справки в будущем: вы можете скопировать их, повторяя события исходного элемента и привязывая их обработчики к цели.

> см. редактирование ниже!

// iterate event types of original
$.each($('#original').data('events'), function() {
  // iterate registered handler of original
  $.each(this, function() {
    $('#target').bind(this.type, this.handler);
  });
});

Это удобно, когда у вас нет контроля над исходным элементом (например, при использовании плагина) и вы просто хотите клонировать поведение определенного элемента.

Редактировать: Доступ к обработчикам событий элементов был изменен в более поздних версиях jQuery. Это должно работать для более новых версий:

$.each($._data($('#original').get(0), 'events'), function() {
  // iterate registered handler of original
  $.each(this, function() {
    $('#target').bind(this.type, this.handler);
  });
});

Ваше здоровье

Использование метода JQuery triggerHandler() - лучшее решение. @KenBrowing дает ответ на этот вопрос ниже: stackoverflow.com/a/442305/1988326

mark.monteiro 09.12.2015 17:25

@Chris: Спасибо за редактирование. После нескольких дней поиска решения для сохранения событий и обработки их позже, это единственное место, которое я нашел, где описан доступ к обработчикам событий jquery. Большое спасибо :)

zreptil 05.12.2017 11:07

Другие вопросы по теме