Цикл прослушивания событий - PullRequest
Новая
       7

Цикл прослушивания событий

1 голос
/ 18 февраля 2010

как мне добавить слушателя для размещения над тегами div, как это:

| btn1 | btn2 | btn3 | btn4 |

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

function listen() {
 for (i=1;i<=10;i++) {
  wat = document.getElementById('btn'+i);  
  wat.addEventListener('mouseover',functionwat,false );
 }
}

У меня есть это, и оно не работает, и да, оно вызывает функцию listen (), потому что я добавил туда предупреждение, чтобы убедиться, что оно работает правильно, и функция тоже работает правильно. какие-нибудь идеи я делаю неправильно?

Ответы [ 4 ]

3 голосов
/ 18 февраля 2010

Какой браузер вы используете? Регистрация обработчиков событий отличается от браузера к браузеру. ППК неплохо обсуждает события браузера здесь .

Короче говоря, это кросс-браузерный код для добавления обработчика. 

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

Теперь вы можете прикрепить событие с помощью 

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);     
        addEventSimple(wat, 'mouseenter', functionwat);
    }
}
0 голосов
/ 19 февраля 2010

Дэвид,

Вам не повезло, потому что, я почти уверен, что вы используете браузер, который не IE.Ваши события не будут запускаться в браузере, отличном от IE, потому что событие "mouseenter" отображается только в IE.Чтобы это работало, вам нужно изменить "mouseenter", чтобы использовать "mouseover". 

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);     
        addEventSimple(wat, 'mouseenter', functionwat);
    }
}

на 

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);
        if(wat) { addEventSimple(wat, 'mouseover', functionwat); }
    }
}
0 голосов
/ 18 февраля 2010

Кажется, вы можете быть немного не в порядке с вашими переменными. Например, вы не используете var для объявления i, поэтому он может оказаться в глобальном пространстве имен. После этого вы уверены, что functionwat действительно функция во время выполнения listen()?

Вы можете проверить это по: 

function listen() {

   if(typeof functionwat !== "function") {
      alert("functionwat is not a function, but a " + typeof functionwat);
   }

   for (var i = 1; i <= 10; ++i) {
      wat = document.getElementById("btn"+i);  
      wat.addEventListener("mouseover", functionwat, false);
   }
}
0 голосов
/ 18 февраля 2010

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

<div id="btnList">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div>

JavaScript: 

$(document).ready(function()
{
   $("#btnList button").bind(
          "mouseenter mouseleave",
          function(e) {
             //do something based on target/id 
             alert(this.id);
          });
});
...