JavaScript cross-browser development experience summary (5) js events_javascript skills

Simple event model and advanced event model

Simple event model and advanced event model Simple event is a form in which events are intuitively bound to page elements, such as:

Copy code The code is as follows:

element.onclick = function(){alert(this.innerHTML);}

As long as events unique to individual browsers are not used, general click, mouseover events, etc. can be used in each browser It can be used in this way.

But when an event needs to bind multiple listeners, or dynamically register/remove listeners, the simple event model is not enough, and an advanced event model needs to be used (IE and other browsers use the advanced event model There will be a difference):

Copy code The code is as follows:

//Register
function addEventHandler(element, evtName, callback, useCapture) {
//DOM standard
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE mode, ignore the useCapture parameter
element.attachEvent('on' evtName, callback);
}
}

//Remove
function removeEventHandler( element, evtName, callback, useCapture) {
//DOM standard
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
/ /IE mode, ignore useCapture parameter
element.dettachEvent('on' evtName, callback);
}
}

The calling sequence relationship between the onclick event and the href attribute in the tag
When the a tag responds to the click event, it will first respond to the onclick event, and then execute the jump method in the href . For example, after clicking on the following tags, "button" and "href" will be prompted successively:



However, it is best not to define specific javascript methods in href, because this is the attribute that defines the jump link address. If you need to execute two javascript methods one after another, it should be like this Write:

button

But above In the way of writing, if the onclick binding response method does not submit a request to jump to another page, then you will find that the current web page has been refreshed, because href="#" in the above code means jumping to the top of the current page. But no new html request is issued. Sometimes, we don’t want the page to jump back to the top after responding to the onclick event (especially when the page height is long, a scroll bar appears, and the link is at the bottom of the page, the user still needs to drag the scroll bar after jumping to the top) When retrieving the original position and continuing the operation), then the false value should be returned after onclick to prevent the continued action defined by href, such as:

button

Or replace # with an empty javascript statement:

button


Onload event calling sequence

Sometimes it is necessary to call some scripts to set the initial state of page elements during page initialization. The most standard method is to use the method or the document.onload method. The triggering of the onload event will be called after the page element is rendered, which ensures that the unrendered page element will not be found when the script is executed. If the script is executed in the