Javascript defines the carriage return event (addEventListener/attachEvent)

If we want to define a carriage return event, we must bind the event like jquery. We use addEventListener and attachEvent to bind the event in pure js. They do not use ie or ff browsers respectively.

For example, bind a carriage return event.

The Code is as follows:

Copy code

$ (Function (){ // Define the carriage return event If (document. addEventListener) {// if it is Firefox Document. addEventListener ("keypress", fireFoxHandler, true ); } Else { Document. attachEvent ("onkeypress", ieHandler ); } Function fireFoxHandler (evt ){ If (evt. keyCode = 13 ){ $ ("# BtnLogin") [0]. click (); } } Function ieHandler (evt ){ If (evt. keyCode = 13 ){ $ ("# BtnLogin") [0]. click (); } } });

Next, let's talk about addeventlistener.

Syntax: obj. addEventListener ('event', function, boolean)

Parameter 1-event: the event to be bound, such as load and click

Parameter 2-function: method function to be bound

Parameter 3-Boolean: determines whether an event is an event that acts as a downlink (true) or an event that bubbles up (false ).
This method does not depend on specific event handle attributes, so that you can register any event of any object for event processing.

The Code is as follows:	Copy code
Obj. addeventlistener ('event', func, false); // we use the Bubble Method to register events. Obj. parentNode. addeventlistener ('event1', func1, false ); Obj. parentNode. parentNode. addeventlistener ('event2', func2, false );

In this way, we can activate the event bound to the parent node when the obj event is activated, and then activate the event bound to the parent node of the parent node, execute multiple different events through event bubbling.

Unfortunately, ie only supports its own event processing model. At this time, we need to use attachEvent

AttachEvent

Method: obj. attachEvent ("eventhandler", function)

Parameter 1-eventhandle: Event handle, which is an event like onclick or onblur

Parameter 2-function: method function for binding events

The event object is the same through attachevent and through addeventlistener. However, this of attachevent always points to the window object.

In this question, the fn variable is declared in the browser under the DOM standard. In IE, it will be a global variable, we can use the apply or call method to change the scope of this pointing to the object.

The Code is as follows:	Copy code
Function bind (el, type, fn, useCapture ){ If (window. addEventListener ){ El. addEventListener (type, function (){ Fn. apply (el, arguments); // always point this to the DOM }, UseCapture ); } Else if (window. attachEvent ){ El. attachEvent ('on' + type, function (){ Fn. apply (el, arguments); // always point this to the DOM. You can also use call (el, agruments) });} }

Note that for IE, each event handle eventhandler retains the occupied memory, so when we refresh the page, additional memory will be retained, this will cause excessive memory usage. The solution is to bind a detachEvent to window. onunload.