jQuery：将Javascript事件用作内联属性是一个好主意吗？

问题描述

| 在阅读有关JQuery最佳实践的信息时，我最近阅读了以下内容： 切勿将Javascript事件包含在内联属性中。这种做法应完全清除掉。

<a onclick=\"doSomething()\" href=\"#\">Click!</a>

为什么是这样？这是解释吗？我个人认为，当您需要动态设置事件或将事件设置为div时，JQuery是最好的。否则，由于inline属性始终可以调用您选择的方法，因此它允许使用更简洁的代码。 顺便说一句，有关文章： http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/     

解决方法

        我同意本文的原因之一是它涉及代码之间的分层。内联代码导致草率，难以维护的代码。通过包含脚本文件，您减少了更改代码/清理代码/修复错误的时间。如果该内联函数doSomething（）在您的项目中真正流行起来，则将其嵌入每个页面可能是一场噩梦。 我承认我有时会反对这一点，但它过去一直在困扰我。我不能说我会完全改变100％的习惯，但这是一种好的编程习惯。不过，我认为这不是错。那里仍有数百万家商店仍在这样做，他们很可能会在十年后开始这样做。给每个人自己。     ,        不推荐使用内联事件的主要原因是它们很难维护。通常，您应该将所有javascript放在单独的文件中（在某些情况下，“ /内联”您的javascript / css / images有助于提高性能）。 另外，您必须记住jQuery只是javascript。因此，任何暗示每个事件都应始终通过jQuery绑定的文章都是很愚蠢的。但是，如果您已经加载了jQuery，则使用它可能是一个不错的主意，因为它可以解决可能出现的许多跨浏览器问题。 现在，以纯Javascript以更可维护的方式执行此操作，您可以始终：

document.getElementById(\"hello\").onclick = function(){
    // p.s. I clobber any previous onclick handlers 
    // that may have been assigned to this element.
    // Sure,there are ways around this. But they are lame.
    /* If you use this method of event binding in an    */
    /* application/site make sure you don\'t include     */
    /* it in your resume/portfolio. :-)                 */
    alert(\"Hello.\"); 
};

或更好的方法是使用以下内容（未经测试！！！）：

var addEvent = (function( window,document ) {  
    if ( document.addEventListener ) {  
        return function( elem,type,cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.addEventListener(type,cb,false );  
            }  
            else if ( elem && elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i],cb );  
                }  
            }  
        };  
    }  
    else if ( document.attachEvent ) {  
        return function ( elem,cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.attachEvent( \'on\' + type,function() { return cb.call(elem,window.event) } );  
            }  
            else if ( elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i],cb );  
                }  
            }  
        };  
    }  
}( this,document ));

// Use like this:
var element = document.getElementById(\"hello\");
addEvent(element,\"click\",function(){ alert(\"Hello.\"); });