正确绑定javascript事件

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事件绑定可能是使用JavaScript库的首要原因.我不关心它是哪一个,其他人一遍又一遍地解决了这个问题.以下是处理器函数内部的自酿实现中的问题:

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

而这样的例子不胜枚举...

在这些日子里推出自己的唯一理由是学习.那没关系.不过,请阅读PPK的浏览器事件简介.看看jQuery源代码.看看Prototype源码.你不会后悔的.

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));