JavaScript learning 13: Event binding and javascript binding
Event binding can be divided into two types: traditional event binding (Inline model and script model) and modern event binding (DOM2 model ). Binding modern events provides us with more powerful and more convenient functions based on traditional binding.
Traditional event binding Problems
Because inline models are rarely used, we will not discuss them here. Let's take a look at the script model and assign a function to an event handler.
<span style="font-size:18px;">var box=document.getElementById('box');box.onclick=function(){alert('Lian');};box.onclick=function(){alert('Jiang');};</span>
There are many problems with event binding as follows:
1. One event processing function triggers two events, and the other will completely overwrite the previous one.
<span style="font-size:18px;">box.onclick=toBlue;function toRed(){this.className='red';this.onclick=toBlue;}function toBlue(){this.className='blue';this.onclick=toRed;}</span>
2. The event switch has three problems during expansion: coverage, reduced readability, and this transmission.
Another problem is that two functions with the same function name are mistakenly registered multiple times. In this case, we should block unnecessary functions. In this way, it will be more troublesome.
W3C event processing functions
DOM2-level events define two methods for adding and deleting Event Handlers: addEventListener () and removeEventListener (). All DOM nodes contain these two methods, and they all accept three parameters: event name, function, bubble, or captured Boolean value (true indicates capture, false indicates bubble ).
<span style="font-size:18px;">window.addEventListener('load',init,false);window.addEventListener('load',init,false);function init(){alert('Lian');}</span>
Compared with our custom functions, 1 does not need to be customized. 2 can be shielded from the same function. 3 can be set to bubble and capture.
IE event processing functions
IE implements two similar methods as in DOM: attachEvent and detachEvent. The two methods accept the same parameter: event name and function.
There are many differences between event processing functions in IE, compared with W3C DOM: 1. IE does not support capture, only supports bubble 2. duplicate functions cannot be blocked when adding events to IE; 3. in IE, this points to a window rather than a DOM object. 4. in traditional events, IE cannot accept event objects, but it can be done after attchEvent is used.
Since there are many problems with the event binding function in IE, It is not used in practice.
Additional event object supplements
The W3C provides the relatedTarget attribute, which can be used to obtain the DOM objects from where to move and from in the mouseover and mouseout events.
IE provides two sets of attributes for migration and removal: fromElement and toElement, which correspond to mouseover and mouseout respectively.
<span style="font-size:18px;">function getTarget(evt){var e=evt||window.event;if(e.srcElement){if(e.type=='mouseover'){return e.fromElement;} else if(e.type=='mouseout'){return e.toElement;}}else if(e.relatedTarget){return e.relatedTarget;}}</span>
Summary: The learning of JavaScript events has come to an end for the moment. I used three blogs to learn and summarize the events. It can be seen that the content of this section is important, although I have understood the general content, I have not mastered some details. I hope to learn and deepen it in future project practices.
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.