在javascript中爲現有onclick屬性添加更多行爲

Question

如何爲現有的onclick事件添加更多行爲 如果現有的物體看起來像

<a href="http://abc" onclick="sayHello()">link</a> 
<script> 
function sayHello(){ 
    alert('hello'); 
} 

function sayGoodMorning(){ 
    alert('Good Morning'); 
} 
</script> 

我怎樣才能增加更多的行爲的onclick，這也將做以下

alert("say hello again"); 
sayGoodMorning() 

最好的問候， 凱沙夫

Answer 1

這裏是最骯髒的方式:)

<a href=".." onclick='sayHello();alert("say hello again");sayGoodMorning()'>.</a> 

下面是一個有點理智的版本。裹成的一切功能：

<a href=".." onclick="sayItAll()">..</a> 

的JavaScript：

function sayItAll() { 
    sayHello(); 
    alert("say hello again"); 
    sayGoodMorning(); 
} 

而這裏的做的正確方法。使用事件註冊模型，而不是依賴onclick屬性或屬性。

<a id="linkId" href="...">some link</a> 

的JavaScript：

var link = document.getElementById("linkId"); 
addEvent(link, "click", sayHello); 
addEvent(link, "click", function() { 
    alert("say hello again"); 
}); 
addEvent(link, "click", sayGoodMorning); 

的addEvent功能的跨瀏覽器實現如下（從scottandrew.com）：

function addEvent(obj, evType, fn) { 
    if (obj.addEventListener) { 
     obj.addEventListener(evType, fn, false); 
     return true; 
    } else if (obj.attachEvent) { 
     var r = obj.attachEvent("on" + evType, fn); 
     return r; 
    } else { 
     alert("Handler could not be attached"); 
    } 
} 

需要注意的是，如果所有3個行動必須順序運行，那麼你仍然應該繼續並將它們包裝在一個函數中。但是這種方法仍然是第二種方法，儘管看起來有點冗長。

var link = document.getElementById("linkId"); 
addEvent(link, "click", function() { 
    sayHello(); 
    alert("say hello again"); 
    sayGoodMorning(); 
}); 

Answer 2

一種方法是寫第三個功能：

<a href="http://abc" onclick="foo()">link</a> 
<script> 
function sayHello(){ 
    alert('hello'); 
} 

function sayGoodMorning(){ 
    alert('Good Morning'); 
} 

function foo() { 
    alert("say hello again"); 
    sayGoodMorning(); 
} 
</script> 

Answer 3

<a href="http://abc" onclick="sayHello(),sayX(),sayY(),sayZ()">link</a>

也將工作

Answer 4

假設你的代碼略有變化：

<a href="http://abc" id="a1" onclick="sayHello()">link</a> 

在純醇」的JavaScript，你會做這樣的事情。

var a = document.getElementById('a1'); 
a.onclick = function() { alert('say hello again'); a.onclick(); } 

值得注意的是，jQuery使這一點更容易。例如，請參閱click，bind和one的文檔，並且一般在event handler attachment的部分。

Answer 5

另一種未提及的方式是捕獲當前分配給element.onclick屬性的函數，然後分配一個包裝舊函數的新函數。一個簡單的實現來證明會是這樣的

function addEvent(element, type, fn) { 
    var old = element['on' + type] || function() {}; 
    element['on' + type] = function() { old(); fn(); }; 
} 

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

function sayHello(){ 
    alert('hello'); 
} 

function sayGoodMorning(){ 
    alert('Good Morning'); 
} 

addEvent(a, 'click', sayHello); 
addEvent(a, 'click', sayGoodMorning); 

Working Demo這裏