Question

我习惯在我的网站中使用内联事件，例如

<head>
<script>
function func() {
alert("test");
}
</script>
</head>
<body>
<div id="mydiv" onclick="func()"></div>
</body>

我注意到这些天的网站根本不使用内联事件。我知道你可以设置事件，如：

document.getElementById('mydiv').onclick = function(){ func()}

这是怎么做的？我是否必须将上述行放在每页的末尾？

如何将按键，点击和模糊事件附加到此网站上的输入字段，例如：https://twitter.com/signup

感谢。

Answer 1

是的，这是向对象添加事件的一种有效方法，但它会阻止一次绑定多个函数。

我建议查看jQuery（或类似的javascript库，如mootools），这是绝大多数网站如今绑定其javascript事件的方式。

例如，在jQuery中，您通常会绑定这样的点击：

$("#mydiv").click(function(event) {
  // click handling code
});

Answer 2

添加事件侦听器的最简洁方法是使用内置方法：

var el = document.getElementById('mydiv');
if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}

function modifyText() {

}

这促进了更清晰，更易读和可重用的代码。（注意attachEvent适用于IE9之前的版本）

您可以将此代码放在<body>标记的末尾（或<body>标记内的任何位置，但在添加DOM元素之后）或window onload函数内 - 在DOM完成加载后执行：

window.onload = function() {  
  // here
};

Answer 3

首选方法是使用addEventListener，通常与库（例如YUI或jQuery）结合使用，以平滑浏览器之间的变化（例如，旧的IE不支持{ {1}}）。

我是否必须将上述行放在每页的末尾？

通常您会将JavaScript放在自己的文件中，然后将addEventListener放入需要它的每个页面中。

Answer 4

这里的主要思想是应该加载要注册处理程序的DOM元素。所以你要么在元素html之后进行事件绑定，要么你可以在window.onload事件处理程序中执行它，它可以在实际的标记定义之前定义，如下所示：

window.onload = function(){
 // your event binding
}

但我的建议是尽可能在文档末尾加入javascript。

如何不使用内联js事件？

4 个答案: