JavaScript Learning 13: Event Binding

There are two types of event bindings: Traditional event binding (inline model, script model), and modern event binding (DOM2-level model). Modern event binding provides us with more powerful and convenient features on the basis of traditional bindings.

issues with traditional event bindings

Because the inline model is seldom used, there is no discussion 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 a number of issues with this binding event, specifically as follows:

11 event handlers trigger two events, and the one behind 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 Event switcher, when expanding, there will be three issues: coverage, reduced readability, this delivery problem.

The problem with writing custom event handlers is that two functions with the same function name have been incorrectly registered many times, so you should block out the extra. In this way, it is more troublesome to customize it.

Event handling function

The DOM2 level event defines two methods for adding events and deleting event handlers: AddEventListener () and RemoveEventListener (). Both methods are included in all DOM nodes, and they all accept 3 parameters: event name, function, bubbling, or captured Boolean value (true means capture, false for bubbling).

<span style= "FONT-SIZE:18PX;" >window.addeventlistener (' Load ', init,false); Window.addeventlistener (' Load ', init,false); function init () {alert (' Lian ');} </span>

The benefits of comparing our customizations are: 1 do not need to customize 2 can mask the same function 3 can be set to bubble and capture.

IE event handler function

IE implements two methods similar to the one in DOM: Attachevent and DetachEvent. The two methods accept the same arguments: event names and functions.

There are many differences in the event handler function in IE: 1.IE does not support capture, only bubble 2.IE Add event cannot mask duplicate function; 3. The this in IE points to a window instead of a DOM object; 4. In traditional events, IE is not acceptable to the event object, but after the use of attchevent can be.

Since there are many problems in the event binding function in IE, it is not used in practice.

Additional additions to the event object

A property is provided in the Relatedtarget, which can be used in mouseover and mouseout events to obtain a DOM object from where and from where it was moved.

IE provides two sets of properties for moving in and out: Fromelement and toelement, respectively, corresponding to MouseOver and mouseout.

<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: For JavaScript event learning is temporarily over, with three blog to learn and summarize the event, this piece of content is more important, although understand the general content, but some details of the things have not mastered, Look forward to learning and deepening in the future project practice.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Learning 13: Event Binding