Events in the browser all exist in the form of objects. Similarly, there is also a difference in obtaining event objects between IE browser and standard dom browsers. In the IE browser, the event object is an attribute event of the Windows object. The following method is usually used to access it.
The code copy is as follows:
oP.onclick = function(){
var oEvent = window.event;
}
Although it is a window object property, the event object can only be accessed when the event occurs. After all event handling functions are executed, the object disappears.
The standard dom stipulates that event objects must be passed to event processing functions as unique parameters. Accessing event objects in Firefox browsers once is usually used as parameters, and the code is as follows:
The code copy is as follows:
oP.onclick = function(oEvent){
}
Therefore, in order to be compatible with both browsers, the following method is usually used
The code copy is as follows:
oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}
After obtaining the event object, the browser can handle various events through its series of properties and methods, such as mouse events, keyboard events and browser events. wait
The following lists common properties and methods:
From the above, we can see that the two types of browsers still have some similarities. For example, the type attribute is compatible with various browsers. It indicates the type of event to retrieve and return values such as "click" and "mousemove".
This is very useful for handling multiple kinds of events in the same function.
As follows: The same function handles multiple events.
The code copy is as follows:
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //handle compatibility and obtain the object
if (oEvent.type == "click")
disp.innerHTML += "You clicked on me!";
else if (oEvent.type == "mouseover")
disp.innerHTML += "You move to mine";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
oP.onmouseover = handle;
}
</script>
<div>
<div id="box"></div>
<p id="display">Click Me</p>
</div>
The above code adds two event response functions to the div of id="box", and these two events are the same function.
In this function, first consider obtaining the event object compatible, and then using the type attribute disk to the name of the event.
When detecting the three keys of shift, alt, and ctrl, the methods used by the two types of browsers are exactly the same, both have the three attributes of shiftKey, altKey, and ctrlKey.
The code is as follows:
The code copy is as follows:
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
In addition, when obtaining mouse pointers, the methods used by both types of browsers are the same, both of which include clientX, clientY, screenX, and screenY.
Among them, clientX and clientY represent the location of the mouse in the client area, and do not include the browser's status bar, menu bar, etc.
The code is as follows:
The code copy is as follows:
var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;
screenX and screenY refer to the position of the mouse on the entire computer screen, and the code is
The code copy is as follows:
var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;
Many times, developers want to know that the event is triggered by that object, that is, the target of the event.
Assuming that the <p> element allocates an onclick event handler function, <p> will be considered the target when the click event is triggered.
In IE browser, the target is contained in the srcElement property of the event object, the code is as follows
The code copy is as follows: var oTarget = oEvent.srcElement;
In the standard DOM browser, the target is included in the target attribute, the code is as follows
The code copy is as follows: var oTarget = oEvent.Target;
Get the target of the event
The code copy is as follows:
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //handle compatibility and obtain the object
var oTarget;
if (oEvent.srcElement) //handle compatibility and get events
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
disp.innerHTML += "Element name:" + oTarget.tagName +"<br>" + "Element content:" + oTarget.textContent + "<br>"
+ "Node immediately following:" + oTarget.textContent + "<br>"
;
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
}
</script>
<div>
<div id="box">
Box content
</div>
<p id="display"></p>
</div>
(Supplement) Properties of Element object http://www.w3school.com.cn/xmldom/dom_element.asp
(Supplement) Methods of Element object http://www.w3school.com.cn/xmldom/dom_element.asp
Since the target of the event is different in two types of browsers, the code must ensure compatibility. The usual practice is to directly use the object as the condition of the if statement. The code is as follows
The code copy is as follows:
if (oEvent.srcElement)
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
This method is also commonly used in other properties.