Window Common Event Online

1, window.onload is the window (page) loading event. This event will be triggered when the document content is completely loaded (including images, script files, css files, etc.), and the processing function is called

The following code, when the button is clicked, the dialog box will not pop up, because the page has not been loaded into the button element, and the js click event cannot be executed



"en">

"UTF-8">
Title





The solution is:

window.onload = function() {

var btn = document.querySelector('button');
btn.addEventListener(
'click', function() {
alert(
'click me');
})
}

2, window.onload traditional registration event method can only be written once, if there are more than one, the last window.onload will prevail< /p>

The following code, once the page is loaded, “22” will pop up, and then click the button, the click event cannot be executed, and the “click me” cannot be popped up

< pre> window.onload = function() {

var btn = document.querySelector(button);

btn.addEventListener(
click, function() {

alert(
click me);

})

}

window.onload
= function() {

alert(
22);

}

Solution: If you use addEventListener, there is no limit

window.addEventListener('load'< span style="color: #000000;"> ,function(){

var btn=document.querySelector("button");
btn.onclick
=function(){
alert(
"click");
}
})

window.addEventListener(
'load', function(){
alert(
"22");
})

Once the page loads, “22” pops up, and then click the button, it will pop up “click” again.

3, window loading event: document.addEventListener( ‘DOMContentLoaded’, function(){})

When the DOMContentLoaded event is triggered, only when the DOM is loaded, excluding the style sheet, Pictures, flash, etc. (Only supported by IE9 and above)

If there are many pictures on the page, it may take a long time from user access to onload triggering, and the interactive effect will not be realized, which will inevitably affect the user experience. In this case, use the DOMContentLoaded event to compare suitable.



"en">

"UTF-8">
Title





window.onload = function() {

var btn = document.querySelector('button');
btn.addEventListener(
'click', function() {
alert(
'click me');
})
}

 window.onload = function() {

var btn = document.querySelector('button');
btn.addEventListener(
'click', function() {
alert(
'click me');
})
}
window.onload
= function() {
alert(
22);
}

window.addEventListener('load' ,function(){

var btn=document.querySelector("button");
btn.onclick
=function(){
alert(
"click");
}
})

window.addEventListener(
'load', function(){
alert(
"22");
})

Leave a Comment

Your email address will not be published.