`
wfsheep
  • 浏览: 16895 次
文章分类
社区版块
存档分类
最新评论

onload事件和window,document,body的研究

 
阅读更多

今天在工作中用到了onload事件,发现了一些有趣的事情,比如一般来说,如果我们需要给一个DOM结构绑定一个事件,我们一般会采用如下方法(以Window对象为例):

【现象】

	window.onload = function() {
		console.log('<span style="font-family: Arial, Helvetica, sans-serif;">window.onload</span><span style="font-family: Arial, Helvetica, sans-serif;">');</span>
	};
   
        window.addEventListener && window.addEventListener("load", function() {
		console.log('window.addEvent');
	});
执行这两个方法,可以看到如下截图:


说明,这两个方法都被触发了,在这一点上IE表现也是一致的。

接下来我们来试试document对象

	document.onload = function() {
		console.log('document.onload');
	};
   
        window.addEventListener && document.addEventListener("load", function() {
		console.log('<span style="font-family:Arial, Helvetica, sans-serif;">document</span>.addEvent');
	});
	
	window.attachEvent && document.attachEvent('onload', function() {
		console.log('document.attachEvent');
	});
执行后发现,document的onload事件无论是哪种方式都不会触发。


再接下来,我们来试试body对象

	document.body.onload = function() {
		console.log('body.onload');
	};
	
	window.addEventListener && document.body.addEventListener("load", function() {
		console.log('body.addEvent');
	});
	
	window.attachEvent && document.body.attachEvent('onload', function() {
		console.log('body.attachEvent');
	});
结果如下图:


可以看到,说明通过这种写法只有onload方式绑定的被触发了。

还有更好玩的,当同时给body和window使用onload方法时,只有window的onload方法触发

具体代码如下:

	document.body.onload = function() {
		console.log('body.onload');
	};
	
	window.onload = function() {
		console.log('window.onload');
	}
执行结果如:


【结论】

所以总结如下:
1、onload和addEventListener当使用在window上的时候都触发

2、当使用在document时,都不触发

3、当使用在body上时,只有onload触发

4、当body和window同时使用onload方法时,body的方法会被吃掉。


【深入研究】

这里的研究主要是参看了w3c草案中的一些说明,怕翻译不好,贴出原文,貌似load事件和其他的有很多不同,

6.1.6.3Event firing

Certain operations and methods are defined as firing events on elements. For example, theclick()method on theHTMLElementinterface is defined as firing aclickevent on the element.[DOMEVENTS]

Firing a simple event namedemeans that an event with the namee, which does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated), and which uses theEventinterface, must be dispatched at the given target.

Firing a synthetic mouse event namedemeans that an event with the namee, which does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated), and which uses theMouseEventinterface, must be dispatched at the given target. The event object must have itsscreenX,screenY,clientX,clientY, andbuttonattributes set to 0, itsctrlKey,shiftKey,altKey, andmetaKeyattributes set according to the current state of the key input device, if any (false for any keys that are not available), itsdetailattribute set to 1, and itsrelatedTargetattribute set to null. ThegetModifierState()method on the object must return values appropriately describing the state of the key input device at the time the event is created.

Firing aclickeventmeansfiring a synthetic mouse event namedclick, which bubbles and is cancelable.

The default action of these events is to do nothing except where otherwise stated.

6.1.6.4Events and theWindowobject

When an event is dispatched at a DOM node in aDocumentin abrowsing context, if the event is not aloadevent, the user agent must also dispatch the event to theWindow, as follows:

  1. In the capture phase, the event must propagate to theWindowobject before propagating to any of the nodes, as if theWindowobject was the parent of theDocumentin the dispatch chain.
  2. In the bubble phase, the event must propagate up to theWindowobject at the end of the phase, unless bubbling has been prevented, again as if theWindowobject was the parent of theDocumentin the dispatch chain

另外就是,在第6.1.6.2节中有详细描述window,document,body对象对各事件的支持,因为太长,就不贴出来了。


Ps:本文纯属个人研究,如有谬误,烦请指出,万分感谢。


分享到:
评论

相关推荐

    JQuery-- onload,ready方法详细解说

    在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件的触发时机。在页面加载完成后,会...

    全面解析jQuery $(document).ready()和JavaScript onload事件

    首先,我们要了解在Web开发中,页面的加载顺序是十分重要的。为了确保JavaScript代码能够在页面元素...在实现时,开发者应根据具体需求选择合适的时机绑定事件和执行JavaScript代码,以避免执行时机不当引起的问题。

    页面中body onload 和 [removed] 冲突的问题的解决

    这时,`body.onload` 和 `window.onload` 事件就显得尤为重要。然而,当这两个事件同时存在时,可能会出现冲突,导致代码执行顺序混乱或只执行其中一个事件。本文将详细探讨这个问题,并提供解决方案。 `body....

    js的onload事件及初始化按钮事件示例代码

    除了`onload`事件,示例代码还涉及了按钮事件的初始化和绑定。在JavaScript中,有多种方式可以为按钮或其他元素添加事件监听器: 1. **在HTML元素内直接绑定**: ```html ()"&gt;绑定方式一 ``` 2. **在JavaScript...

    jQuery(document).ready(function($) { });的几种表示方法

    总结来说,`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式,而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别,可以帮助开发者更有效地...

    window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到[removed]中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window....

    获取页面长宽和滚动条的位置

    &lt;!... function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth + window.scrollMaxX;...&lt;body onload="main();"&gt; &lt;/body&gt; &lt;/html&gt;

    用JS(javascript)从另一个html中读取标题和正文body

    - 如果目标HTML文件和当前页面在同一域下,可以将目标HTML加载到一个隐藏的IFrame中,然后通过`window.frames`或`contentWindow`属性访问IFrame的`document`对象,获取标题和body。 一旦获取到HTML文本,解析标题...

    利用 window_onload 实现select默认选择

    请参考这个程序: &lt;?... ?&gt; &lt;... &lt;head&gt; &lt;... charset=gb2312"&gt;...meta name="GENERATOR" content="Microsoft FrontPage 4.0"&gt;...meta name="ProgId" content="FrontPage....body onload="window.form1.day.

    窗口和表单事件.pptx

    1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...

    jQuery ready()和onload的加载耗时分析

    为了详细说明这些知识点,我们首先需要理解document.ready()和window.onload事件处理程序各自的作用和差异。document.ready()是jQuery库中提供的一个函数,它的主要作用是在DOM完全加载完成后就立即执行代码。由于...

    jQuery中document与window以及load与ready 区别详解

    在探讨jQuery中document与window的区别以及load和ready事件的不同之处时,我们首先需要了解JavaScript中的基本概念以及jQuery是如何封装和简化这些操作的。jQuery作为一个流行的JavaScript库,它提供了一套简化的...

    js 某个页面监听事件渲染完毕的时间.pdf

    JavaScript页面渲染完毕时间的监听是前端开发者不可或缺...通过合理选择和使用`window.onload`、`$(document).ready`或`DOMContentLoaded`事件,我们可以确保在正确的时间执行必要的操作,从而提升网页的性能和交互性。

    jsp页面加载方法

    在方法1中,我们使用了window的onload事件来执行openTheIndexPage()函数。当页面完全加载完成后,onload事件将被触发,从而执行openTheIndexPage()函数。这种方法是最常用的jsp页面加载方法之一。 代码实现 ```...

    javaScript的对象window

    在实际开发中,`window`对象的使用非常广泛,例如,我们可以通过`window.onload`来监听页面加载完成事件,通过`window.addEventListener`来添加事件监听器,通过`window.scrollTo`实现页面滚动到特定位置等。...

    javascript事件详解

    例如,如果想要在页面加载完成后改变body的边框颜色,正确的做法是注册一个onload事件处理函数,而不是使用阻塞式的while循环: ```javascript window.onload = function() { document.getElementsByName('body')...

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    这个资源包含了JavaScript中的各种事件和它们的功能,有助于开发者更好地理解和应用JavaScript事件。 总之,理解并熟练运用JavaScript中的事件处理是提升网页用户体验的关键。通过绑定事件监听器,你可以创建响应...

    JQuery下关于$.Ready()的分析

    对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如: 1.加载多个函数的问题 &lt;body onload=”a();b();”&gt; &lt;/body&gt; 在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery....

    Js方法打开网页全屏显示 模拟F11

    为了实现自动全屏,可以在页面加载完成后触发全屏操作,可以利用`window.onload`或`DOMContentLoaded`事件: ```javascript window.onload = function() { fullScreen(); }; ``` 或者使用`DOMContentLoaded`事件...

    浅析document.ready和[removed]的区别讲解

    本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未...

Global site tag (gtag.js) - Google Analytics