Javascript 如何不使用内联js事件？_Javascript_Html_Events

Javascript 如何不使用内联js事件？

javascript html events

Javascript 如何不使用内联js事件？,javascript,html,events,Javascript,Html,Events,例如，我习惯于在我的网站中使用内联事件 <head> <script> function func() { alert("test"); } </script> </head> <body> <div id="mydiv" onclick="func()"></div> </body> 应该这样做吗？我必须在每一页的末尾加上这一行吗如何将按键、单击和模糊事件附加到此站点上的输入字段，例如：谢谢。

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

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

应该这样做吗？我必须在每一页的末尾加上这一行吗

如何将按键、单击和模糊事件附加到此站点上的输入字段，例如：

谢谢。

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

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之前的版本）

您可以将此代码放在

标记的末尾（或

标记中添加DOM元素后的任何位置），也可以放在函数中，该函数在DOM完成加载后执行：

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

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

我建议研究jQuery（或类似的javascript库，如mootools），这是目前绝大多数网站绑定javascript事件的方式

例如，在jQuery中，通常会像这样绑定单击：

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

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

首选方法是使用，通常与平滑浏览器之间变化的库（如or）结合使用（例如，旧IE不支持

addEventListener

）

我必须在每一页的末尾加上这一行吗

通常，您会将JavaScript放在自己的文件中，然后

src

将其放在每个需要它的页面中。

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

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

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

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

对于每个事件，我必须将这段代码放在每个页面的末尾？@user969622更新了我的答案-在底部或窗口内。onload函数这确实更干净，因为它允许对同一事件进行多个绑定，但是，如果没有为绑定抽象出不同的浏览器API，我会认为这样做更糟。使用jQuery、mootools等抽象…@user969622 yes。。。请参阅第96至101行->此答案，因为它指出了单击属性时出现的问题。@SomethVictory多么讽刺。。。你问了5个问题，只接受了其中一个问题的答案……那是因为我从来没有得到正确的答案！直到现在，我仍然可以得到。你有没有看到有人正确回答了我的问题，而我没有接受？