Как я могу выполнить внешнюю функцию при щелчке по элементу?

Я пытаюсь выполнить внешнюю функцию по щелчку элемента DOM, не помещая его в другую функцию.

Скажем, у меня есть функция с именем sayHello(), а именно:

function sayHello(){
  alert("hello");
};

Чтобы выполнить его по щелчку, мне сейчас нужно сделать следующее:

$("#myelement").click(function(){
  sayHello();
});

Обратите внимание, я вынужден заключить единственный вызов функции в еще одну функцию. Я пытаюсь сделать что-то вроде этого

$("#myelement").click(sayHello());

Вот только это просто не работает. Могу ли я каким-либо образом избежать переноса одного вызова функции в другую? Спасибо!

.

Дополнительная информация: как добиться того же, если мне нужно передать параметры функции?

..

Дополнительная информация: как указали Крис Брандсма и Яни Хартикайнен, следует иметь возможность использовать функцию привязки для передачи параметров функции, не заключая ее в другую анонимную функцию как таковую:

$("#myelement").bind("click", "john", sayHello);

где sayHello() теперь принимает новый параметр как таковой:

function sayHello(name){
  alert("Hello, "+name);
}

Это, к сожалению, не работает ... Есть идеи? Документация по событиям / привязке находится здесь Спасибо!


javascript jquery event-handling
person Yuval Karmi    schedule 25.07.2009    source источник
comment
Какая у вас говядина с функциями обертывания? Это не удар по производительности (ну, может быть, наносекунды). Это немного многословно, но я считаю полезным сделать это и сохранить согласованность. Во-вторых, вам нужно добавить параметр или вызвать несколько функций, которые вам нужно будет добавить обратно в оболочку ...   -  person DisgruntledGoat    schedule 26.07.2009
comment
Думаю, я просто хочу, чтобы это было красиво в одной строке, и я такой ОКР ... :)   -  person Yuval Karmi    schedule 26.07.2009

Ответы (6)


arrow_upward
21
arrow_downward

Чтобы ответить на ваш вопрос.

Очевидно, для работы нужно называть это так:

$("#myelement").click(sayHello);

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

Если вам нужно передать данные, вы также можете вызвать метод следующим образом:

$("#myelement").click(function(){ sayHello("tom");});

Или вы можете передать данные с помощью функции bind()

function sayHello(event){ alert("Hello, "+event.data); }

$("#myelement").bind("click", "tom", sayHello);

Или вы можете получить данные из элемента, который был нажат

$("#myelement").click(function(){sayHello($(this).attr("hasData");});.

Надеюсь, это поможет.

person Chris Brandsma    schedule 25.07.2009
comment
из документации Events / bind на веб-сайте jQuery следует, что this $ (# myelement) .bind (click, tom, sayHello); должен действительно делать то, что я ищу ... хотя при попытке это не сработает. Я опубликую дополнительную информацию в исходном вопросе через секунду - person Yuval Karmi; 26.07.2009
comment
@yuval: внимательнее читайте документацию! Значение, переданное bind() в параметре data, передается вашему обработчику через event.data - вам нужно интерпретировать первый параметр вашей функции как объект event и посмотреть на свойство data! - person Shog9; 26.07.2009
comment
@yuval: я расширил пример Криса. - person Shog9; 26.07.2009
comment
@ shog9: отлично! это делает его намного яснее. однако определенно проще заключить вызов функции, содержащий параметры, в анонимную функцию! Спасибо за вашу помощь! - person Yuval Karmi; 26.07.2009

arrow_upward
8
arrow_downward

Вы вызываете функцию sayHello, вы можете передать ее по ссылке, удалив круглые скобки:

$("#myelement").click(sayHello);

Изменить: Если вам нужно передать параметры функции sayHello, вам нужно будет заключить ее в другую функцию. Это определяет новую функцию без параметров, которая вызывает вашу функцию с параметрами, предоставленными во время создания:

$("#myelement").click(function () {
   sayHello('name');
   // Creates an anonymous function that is called when #myelement is clicked.
   // The anonymous function invokes the sayHello-function
});
person PatrikAkerstrand    schedule 25.07.2009
comment
это действительно работает, но что мне делать в ситуации, когда у меня есть параметры для передачи функции? то есть $ (# myelement) .click (sayHello (john)); ? Благодарность! - person Yuval Karmi; 26.07.2009
comment
В этом случае вы вынуждены его заворачивать. В качестве альтернативы некоторые библиотеки, такие как Prototype, предоставляют метод bind (), который работает примерно так, как sayHello.bind (this, param1, param2). Однако он делает то же самое, что и упаковка. - person Jani Hartikainen; 26.07.2009
comment
эй, джани, похоже, это тоже должно работать с функцией привязки jQuery, но это не так. См. Дополнительную информацию к вопросу. Благодарность! - person Yuval Karmi; 26.07.2009

arrow_upward
4
arrow_downward

$ ("# myelement"). click (sayHello ());

Фактически это вызывает sayHello() перед установкой обработчика click. Он пытается установить возвращаемое значение sayHello() в качестве функции обратного вызова!

Вместо этого попробуйте:

$("#myelement").click(sayHello);

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

person Sean    schedule 25.07.2009

arrow_upward
1
arrow_downward

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

вы не можете передавать параметры, но вы можете подделать параметр, просто добавив членов к объекту, который запускает событие, так что ...

myObject.onClick = sayHello;
myObject.param1 = "foo";

тогда, когда вы звоните этому

function sayHello(){
  alert(this.param1);
}
person Yevgeny Simkin    schedule 25.07.2009
comment
Это не прямой ответ на вопрос (поскольку он использует jQuery), но получил одобрение, потому что, тем не менее, это отличный совет по Javascript. - person DisgruntledGoat; 26.07.2009
comment
IMHO, это намного менее чисто, чем простое закрытие ... в лучшем случае у вас есть дополнительная работа по настройке свойств expando на объекте DOM, а в худшем случае вы потенциально можете столкнуться с конфликтами имен со встроенными свойствами! - person Shog9; 26.07.2009

arrow_upward
1
arrow_downward

Метод bind() устарел.

Начиная с jQuery 3.0, .bind() устарел. Он был заменен методом .on() для присоединения обработчиков событий к документу, начиная с jQuery 1.7, поэтому его использование уже не приветствовалось.

Лучше выполнять привязку всех событий с помощью метода on() для согласованности. Вы можете передать параметры своему обработчику в качестве второго аргумента после имени события.

function sayHello(name){
    console.log('Hello ' + name);
};

$('#myelement').on('click', 'John', sayHello);
person Udo E.    schedule 12.08.2019

arrow_upward
0
arrow_downward

Да, вместо использования sayHello () просто передайте имя функции.

$("#myelement").click(sayHello);
person Derferman    schedule 25.07.2009