добавление события в качестве параметра в функцию, используя addEventListener (не работает в FF / IE).Javascript - PullRequest
Новая
       10

добавление события в качестве параметра в функцию, используя addEventListener (не работает в FF / IE).Javascript

8 голосов
/ 13 сентября 2011 
<html>
<head>
<title>FML</title>

<script type="text/javascript">

function function1(e, div) {
div.innerHTML="this works"
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX
div.addEventListener("mousemove", function(){test(event, this)}, true);
}

function test(e, div) {
div.innerHTML+='<br/>so does this'
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY
}

</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
<span id="myspan2">&nbsp;</span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">
</body>
</html>

Нажмите на синее деление.

Я хочу добавить событие mouseover, чтобы оно выполняло функцию test () - которая должна содержать следующие параметры: this, event

Когда вызывается функция test (e, div), я получаю сообщение об ошибке «событие не определено» в Firefox и IE, хотя, как ни странно, это прекрасно работает в Chrome и Safari.

Как я могу добавить параметр события, используя addEventListener? Я могу заставить его работать с window.event в chrome и safari, но это именно то, что мне нужно. Я уже некоторое время гуглюсь и пробую / ошибаюсь, но безуспешно ... так что FML: / Какие-нибудь советы / подсказки / ... кроме как выстрелить себе в голову?

Я знаю, что jquery, вероятно, решит все это, но я хочу быть опытным в javascript до перехода на jQuery. Или я все равно должен мигрировать?

Спасибо и ура, р.

Ответы [ 2 ]

13 голосов
/ 12 мая 2012 
div.addEventListener("mousemove", function(){test(event, this)}, true);

Ну, конечно, вы получите "событие не определено"!Когда срабатывает событие mousemove, вызывается ваш обработчик события: 

function(){test(event, this)}

Существует два способа добраться до объекта информации о событии.Либо он передается обработчику события в качестве аргумента, либо он может быть найден в window.event.

Предположим, что второй случай имеет место.Поскольку в вашей функции нет локальной переменной с именем event, а в function1 нет такой переменной, которая ее вызывает, браузер проверяет, есть ли в глобальном объекте event, определенный в глобальном объекте.В JavaScript глобальный объект называется window, поэтому ваша функция интерпретируется как 

function(){test(window.event, this)}

, и она работает.

Однако, как я уже отмечал ранее, в некоторых браузерах событиеинформация передается в аргументе.Так что ваш обработчик событий, вероятно, хотел выглядеть так: 

function(event){test(event, this)}

, иначе event, переданный test(), будет неопределенным.Итак, вот как сделать кросс-браузерный обработчик: 

function(event) {
  if (!event) // i.e. the argument is undefined or null
      event = window.event;

  test(event, this);
}

Вторая проблема заключается в том, что addEventListener() не работает в старых IE (хотя в IE9 это работает).Для более старых IE вы должны использовать аналогичную функцию под названием attachEvent().Или, если вы подключаете только один обработчик, вы можете сделать это простым способом 

div.onmousemove = function() {...};
2 голосов
/ 03 февраля 2017

В некоторых браузерах, таких как Firefox, событие должно передаваться как параметр, поэтому вы должны заменить этот код 

div.addEventListener("mousemove", function(){test(event, this)}, true);

на 

div.addEventListener("mousemove", function(event){test(event, this)}, true);

Тщательно сравните две строки кода и обратите внимание на свойство event , переданное в качестве параметра функции, добавленной во вторую строку.

для старого IE ver attachEvent() необходимо использовать; 

div.attachEvent("onclick", function(event){test(event, this)});

Обратите внимание, что attachEvent был заменен в современном стандартном js на addEventListener , и теперь почти все современные браузеры поддерживают это.

Здесь http://caniuse.com/#feat=addeventlistener можно увидеть таблицу совместимости.

...