Event object in JavaScript

Event object, whenever an event is triggered, an event object is produced, which mainly contains the basic properties of the event, the event type type (click, Dbclick equivalent), the target element targets (I understand the event source object, That is, the DOM element that triggers the event), and some methods related to the event, cancel the event default behavior Preventdefault (), organize events to continue bubbling or capture stoppropagation (), and so on, here I just list the properties and methods I used in the project.

Since the event is triggered, and then produced an event object, the author in IE test, do not need to be assigned to use, perhaps the lower version of the need for it, Firefox browser is required to assign value, here I feel the need to develop a habit, thanks to a line of code Bai, Each time an event object is used in an incident handler, it is used in a way that assigns a value:

var event = event| | window.event;

In fact, the first element in the default parameter array is the event object, that is, you can assign a value to an array element

var event = arguments[0];

The type attribute, which should be the easiest to understand, the event types, click clicking, double-clicking Dbclick, and so on

The target property, the DOM element object that triggered the event, I saw on the internet that target is the Firefox browser, srcelement is in IE, but the result of my test is that both can be used in the IE11, the same effect, but Firefox can only use the target property, There is a common standard for how browsers can be implemented, and compatibility is a struggle, so as with the event object, it is recommended to get the DOM object that triggered the event by assigning it:

var target = event.target| | Event.srcelement;

The Preventdefault () method is used to cancel the default event behavior, such as hyperlinks, click Hyperlinks, depending on the href attribute, will jump to another page, before in the project, encountered many need to cancel the hyperlink default click Behavior, in the Click event handler, the default event behavior, You can do the following:

if (Event.preventdefault) {//Determine if the function exists     event.preventdefault;} else{     returnvalue = false;}

This also implements the default behavior of canceling hyperlinks, in fact, in the project, also see other colleagues use other ways, also cancel is the default click behavior

<a href= "javascript:void (0);" > also line </a>

The Stoppropagation () method directly bubbles or captures the cancellation of the event, which is useful if both the parent and child elements are bound to an event of the same type, for example, the Click event is bound, and now the user triggers an event that is triggered during the capture phase, for the parent element, It will continue to be captured downward, triggering the child element's events, being triggered during the bubbling phase for child elements, and also because of the bubbling behavior, which triggers the parent element's events, so it is often necessary to cancel this unintentional trigger.

if (event.stoppropagation) {//Determine if there is      event.stoppropagation ();} else{      event.canclebubble = true;}

September 30, 2014 22:04:18

In subsequent projects, if you still use other related actions, I continue to add

Event object in JavaScript