Добавление прослушивателей событий с Javascript DOM

Question

У меня возникли проблемы с добавлением eventListener через javascript. Хорошо, у меня есть функция, которая создает 4 элемента привязки. Я хочу добавить к ним событие onmouseover, которое вызывает функцию для изменения цвета backkground. Вот код (смотрите на предпоследней строке createAnchor(), чтобы найти соответствующую строку кода.

function createAanchor(index) { 
      var a = document.createElement("a"); 
      var text = getText(index); 
      var a = document.createElement("a"); 
      var t = document.createTextNode(text); 
      a.href = getHref(index); 
      a.appendChild(t); 
      a.style.textAlign = "center"; 
      a.style.fontSize = "1.2em"; 
      a.style.color = "white"; 
      a.style.fontFamily = "arial"; 
      a.style.fontWeight = "bold"; 
      a.style.textDecoration = "none"; 
      a.style.lineHeight = "238px"; 
      a.style.width = "238px"; 
      a.style.margin = "5px"; 
      a.style.background = eightColors(index); 
      a.style.position = "absolute"; 
      a.addEventListener("onmouseover", changeColor()); 
      return a; 
    } 

    function changeColor() { 
     alert("EVENT WORKING"); 
    } 

Ok вот проблема. Когда функция получает a.addEventListener("onmouseover", changeColor()); в function changeColors() выполняется, но он не выполняет позже на onmouseover Почему это?

Answer 1

1. Нет такого события onmouseover, мероприятие называется mouseover.
2. Вы должны передать функциональную ссылку на addEventlistener. () вызывает функцию, как вы уже заметили, поэтому ... не называйте ее.

Вот как это должно быть:

a.addEventListener("mouseover", changeColor); 

Я рекомендую прочитать the excellent articles about event handling на quirksmode.org.

Answer 2

это потому, что вы написали changeColors() вместо того, чтобы просто changeColors. () сказать JavaScript для вызова функции.

другими словами, changeColors само по себе является ссылкой функция, а changeColors() относится к функции , а затем называет ее. Результатом вызова функции (возвращаемого значения из функции) является то, что в конечном итоге передано в addEventListener().

Answer 3

Мне тоже нужно было сделать что-то подобное. У меня есть информация на моей карте, и мне нужно обработать событие click по абзацу в этой infoWindow. Так я сделал это вот так:

google.maps.event.addListener(infoWindow, 'domready', function() 
    { 
     paragraph = document.getElementById("idOfThatParagraph"); 
     paragraph.addEventListener("click", function() 
     { 
      //actions that I need to do 
     }); 
    }); 

Это работает для меня. Поэтому я надеюсь, что это поможет кому-то :)

Answer 4

Хорошо, я думаю, нам нужно понять, когда использовать префикс «on» с типом события. В IE 8 или ниже IE8 мы используем attachEvent и detachEvent, которые эквивалентны addEventListener и removeEventListener. Существуют некоторые различия, которые не требуются для этого вопроса.

При использовании attachEvent тип события имеет префикс «включено», но в addEventListener префикс не используется.

, следовательно,

elem.attachEvent("onclick",listener); // <= IE8 

    elem.addEventListener("click",listener,[,useCapture]); // other browsers