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 class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>

如果突然收到一个请求，要求更改所有段落以执行另一项功能，该怎么办？在您的示例中，您必须手动更改HTML代码中的所有内容。但是，如果您选择将HTML与JavaScript分离，您可以这样做。

<p class="element">Click me</p><p class="element">Click me</p><p class="element">Click me</p><p class="element">Click me</p>
<p class="element">Click me</p><p class="element">Click me</p>$('.element').bind('click', doSomethingElse);

HTML代码也更干净，这使得设计者可以完全专注于设计，而不必担心他们在做一个也涉及到其他人的项目时可能会破坏一些东西。

编辑：为我的评论举个例子。

Project = {
    // All the variables/constants/objects that need to be globally accessible inside the Project object.

    init : function(){
        // Main entry point...
        this.MainMenu.init();

        // Rest of the code which should execute the moment Project is initiated.
    }}Project.MainMenu = {
    // All the variables/constants/objects that need to be accessible only to MainMenu.

    init : function(){ // Is run immediatelly by Project.init()
        // Event handlers relevant to the main menu are bound here

        // Rest of the initialization code
    }}Project.SlideShow = {
    // All the variables/constants/objects that need to be accessible only to SlideShow.

    init : function(){ // Is run only on pages that really require it.
        // Event handlers for the slideshow.
    }}