addEventListener, bubbling и capturing, attachEvent и dettachEvent, кроссбраузерная привязка обработчика события

addEventListener

addEventListener добавляет обработчик для определенного события

Синтаксис для addEventListener

js

elem.addEventListener(event, listener, capture);

Параметры:

• elem
  элемент, чьи события будем перехватывать
• event (событие)
  строка, наименование события (без префикса 'on')
• listener (обработчик)
  функция, которой будет передаваться событие
• capture (этап события)
  этап события - булевое значение, если true, то осуществляется capture, если false - bubling (всплытие). По умолчанию, можно и нужно третьим параметром указывать false, то есть всплытие.

removeEventListener

removeEventListener удаляет указанную функциюо бработчик события

js

void removeEventListener(String тип, Function обработчик, Boolean фазаЗахвата);

Аргументы

• тип
  Тип события, обработчик которого удаляется.
• обработчик
  Функцияобработчик события, которая должна быть удалена.
• фаза Захвата
  Значение true, если удаляется перехватывающий обработчик события, и false, если удаляется обычный обработчик события.

js

removeEventListener (событие, обработчик события, этап события)

HTML

<span id="test">Тест</span>
<script type="text/javascript">

    function consoleS(){console.log('Тест')};
    var test=document.getElementById('test');
    test.addEventListener('click',consoleS,false);

</script>

bubbling и capturing

bubbling - (всплытие) порядок выполнения событий должен подниматься («булькать») вверх по структуре DOM-дерева.
capturing - обработка событий идет вниз по DOM-дереву. В IE события всегда будут «булькать» подниматься вверх.
В остальных браузерах по умолчанию стоит также bubbling, но можно регулировать (через 3-й параметр метода addEventListener: если передать значение true, то событие будет срабатывать на фазе захвата, если false – то после окончания захвата, на фазе всплытия)

attachEvent и dettachEvent

IE не поддерживает addEventListener и removeEventListener, однако для IE существуют аналогичные методы attachEvent (on + событие(event), обработчик события(listener)) и detachEvent (on + событие(event), обработчик события(listener) ).

Кроссбраузерная привязка обработчика события

Для кроссбраузерной привязки обработчика события можно использовать конструкцию if...else:

javascript

var test=document.getElementById('test');

function consoleS(){console.log('Тест')};

if(test.addEventListener)
{  // all browsers
    test.addEventListener("click",consoleS,false)
}
else
{   // IE
    test.attachEvent("onclick",alerting)
}

Есть функция для перебора методов привязки обработчика события:

javascript

function addEvent(elem, type, handler)
{
    if (elem.addEventListener)
    {
        elem.addEventListener(type, handler, false)
    }
    else
    {
        elem.attachEvent("on"+type, handler)
    }
}

• elem – елемент, к которому привязывается событие;
• type – событие;
• handler – обработчик события

Соответственно, есть функция для перебора методов отвязки обработчика события:

js

function removeEvent(elem, type, handler)
{
    if (elem.removeEventListener)
    {
        elem.removeEventListener(type, handler, false)
    }
    else
    {
        elem.detachEvent("on"+type, handler)
    }
}

Пример использования

Ниже приведен пример (использованы материалы статьи) для кроссбраузерной привязки и отвязки обработчика события для элемента:

HTML

<div id="a">Клик</div>
<div id="b">Отменить обработчик события</div>
<div id="c">Поновить обработчик события</div>

javascript

function addEvent(elem, type, handler)
{
    if (elem.addEventListener)
    {
        elem.addEventListener(type, handler, false)
    }
    else
    {
        elem.attachEvent("on"+type, handler)
    }
}
function removeEvent(elem, type, handler)
{
    if (elem.removeEventListener)
    {
        elem.removeEventListener(type, handler, false)
    }
    else
    {
        elem.detachEvent("on"+type, handler)
    }
}

    var a,b,c;
    a=document.getElementById('a');
    b=document.getElementById('b');
    c=document.getElementById('c');
    var num=0;
    var ind='yes';

//Подсчёт количества событий
    function clickCount()
    {
        a.innerHTML="Событий: "+num;
        num+=1;
    }
//Отмена событмя клика для элемента  #a
    function cancelCount()
    {
        if(ind == 'yes')
        {
            removeEvent(a,"click",clickCount);
            b.innerHTML = "Отменить обработчик события";
            c.innerHTML = "Обновить обработчик события";
            ind = 'no'
        }
        else
        {
            alert('Вы уже отменили обработчик события')
        }
    }
// Обновляем
    function refreshCount()
    {
        if(ind != 'yes')
        {
            addEvent(a,"click",clickCount);
            b.innerHTML="Отменить обработчик события";
            c.innerHTML="Обработчик события обновлен";
            ind = 'yes'
        }
        else
        {
            alert('Вы уже обновили обработку события')
        }
    }

    addEvent(a,"click",clickCount);
    addEvent(b,"click",cancelCount);
    addEvent(c,"click",refreshCount);