在沒有庫或使用onclick屬性的情況下將事件添加到元素的最佳方法？

Question

所以我想要一個元素，即： <a id="target">click me</a>以執行JavaScript函數，即： functionName();
我想避免使用“ on”屬性，即： onclick="" 。
跨瀏覽器是指YUI的A級瀏覽器兼容性列表

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; 
};​

有關更強大的解決方案，請參見： Dean Edward的addEvent 。

Answer 2

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

我假設您的意思是“沒有onclick html屬性”

Answer 3

使用getElementById方法查找元素，並將其設置為onclick事件：

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

Answer 4

我不知道這是否算作一個庫，但這是John Resig（是的， John Resig ）編寫的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);