onclick=“VS事件处理程序

Question

onclick=“VS事件处理程序

如果我希望执行一个函数，我更喜欢执行内联js：

<p id="element" onclick="doSomething();">Click me</p>

因为它更容易调试。

但是，我听到人们说不要使用内联js，并这样做：

document.getElementById('element').onclick = doSomething;

为什么推荐js事件侦听器？

Answer 1

避免内联JavaScript有很多原因，其中最重要的可能是代码可维护性。一个简单的例子(我只是为了演示目的使用jQuery)。<p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p><p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p> <p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p><p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p> <p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p><p&nbsp;class="element"&nbsp;onclick="doSomething();">Click&nbsp;me</p>如果突然收到一个请求，要求更改所有段落以执行另一项功能，该怎么办？在您的示例中，您必须手动更改HTML代码中的所有内容。但是，如果您选择将HTML与JavaScript分离，您可以这样做。<p&nbsp;class="element">Click&nbsp;me</p><p&nbsp;class="element">Click&nbsp;me</p><p&nbsp;class="element">Click&nbsp;me</p><p&nbsp;class="element">Click&nbsp;me</p> <p&nbsp;class="element">Click&nbsp;me</p><p&nbsp;class="element">Click&nbsp;me</p>$('.element').bind('click',&nbsp;doSomethingElse);HTML代码也更干净，这使得设计者可以完全专注于设计，而不必担心他们在做一个也涉及到其他人的项目时可能会破坏一些东西。编辑：为我的评论举个例子。Project&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;All&nbsp;the&nbsp;variables/constants/objects&nbsp;that&nbsp;need&nbsp;to&nbsp;be&nbsp;globally&nbsp;accessible&nbsp;inside&nbsp;the&nbsp;Project&nbsp;object. &nbsp;&nbsp;&nbsp;&nbsp;init&nbsp;:&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Main&nbsp;entry&nbsp;point... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.MainMenu.init(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Rest&nbsp;of&nbsp;the&nbsp;code&nbsp;which&nbsp;should&nbsp;execute&nbsp;the&nbsp;moment&nbsp;Project&nbsp;is&nbsp;initiated. &nbsp;&nbsp;&nbsp;&nbsp;}}Project.MainMenu&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;All&nbsp;the&nbsp;variables/constants/objects&nbsp;that&nbsp;need&nbsp;to&nbsp;be&nbsp;accessible&nbsp;only&nbsp;to&nbsp;MainMenu. &nbsp;&nbsp;&nbsp;&nbsp;init&nbsp;:&nbsp;function(){&nbsp;//&nbsp;Is&nbsp;run&nbsp;immediatelly&nbsp;by&nbsp;Project.init() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Event&nbsp;handlers&nbsp;relevant&nbsp;to&nbsp;the&nbsp;main&nbsp;menu&nbsp;are&nbsp;bound&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Rest&nbsp;of&nbsp;the&nbsp;initialization&nbsp;code &nbsp;&nbsp;&nbsp;&nbsp;}}Project.SlideShow&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;All&nbsp;the&nbsp;variables/constants/objects&nbsp;that&nbsp;need&nbsp;to&nbsp;be&nbsp;accessible&nbsp;only&nbsp;to&nbsp;SlideShow. &nbsp;&nbsp;&nbsp;&nbsp;init&nbsp;:&nbsp;function(){&nbsp;//&nbsp;Is&nbsp;run&nbsp;only&nbsp;on&nbsp;pages&nbsp;that&nbsp;really&nbsp;require&nbsp;it. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Event&nbsp;handlers&nbsp;for&nbsp;the&nbsp;slideshow. &nbsp;&nbsp;&nbsp;&nbsp;}}