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

另一种未提及的方法是捕获当前分配给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 此处

Answer 3

一种方法是编写第三个函数：

<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 4

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

也可以使用

Answer 5

假设您的代码稍有变化：

<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上的文章。

在javascript中为现有的onclick属性添加更多行为

5 个答案: