我可以在一个元素中有两个 JavaScript onclick 事件吗？答案

【问题标题】：Can I have two JavaScript onclick events in one element?我可以在一个元素中有两个 JavaScript onclick 事件吗？
【发布时间】：2010-05-21 10:34:40
【问题描述】：

我们可以在一个输入类型按钮标签中放置两个 JavaScript onclick 事件吗？调用两个不同的函数？

【问题讨论】：

标签： javascript

【解决方案1】：

这个有效：

<input type="button" value="test" onclick="alert('hey'); alert('ho');" />

还有这个：

function Hey()
{
    alert('hey');
}

function Ho()
{
    alert('ho');
}

.

<input type="button" value="test" onclick="Hey(); Ho();" />

所以答案是 - 是的，你可以 :) 但是，我建议使用不显眼的 JavaScript。将 js 与 HTML 混合是很讨厌的。

【讨论】：

【解决方案2】：

HTML

<a href="#" id="btn">click</a>

还有 javascript

// get a cross-browser function for adding events, place this in [global] or somewhere you can access it
var on = (function(){
    if (window.addEventListener) {
        return function(target, type, listener){
            target.addEventListener(type, listener, false);
        };
    }
    else {
        return function(object, sEvent, fpNotify){
            object.attachEvent("on" + sEvent, fpNotify);
        };
    }
}());

// find the element
var el = document.getElementById("btn");

// add the first listener
on(el, "click", function(){
    alert("foo");
});

// add the second listener
on(el, "click", function(){
    alert("bar");
});

这将在单击时提醒“foo”和“bar”。

【讨论】：

【解决方案3】：

您可以附加一个处理程序，该处理程序可以调用任意数量的其他处理程序：

<a href="#blah" id="myLink"/>

<script type="text/javascript">

function myOtherFunction() {
//do stuff...
}

document.getElementById( 'myLink' ).onclick = function() {
   //do stuff...
   myOtherFunction();
};

</script>

【讨论】：

此方法的缺点是这里的上下文将是全局窗口对象，并且“this”在 myOther.... 声明中不起作用，这只是引用函数而不将其附加到元素的onclick属性，这个值得解释一下。 :) 除此之外，答案将适用于“调用 2 个函数或 200”的情况。

【解决方案4】：

没有必要在一个元素中有两个函数，你只需要一个调用另外两个函数！

HTML

<a href="#" onclick="my_func()" >click</a>

JavaScript

function my_func() {
    my_func_1();
    my_func_2();
}

【讨论】：

【解决方案5】：

你也可以试试这样的

<a href="#" onclick="one(); two();" >click</a>

<script type="text/javascript">
    function one(){
        alert('test');
    }

    function two(){
        alert('test2');
    }
</script>

【讨论】：