[removed] vs <body onload=“”/>

2018-12-31 15:27发布

What exactly is the difference between the window.onload event and the onload event of the body tag? when do I use which and how should it be done correctly?

标签: javascript
13条回答
不流泪的眼
2楼-- · 2018-12-31 16:02

They both work the same. However, note that if both are defined, only one of them will be invoked. I generally avoid using either of them directly. Instead, you can attach an event handler to the load event. This way you can incorporate more easily other JS packages which might also need to attach a callback to the onload event.

Any JS framework will have cross-browser methods for event handlers.

查看更多
荒废的爱情
3楼-- · 2018-12-31 16:07

<body onload=""> should override window.onload.

With <body onload="">, document.body.onload might be null, undefined or a function depending on the browser (although getAttribute("onload") should be somewhat consistent for getting the body of the anonymous function as a string). With window.onload, when you assign a function to it, window.onload will be a function consistently across browsers. If that matters to you, use window.onload.

window.onload is better for separating the JS from your content anyway. There's not much reason to use <body onload=""> anyway when you can use window.onload.

In Opera, the event target for window.onload and <body onload=""> (and even window.addEventListener("load", func, false)) will be the window instead of the document like in Safari and Firefox. But, 'this' will be the window across browsers.

What this means is that, when it matters, you should wrap the crud and make things consistent or use a library that does it for you.

查看更多
长期被迫恋爱
4楼-- · 2018-12-31 16:09

window.onload can work without body. Create page with only the script tags and open it in a browser. The page doesn't contain any body, but it still works..

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>
查看更多
有味是清欢
5楼-- · 2018-12-31 16:10

There is no difference ...

So principially you could use both (one at a time !-)

But for the sake of readability and for the cleanliness of the html-code I always prefer the window.onload !o]

查看更多
几人难应
6楼-- · 2018-12-31 16:14

if you want to manipulate the DOM the definetely use <body onload="">. this way the event will be triggered when the DOM is loaded. Else there is lag between window.onload event and DOM loading so you could wind up manipulating object that doesnot exists. i would suggest using jquery and the $(document).ready(function(){}). This will work for the best

查看更多
公子世无双
7楼-- · 2018-12-31 16:16

Think of onload like any other attribute. On an input box, for example, you could put:

<input id="test1" value="something"/>

Or you could call:

document.getElementById('test1').value = "somethingelse";

The onload attribute works the same way, except that it takes a function as its value instead of a string like the value attribute does. That also explains why you can "only use one of them" - calling window.onload reassigns the value of the onload attribute for the body tag.

Also, like others here are saying, usually it is cleaner to keep style and javascript separated from the content of the page, which is why most people advise to use window.onload or like jQuery's ready function.

查看更多
登录 后发表回答