Как динамически изменить обработчик onClick? - PullRequest
Новая
       49

Как динамически изменить обработчик onClick?

48 голосов
/ 30 октября 2008

Я уверен, что есть миллион постов по этому поводу, но удивительно, у меня проблемы с поиском чего-либо.

У меня есть простой скрипт, в котором я хочу установить обработчик onClick для ссылки <A> при инициализации страницы.

Когда я запускаю это, я немедленно получаю окно с предупреждением 'foo', в котором я ожидал получить предупреждение только при нажатии на ссылку.

Что за глупость я делаю не так? (Я пробовал click = и onClick =) ... 

<script language="javascript">

    function init(){

        document.getElementById("foo").click = new function() { alert('foo'); };
    }

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

Редактировать: Я изменил свой принятый ответ на ответ jQuery. Ответ ' Már Örlygsson ' технически является правильным ответом на мой первоначальный вопрос (click должен быть onclick и new должен быть удален), но я настоятельно не рекомендую любому использовать 'document.getElementById (...) непосредственно в своем коде - и использовать вместо него jQuery .

Ответы [ 11 ]

68 голосов
/ 30 октября 2008

Попробуйте: 

document.getElementById("foo").onclick = function (){alert('foo');};
35 голосов
/ 30 октября 2008

Используйте .onclick (все строчные). Вот так: 

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

На самом деле, вам, вероятно, будет намного лучше, если использовать хорошую библиотеку (я рекомендую jQuery по нескольким причинам), чтобы вы могли приступить к работе и написать чистый javascript.

Совместимость с различными браузерами (in) - это идеальный ад для любого человека, не говоря уже о том, кто только начинает.

22 голосов
/ 30 октября 2008

JQuery: 

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

Или, если вы не хотите, чтобы он шел по ссылке href: 

$('#foo').click(function() { alert('foo'); return false; });
10 голосов
/ 23 декабря 2009

Я пробовал более или менее все другие решения на днях, но ни одно из них не работало на меня, пока я не попробовал это: 

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

Насколько я могу судить, все работает отлично.

9 голосов
/ 07 мая 2011

Если вы хотите передать переменные из текущей функции, другой способ сделать это, например: 

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

Если вам не нужно передавать информацию из этой функции, просто: 

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
5 голосов
/ 15 января 2013

OMG ... Это проблема не только "библиотеки jQuery" и "getElementById".

Конечно, jQuery помогает нам отложить кросс-браузерные проблемы, но использование традиционного способа без библиотек все еще может работать хорошо, если вы действительно понимаете JavaScript ДОСТАТОЧНО !!!

И @ Мар Орглиссон, и @Darryl Hein дали вам хорошие АЛТАРНАТИВЫ (я бы сказал, они просто альтернативные, а не противозаконные), где первый использовал традиционный, а второй - jQuery. Но вы действительно знаете ответ на свою проблему? Что не так с вашим кодом?

Во-первых, .click - это способ jQuery. Если вы хотите использовать традиционный способ, используйте вместо этого .onclick. Или я рекомендую вам сосредоточиться на изучении использования только jQuery, в случае путаницы. jQuery - хороший инструмент для использования без достаточного знания DOM.

Вторая проблема, также критическая, new function(){} - это очень плохой синтаксис или, скажем, неправильный синтаксис.

Независимо от того, хотите ли вы использовать jQuery или нет, вам нужно уточнить это.

Существует 3 основных способа объявления функции: 

function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object

Обратите внимание, что javascript чувствителен к регистру , поэтому new function() не является стандартным синтаксисом javascript. Браузеры могут неправильно понимать значение.

Таким образом, ваш код можно изменить вторым способом, как 

 = function(){alert();}

Или используя третий способ как 

 = new Function("alert();");

Прорабатывая его, второй способ работает почти так же, как третий, и второй способ очень распространен, а третий - редко. Оба ваших лучших ответа используют второй способ.

Однако третий способ может сделать то, чего не может сделать второй, из-за «времени выполнения» и «времени компиляции». Я просто надеюсь, что вы знаете, new Function() иногда может быть полезным. Однажды вы столкнетесь с проблемами при использовании function(){}, не забудьте new Function().

Чтобы понять больше, рекомендуем прочитать << JavaScript: Полное руководство, 6-е издание >>, О'Рейли.

2 голосов
/ 30 октября 2008

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

document.getElementById("foo").onclick = function (event){alert('foo');};

или в jQuery: 

$('#foo').click(function(event) { alert('foo'); }
1 голос
/ 07 апреля 2009

Вот аналог YUI для постов jQuery выше. 

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>
0 голосов
/ 24 мая 2012

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

Этот код: document.getElementById("foo").click = new function() { alert('foo'); }; назначает свойство click элемента #foo пустому объекту. Здесь анонимная функция предназначена для инициализации объекта. Мне нравится думать об этом типе функции как о конструкторе. Вы помещаете туда предупреждение, поэтому оно вызывается, потому что функция вызывается немедленно.

См. этот вопрос .

0 голосов
/ 05 апреля 2012

Я думаю, вы хотите использовать методы jQuery .bind и .unBind . В моем тестировании изменение события click с использованием .click и .onclick фактически вызвало вновь назначенное событие, что привело к бесконечному циклу.

Например, если события, между которыми вы переключаетесь, это hide () и unHide (), и нажатие одного переключает событие click на другое, вы бы оказались в непрерывном цикле. Лучше было бы сделать это: 

$(element).unbind().bind( 'click' , function(){ alert('!') } );
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...