将简单的jquery代码转换为javascript

(function() {
    var largeImage = document.getElementById('largeImage'),description = document.getElementById('description');

    document.getElementById('thumbs').onclick = handleGalleryClick;

    function handleGalleryClick(event) {
        var target;

        event = event || window.event;                // Handle IE difference
        target = event.target || event.srcElement;    // Another one
        if (target && target.tagName.toUpperCase() === "IMG") {
            largeImage.src = target.src.replace('thumb','large');
            description.innerHTML = target.getAttribute('alt');
        }
    }
})();

确保脚本出现在页面底部(就在关闭的body元素之前)或者将它包装在window.onload中,尽管你不会对发生的时间感到满意,因为window.onload毕竟是加载图像等.

但是：我必须同意Frédéric和John的意见：为此加载一个库并不过分,在jQuery(和Prototype和YUI)的情况下,你可以使用load via the Google CDN并使用你的页面访问者可能已经在其缓存中拥有的内容.

更新：在下面的评论中,scunliffe指出了一个可能影响上述内容的IE错误I’ve blogged in the past,这是由jQuery为您神奇地解决的.所以我认为标记这个简单的小脚本所具有的各种复杂性可能是有用的,一个好的库将为您解决：

> addEventListener与attachEvent：IE6到IE8不支持DOM2标准的addEventListener,而是使用Microsoft自己的attachEvent.为了简单起见,我实际上在上面对此进行了抨击并且只使用了DOM0 onclick = …样式,但是有一个很好的理由不这样做：使用DOM0样式,每个元素每个事件只能有一个事件监听器,并附加另一个将拆分前一个.所以我上面的代码与其他代码不能很好地兼容,因为它会删除任何以前的DOM0点击处理程序(并且将在上面的代码运行后附加的DOM0点击处理程序移除).
>访问事件对象：DOM standard表示事件对象作为第一个参数传递给事件处理程序.相反,IE使用全局window.event对象.这就是我上面第一次“IE差异”的原因.
>事件对象的属性：…类似地,DOM standard says事件被触发的实际元素将是目标属性. IE6到IE8使用srcElement代替. (还有其他差异.)因此我的“另一个”评论.
> Bug解决方法：这是scunliffe指出的conflation事情.以上依赖于document.getElementById才能正常工作,但在IE6和IE7上却没有.它混合了几个名称空间,而不仅仅是使用id值.

…总而言之,这个简单的小脚本非常清楚地表明,一般的图书馆 – 特别是一个好的图书馆 – 可以节省您的时间,保持您的网站广泛兼容,并且通常值得花费很少.我不了解其他的,但是例如jQuery为你解决了混淆问题,但另一个众所周知且备受推崇的文库Prototype却没有.

(旁注：在我们敲微软太多之前,让我们记住,attachEvent和srcElement可能早于DOM2规范;微软在IE5.5和IE6中做了很多创新.[例如,他们发明了ajax.] IE6是 – 到目前为止 – 2001年推出的最好的浏览器,对Opera道歉.那就是IE6在标准出现之后出现了,所以在那时添加标准的东西,或者几年后在IE7中添加标准的东西,可能是值得做的事情！但是IE9修复了很多这样的东西.)