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

<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>

нажмите на синий div.

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

когда вызывается функциональный тест (e, div), я продолжаю получать ошибку "событие не определено" в firefox и IE, хотя, по иронии судьбы, он отлично работает в Chrome и Safari.

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

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

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

8
addeventlistener javascript-events

2 ответов

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() не работает в старых IEs (это делает в IE9, хотя). Для более старых IEs вы должны использовать аналогичную функцию под названием attachEvent(). Или, если вы прикрепляете только один обработчик, вы можете сделать это простым способом

div.onmousemove = function() {...};
13

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

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

С

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

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

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

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

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

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

2