Dom Basic Teaching Event Object _ Basics

Events in the browser exist in the form of objects, and there are also differences between IE browsers and standard DOM browsers for getting event objects. In IE Explorer, the event object is an event for a property of a Windows object, which is typically accessed in the following way.

Copy Code code as follows:

Op.onclick = function () {
var oevent = window.event;
}

Although it is a Window object property, the event object can only be accessed when events occur, and the object disappears after all of the event-handler functions have been executed.

The standard DOM stipulates that the event object must be passed as a unique parameter to the events handler. Once the event object is accessed as a parameter in a similar Firefox browser, the code is as follows:

Copy Code code as follows:

Op.onclick = function (oevent) {
}

Therefore, in order to be compatible with both browsers, the following methods are usually used

Copy Code code as follows:

Op.onclick = function (oevent) {
if (window.event) oevent = window.event;
}

The browser can handle a variety of events, such as mouse events, keyboard events, and browser events, through its series of properties and methods after acquiring the object of the event. Wait

The following are a list of commonly used properties and methods:

As can be seen from the above, there are some similarities between the two types of browsers, such as the Type property is compatible with various browsers, it represents the kind of get the event, returning a value like "click", "MouseMove".

This is useful for the same function to handle multiple kinds of events.

As follows: The same function handles multiple events.

Copy Code code as follows:

<script language= "JavaScript" >
function handle (oevent) {
var disp = document.getElementById ("display");
if (window.event) oevent = window.event; Handling compatibility, getting objects
if (Oevent.type = = "click")
disp.innerhtml = "You clicked on me!" ";
else if (Oevent.type = "MouseOver")
disp.innerhtml = "You move to my top";
}
Window.onload = function () {
var OP = document.getElementById ("box");
Op.onclick = handle;
Op.onmouseover = handle;
}
</script>
<div>
<div id= "box" style= "Width:100px;height:100px;background: #ddd;" ></div>
<p id= "Display" >click me</p>
</div>

The above code adds two event response functions to the DIV in id= "box", and these two events are the same function

In this function, you first consider a compatible get event object, and then use the Type property disk to name the event.

When you detect the three keys of shift, ALT, and CTRL, the two browsers use exactly the same method, all with the Shiftkey,altkey,ctrlkey three properties.

The code is as follows:

Copy Code code as follows:

var bshift = Oevent.shiftkey;
var balt = Oevent.altkey;
var bCTRL = Oevent.ctrlkey;

In addition, both types of browsers use the same methods to get the mouse pointer, all with CLIENTX, Clienty and Screenx, and ScreenY.

where Clientx and clienty represent the location of the mouse in the client area, excluding the browser's status bar, menu bar, and so on.

The code is as follows:

Copy Code code as follows:

var iclientx = Oevent.clientx;
var iclienty = Oevent.clienty;

While Screenx and Sreeny refer to the location of the mouse over the entire computer screen, the code is

Copy Code code as follows:

var iscreenx = Oevent.screenx;
var iscreeny = Oevent.screeny;

Most of the time, developers want to know that the event was triggered by that object, the target of the event.

Suppose the <p> element assigns the OnClick event handler, and when the Click event is triggered, <p> is considered a target.

In IE Explorer, the target is contained in the srcelement attribute of the event object, as follows

Copy Code code as follows:

var otarget = oevent.srcelement;

In the standard Dom browser, the target is included in the targets attribute, and the following code

Copy Code code as follows:

var otarget = Oevent.target;

Gets the target of the event

Copy Code code as follows:

<script language= "JavaScript" >
function handle (oevent) {
var disp = document.getElementById ("display");
if (window.event) oevent = window.event; Handling compatibility, getting objects
var otarget;
if (oevent.srcelement)//handling compatibility, getting events
Otarget = oevent.srcelement;
Else
Otarget = Oevent.target;
disp.innerhtml + = "element name:" + otarget.tagname + <br> "+" element content: "+ otarget.textcontent + <br>"
+ "Before the node immediately:" + otarget.textcontent + "<br>"
;
}
Window.onload = function () {
var OP = document.getElementById ("box");
Op.onclick = handle;
}
</script>
<div>
<div id= "box" style= "Width:100px;height:100px;background: #ddd;" >
Box content
</div>
<p id= "Display" ></p>
</div>
(supplemental) attributes of the Element object http://www.w3school.com.cn/xmldom/dom_element.asp
(supplemental) method of the Element object http://www.w3school.com.cn/xmldom/dom_element.asp

Because the target of the event is different on the two types of browsers, the code must be compatible, and the usual practice is to use the object directly as the condition of the IF statement, as follows

Copy Code code as follows:

if (oevent.srcelement)
Otarget = oevent.srcelement;
Else
Otarget = Oevent.target;

This method is also common in other attributes.