Question

我有一个用jquery编写的简单照片库的代码，但我认为为这么简单的事情加载整个库是不合适的。我想用原始的javascript。

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

此外，我想知道如何将加载微调器附加到此代码。感谢。

jsfiddle

Answer 1

不使用任何库，它看起来有点像这样，虽然当然还有其他方法可以写它：

(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），你可以{{3}无论如何，使用你的页面访问者可能已经拥有的东西。

更新：在下面的评论中，load via the Google CDN指出了可能影响上述内容的scunliffe的IE错误，这是由jQuery为您神奇地解决的问题。因此，我认为标记这个简单的小脚本所具有的各种复杂性可能是有用的，好的库将为您解决：

addEventListener与attachEvent ：IE6到IE8不支持DOM2标准addEventListener，而是使用Microsoft自己的attachEvent。为了简单起见，我实际上在上面对此进行了抨击并且只使用了DOM0 onclick = ...样式，但有一个很好的理由不这样做：使用DOM0样式，你只能有一个每个元素的每个事件的事件监听器，并且附加另一个将分离前一个元素。所以我上面的代码与其他代码不能很好地兼容，因为它会删除任何以前的DOM0 click处理程序（并且在上面的代码运行后将被附加的DOM0 click处理程序驱逐出去）。
访问event对象：I've blogged in the past表示event对象作为第一个参数传递给事件处理程序。相反，IE使用全局window.event对象。这就是我上面第一次“IE差异”的原因。
event对象上的属性：...同样，DOM standard触发事件的实际元素将是target属性。 IE6到IE8使用srcElement代替。（还有其他差异。）因此我的“另一个”评论。
错误解决方法：这是scunliffe指出的DOM standard says内容。以上依赖document.getElementById正常工作，但在IE6和IE7上，它没有。它会混合使用多个名称空间，而不仅仅使用id值。

...总而言之，这个简单的小脚本非常清楚地说明了一般的库 - 尤其是好的库 - 可以节省您的时间，让您的网站保持广泛兼容，而且一般都值得他们付出一点代价。我不知道其他的，但是例如jQuery为你解决了混淆错误，但另一个众所周知且备受推崇的原型库Prototype却没有。

（旁注：在我们敲击微软之前，让我们记住attachEvent和srcElement可能早于DOM2规范;微软在IE5.5和IE6中做了很多创新。 [例如，他们发明了conflation。] IE6是 - 远 - 2001年最好的浏览器，对Opera道歉。也就是说，IE6在标准之后出现了，所以在那时添加标准内容，或者在IE7中添加标准内容，可能是值得做的事情！但是IE9修复了很多这样的东西。）

Answer 2

你称之为简单，但它正在做一些先进的事情。要模拟delegate，您必须在根容器上附加一个点击监听器，并检查所有<img>标记的点击次数。

更不用说你必须在IE中使用attachEvent而不是addEventListener

代码看起来像（未经测试）：

function listen(root, callback) {
    var addEvent = 'attachEvent';
    if (typeof window.addEventListener === 'function') {
        addEvent = 'addEventListener';
    }

    root[addEvent](function (e) {
        if (/img/i.test(e.target.tagName)) {
            callback.apply(e.target);
        }
    }, false);
}

listen(document.getElementById('thumbs'), function () {
    document.getElementById('largeImage').src = this.src.replace(/thumb/ig, 'large');
    document.getElementById('description').src = this.alt;
});

事实上，正如TJ的帖子所示，我甚至没有处理所有的IE特质。考虑到它为您解决的所有浏览器问题，jQuery并不过分。

将简单的jquery代码转换为javascript

2 个答案: