JavaScript - лучший способ добавить событие в элемент без библиотеки или с помощью атрибута onclick?

Question

Итак, я хочу, чтобы элемент, например: <a id="target">click me</a> выполнял функцию JavaScript, например: functionName();
Я хочу избегать использования атрибутов "on", т. Е.означает список совместимых браузеров A от YUI

Answer 1

var el = document.getElementById("target");
var old = el.onclick;
el.onclick = function() {
  if(old) old();
  functionName();
  // if you want to prevent default action
  // return false; 
};​

Более надежное решение см .: addEvent Дина Эдварда .

Answer 2

Я не знаю, считается ли это библиотекой, но вот функции addEvent () и removeEvent (), написанные Джоном Резигом (да, , что Джон Резиг ):

function addEvent( obj, type, fn )
{
    if (obj.addEventListener)
    {
        obj.addEventListener( type, fn, false );
    }
    else if (obj.attachEvent)
    {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); };
        obj.attachEvent( "on"+type, obj[type+fn] );
    }
}

function removeEvent( obj, type, fn )
{
    if (obj.removeEventListener)
    {
        obj.removeEventListener( type, fn, false );
    }
    else if (obj.detachEvent)
    {
        obj.detachEvent( "on"+type, obj[type+fn] );
        obj[type+fn] = null;
        obj["e"+type+fn] = null;
    }
}

Использование:

addEvent(document.getElementById('target'), 'click', functionName);
removeEvent(document.getElementById('target'), 'click', functionName);

Answer 3

Используйте метод getElementById, чтобы найти элемент и установить его событие onclick:

document.getElementById('target').onclick = functionName;

Answer 4

document.getElementById('target').onclick=function() {
  functionName();
  return false;
}

Полагаю, вы имели в виду "без атрибута html onclick"