Как прикрепить обработчики событий к элементам документа на лету, используя JavaScript? - PullRequest
Новая
       12

Как прикрепить обработчики событий к элементам документа на лету, используя JavaScript?

0 голосов
/ 11 сентября 2009

Есть ли способ присоединить обработчик событий, например, onclick = alert ("Hi"); к существующему элементу документа? (изображение в моем случае)

Я уже пробовал и не удалось со следующим: 

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.onclick = function(evt) {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

function handler(evt) {"alert('hi')";}
img.onclick = handler;

У меня заканчиваются идеи. Кто-нибудь знает, как это сделать?

Ответы [ 6 ]

3 голосов
/ 11 сентября 2009 
element.onclick = function(event){alert("message");}

Аргумент event является необязательным в этом случае. Тело функции - это код, а не строка.

2 голосов
/ 11 сентября 2009 
img = document.getElementById("my_image");

img.onclick = "alert('hi')";

Это присвоение строки. 

img.setAttribute ('onclick',"alert('hi')");

Это также присвоение строки. 

img.onclick = function() {"alert('hi')";};

Это назначение функции, но вся функция содержит строку. Вы должны удалить цитаты из примерно alert('hi'). 

img.onclick = function(evt) {"alert('hi')";};

Опять же, функция, которая содержит только строку. 

img.setAttribute ('onclick',function() {"alert('hi')";});

Опять ... 

function handler(evt) {"alert('hi')";}
img.onclick = handler;

И снова.

1 голос
/ 11 сентября 2009

Первый ответ от zzandy должен быть в порядке. Убедитесь, что вы все делаете правильно, особенно Firefox может быть разборчив в том, чтобы убедиться, что он работает в режиме совместимости. Вот полный код. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function AttachEvent()
{
    var theElement = document.getElementById( 'the_image' );
    theElement.onclick = function () { alert('message'); }
}
</script>
</head>
<body>
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' />
<button onclick='AttachEvent();'>Enable Click on image</button>
</body>
</html>
1 голос
/ 11 сентября 2009

это просыпается! 

<img src="PathToImage" id="myImage" height="30px" width="30px" />

<script type="text/javascript">
    var i = document.getElementById("myImage");
    i.onclick = function() { alert("hello"); };
</script>

РЕДАКТИРОВАТЬ: - Испытано в IE 7, Chrome 4x, FF 3.5x

1 голос
/ 11 сентября 2009 
<body>
<input type="image" id="myImageInput">

<script type="text/javascript">
var theImageInput = document.getElementById('myImageInput');
theImageInput.onclick = function () { alert('myImageInput onclick invoked!'); }
</script>
</body>

Протестировано и работает в Firefox 3.5.3.

Важные моменты:

  • Вы должны получить ссылку на элемент после его визуализации в документе.
  • Firefox не похож на Internet Explorer в том, что он не делает имя / идентификатор каждого элемента глобальной переменной. myImageInput.onclick = ... не будет работать в Firefox, вы должны использовать document.getElementById(theID) или document.forms['formName'].elements['elementNAME'] (если оно в <form>), чтобы получить ссылку на него.

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

0 голосов
/ 11 сентября 2009 
img.onclick = function() { alert('hi'); };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...