JavaScript Learning 12: Event Object __java

An important aspect of JavaScript events is that they have some relatively consistent features that can provide more powerful functionality for our development. The most convenient and powerful things are the event objects, which can help you with many aspects of the mouse and keyboard, and we can also modify the capture of a general event or the function of a bubbling stream.

In the last blog we have a basic understanding of the event, at the end we mention the event handler function. One of the standard attributes of an event-handling function is that the event object that is accessed in some way contains contextual information about the current event. Event handling consists of three parts: object. event handler function = function.

So what is the object of the event? where it is.

When an event is triggered, an event object is generated that contains all the information related to the event. Includes the element that causes the event, the type of the event, and other information related to a particular event.

The event object, which we generally call an event object, is passed by the browser as a parameter through a function. So first of all, we have to verify that there are no parameters passed in the execution function, and whether the hidden parameters can be obtained.

<span style= "FONT-SIZE:18PX;" >function box () {
	alert (arguments.length);
}
Window.box ();          The ordinary null parameter function, the return value is 0, does not get any parameter

Document.onclick=box;  The event-binding function, which returns a value of 1, gets a hidden parameter </span>

By comparing the above two sets of functions, we find that the execution function through event binding can get a hidden parameter, which means that the browser automatically assigns an argument, which is actually an event object. We can lose this object and see what it is.

<span style= "FONT-SIZE:18PX;" >document.onclick=function () {
	alert (arguments[0]);  The MouseEvent is printed, that is, the mouse event object
}</span>

Mouse events

Mouse event is the most common type of event on the web, after all, the mouse is still the most important positioning device. Then we can get the mouse button information and screen coordinates through the event object, and so on.

<span style= "FONT-SIZE:18PX;" >//Cross-browser left-right-click Response
function Getbutton (evt) {
	var e = evt| | window.event;
	if (evt) {return
		E.button;
	} else if (window.event) {
		switch (e.button) {case
			1: return
				0;
			Case 4: Return
				1;
			Case 2: Return
				2;
		}
	}
Document.onmouseup=function (evt) {
	if (Getbutton (evt) ==0) {
		alert (' You pressed the left arrow. ');
	} else if (Getbutton (evt) ==1) {
		alert (' You have pressed the middle key. ');
	} else if (Getbutton (evt) ==2) {
		alert (' You have pressed the right key. ');
	}
};


Get coordinates
document.onclick=function (evt) {
	var e=evt| | For the visual and screen areas window.event;
	Alert (e.clientx+ ', ' +e.clienty+ ', ' +e.screenx+ ', ' +e.screeny ');
</span>

Keyboard events

Keyboard events are triggered when users use the keyboard. The DOM2 level event initially defined the keyboard event, which resulted in the deletion of the corresponding content, and eventually the initial keyboard event was used, although IE9 has already started supporting the DOM3 level keyboard event.

1-Key Code

When the KeyDown and KeyUp events occur, the KeyCode property of the event object contains a code that corresponds to a specific key on the keyboard.

<span style= "FONT-SIZE:18PX;" >document.onkeydown=function (evt) {
	alert (evt.keycode);
}; </span>

2 character encoding

Firefox, Chrome, and Safari event objects all support a CharCode property that contains a value only if the KeyPress event occurs, and that value is the ASCII encoding of the character that the key is pressed on. At this point the keycode is usually equal to 0 or it may be the encoding of the key.

<span style= "FONT-SIZE:18PX;" >function Getcharcode (evt) {
	var e=evt| | window.event;
	if (typeof e.charcode== ' number ') {return
		e.charcode;
	} else{return
		E.keycode
	}
} </span>

Event Flow

Finally, we want to add a point of knowledge, that is the flow of events. This I also mentioned in the last blog, but the understanding was not very profound. An event flow is a description of the order in which the events are accepted from the page, and when several elements that have events are stacked together, then you click on one of the elements, and not only the currently clicked element triggers the event, but all the elements stacked in the range you click on will trigger the event. The event flow consists of two modes: bubbling and capturing.

Event bubbling is triggered from the inside out, and event capture is triggered from the outside, and the following image illustrates this:

Summary: For the study of events, but also in the further deepening process, the event object understanding, let me more comprehensive understanding of events, but also for my flexible use of events laid the foundation.