Question

我正在寻找绑定javascript事件的最合适有效的方法;特别是onload事件（我希望在页面和所有元素如图像加载之后发生事件）。我知道有很简单的方法可以在jQuery中执行此操作，但我希望使用更高效的原始javascript 方法。

Answer 1

有两种不同的方法可以做到这一点。只有一个会起作用;哪一个取决于浏览器。这是一个使用两者的实用方法：

function bindEvent(element, type, handler) {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else {
      element.attachEvent('on'+type, handler);
   }
}

在你的情况下：

bindEvent(window, 'load', function() {
    // all elements such as images are loaded here
});

Answer 2

我知道你只问过如何绑定事件。但是Ooooo男孩的乐趣并没有就此结束。获得这个正确的跨浏览器还有很多东西，而不仅仅是初始绑定。

@ d。的答案对于您正在寻找的load window事件的特定情况就足够了。但它可能会让新手读者对您的代码产生错误的“正确”感。仅仅因为你绑定了这个事件并不意味着你要注意将它标准化。你可能更好只是修复window.onload：

window.onload = (function(onload) {
  return function(event) {
    onload && onload(event);

    // now do your thing here
  }
}(window.onload))

但是对于事件绑定的一般情况，@ d。的答案远远不能让人感到沮丧。关于它唯一正确的做法是使用特征检测而不是浏览器检测。

不要在这里进行过多的咆哮，但JavaScript事件绑定可能是＃1使用JavaScript库的原因。我不关心它是哪一个，其他人一遍又一遍地解决了这个问题。以下是处理器函数内的自酿实现中的问题：

如何获取event对象本身？
如何阻止事件的默认操作（例如，点击链接但不导航）
为什么this始终指向window对象？
（重新鼠标事件）事件的x / y坐标是什么？
哪个鼠标按钮触发了事件？
是按住Ctrl键单击还是只是常规点击？
实际触发的事件是什么元素？
到的事件是什么元素？（即relatedTarget，例如blur）
如何通过其父DOM取消事件的冒泡？
（Re event bubbling）现在实际接收该事件的元素是什么？（即currentTarget）
为什么我不能从这个keydown事件中获得奇怪的字符代码？
当我添加所有这些事件处理程序时，为什么我的页面会泄漏内存？哎呀！
为什么我不能解除我之前绑定的这个匿名函数？

列表继续......

在这些日子里推销自己的唯一理由是学习。那没关系。不过，请阅读PPK的Intro to browser events。看看jQuery source。看看Prototype source。你不会后悔的。

Answer 3

像这样的东西

window.onload = (function(onload) {
    return function(event) {
        onload && onload(event);

        $(".loading-overlay .spinner").fadeOut(300),
            $(".loading-overlay").fadeOut(300);
            $("body").css({
                overflow: "auto",
                height: "auto",
                position: "relative"
            })
    }
}(window.onload));

Answer 4

window.onload = function() {
   // ...
};

正确绑定javascript事件

4 个答案: