Question

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

我创建了一个文本框，并添加了两个函数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);
}

Answer 1

你实际上只有一个onclick处理程序，它只是执行你的两个函数。从本质上讲，这就是幕后发生的事情＆＃34;：

<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);

可以使用onclick添加多个事件处理程序

1 个答案: