Today, in the work of the OnLoad event, found some interesting things, such as generally speaking, if we need to bind a DOM structure to an event, we generally use the following method (for example, Window object):
Phenomenon
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 ');});
To execute both methods, you can see the following:
Note that both methods are triggered, and at this point the IE performance is consistent.
Next, let's try the document object.
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 ');});
After execution, it is found that the OnLoad event of document is not triggered either way.
And then, let's try the body object.
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 ');});
Results such as:
As you can see, the description is triggered only by the OnLoad method binding in this notation.
And more fun, when using the OnLoad method for both body and window, only the OnLoad method of window triggers
The specific code is as follows:
Document.body.onload = function () {console.log (' body.onload ');}; Window.onload = function () {console.log (' window.onload ');}
Execution results such as:
Conclusion
So the summary is as follows:
1. OnLoad and AddEventListener are triggered when used on a window
2, when used in document, does not trigger
3, when used on the body, only the OnLoad trigger
4. When both the Body and window use the OnLoad method, the body method is eaten.
"In-depth study"
The research here is mainly to see some of the description of the draft, the fear of translation is not good, paste the original text, seemingly load events and other there are many different,
6.1.6.3 Event Firing
certain operations and methods is defined as firing events on elements. For example, The click ()
method on The htmlelement
interface is defined as firing a Click
event on the element. [domevents]
firing a simple event named e means e that a event with the name, which does not bubble (except where otherwise stated) and was not cancelable (exce PT where otherwise stated), and which uses Event
the interface, must is dispatched at the given target.
firing a synthetic mouse event named e means that a event with the namee, which does not bubble (except where otherwise stated) and are not cancelable (except where otherwise stated), and which u SES theMouseEvent
Interface, must is dispatched at the given target. The event object must has itsscreenX
,screenY
,clientX
,clientY
, andbutton
Attributes set to 0, itsctrlKey
,shiftKey
,altKey
, andmetaKey
Attributes set according to the current state of the key input device, if any (false for any keys is not available), Itsdetail
attribute set to 1, and itsrelatedTarget
attribute 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 I S created.
firing a click
event means firing a synthetic mouse event named click
, which Bubbles and is cancelable.
The default action of these events is to does nothing except where otherwise stated.
6.1.6.4Events and the
Window
Object
when an event was dispatched at a DOM node in A document
in a browsing context, if the event is not A load
event, the user agent must also dispatch the event to The window
, as follows:
- In the capture phase, the event must propagate to the
Window
object before propagating to any of the nodes, as if Window
the Object was the parent of the the the The Document
dispatch chain.
- In the bubble phase, the event must propagate the object at
Window
the end of the phase, unless bubbling have been pre Vented, again as if the object was the parent of the the the The Window
Document
dispatch chain
In addition, in section 6.1.6.2, there is a detailed description of the Window,document,body object support for each event, because it is too long to be posted.
Ps: This article is purely personal research, if there is a fallacy, please point out, extremely grateful.
The study of onload events and Window,document,body