可以通过 onclick 添加多个事件处理程序答案

【问题标题】：Can add more than one event handler with onclick可以通过 onclick 添加多个事件处理程序
【发布时间】：2015-05-03 17:18:58
【问题描述】：

以下链接表明我只能为每个项目添加一个事件处理程序。

Onclick vs addEventListener

我创建了一个文本框并添加了两个函数 test1() 和 test2()。他们工作得很好，但根据链接只有一个应该工作。你能解释一下这里发生了什么吗？

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="register1.js"></script>
</head>

<body>

<form method="post" name="formRegister">
    <input id="namel" type="text" maxlength="5" name="txtFirstName" value="Tanvir" onclick="test1();test2();">

</form>

</body>
</html>

js代码：

function test1()
{
    alert(" alert one ");
}

function test2()
{
    var i = 12;
    alert(" alert two " + i);
}

【问题讨论】：

onclick 属性值字符串作为 javascript 代码执行。所以 1 个函数调用或 2 个函数调用不会影响“t1(); t2()”。通过 javascript 将函数处理程序分配给 dom.onclick 事件处理程序时，您只能分配一个函数处理程序引用，例如dom.onclick = t1;尽管您可以分配一个内部调用 t1(); 的匿名函数；和 t2();

标签： javascript html

【解决方案1】：

您实际上只有一个 onclick 处理程序，它只是执行您的两个函数。本质上，这就是“幕后”发生的事情：

<input id="namel" onclick="(function(event) { test1(); test2(); })()">

不使用内联事件的原因有很多，但多个函数调用不是其中之一（正如您刚刚证明的那样）。主要原因是让你的功能远离你的标记和表示层。除此之外，您可以随意选择点击事件的获取内容和时间以及添加/删除：

var element = document.getElementBtId(namel);
element.addEventListener('click', test1);
element.addEventListener('click', test2);

// Then, later, you want to stop test2 from firing on a click, but
// keep any other handlers attached. You cannot do this [easily] when
// you've baked your onclicks into your initial markup.
element.removeEventListener('click', test2);

【讨论】：