HTML Event (ii) registration and logoff of events

This article mainly introduces the method of registering and unregistering HTML element events.

Other event Articles

1. Introduction to the HTML event (i) event

2. HTML Event (ii) registration and logoff of events

3. HTML Event (iii) event stream [not published]

4. HTML event (quad) analog event action [unpublished]

Directory

1. Registering an event: Describes the event registration through the element's event properties, AddEventListener (), and the Attachevent () method.

2. Logoff event: Describes the logoff of events by assigning a value of NULL to RemoveEventListener (), DetachEvent (), and the event property.

1. Registering events

There are 2 ways to register an event: one for property registration and one for registration by Method .

① Attribute Registration can be divided into HTML elements of the event property assignment and through JS specify the element object's event properties.

The ② method can be registered by using the AddEventListener () or attachevent () method to register the event.

1.1 Setting HTML element properties for event handlers

description : In an HTML page, set the element property to a function.

syntax : <button onlick= "SayHello ()" > Click </button>

Note : The event property starts with"on" followed by the event name. such as: OnClick, onload.

Example :

JS Code:

function SayHello () {    console.log (' Hello ')}

HTML code:

<button onclick= "SayHello ()" > Click </button>

1.2 Setting the property of an element object via JS as an event handler

description : Gets the object of the element through JS and sets its event property to an event handler.

Syntax : eventtarget.oneventname=function (e) {};

Note : The event property starts with"on" followed by the event name. such as: OnClick, onload.

Uniqueness : Property registration is unique; the last registered handler overwrites the previously registered handler, in the same event.

Example 1: Demo of event property registration

Register the body's Click event Document.body.onclick = function (e) {    alert (1);};

Example 2: Uniqueness of event Property registration

Document.body.onclick=function (e) {    console.log (1);} Overwrites the previously registered event handler Document.body.onclick=function (e) {    console.log (2);} Document.body.click (); + 2: Only the output of the following properties is registered

1.3 AddEventListener () method Register Event

Note : In JS, window, document, HtmlElement and other objects can register event handlers through the AddEventListener () method.

Syntax : Eventtarget.addeventlistener (EventName, EventHandler, |usecapture)

Parameters :

①eventname {string}: The name of the event to register is not case-sensitive. This name does not need to be prefixed with "on"like registering event properties. such as registering a mouse click event, write as Click.

②eventhandler {function | object}: Functions or Function objects. The function to execute when the event is triggered, and when the same event is registered multiple times using a function object, register it again.

③usecapture {Boolean} optional: is in the capture phase and defaults to false.

Multiple registrations : the AddEventListener () method can register multiple times for the same event of the same object. When this event occurs, the registered processing event program is executed in the order of registration.

Note :

This method is not supported for IE before ①IE9, and can be replaced with attachevent ().

② If you use the same event handler object to register multiple times on the same event, only one registration is counted.

Example 1: Registering the same event multiple times, executed in the order of registration, Output 1 First, then output 2

Document.body.addEventListener (' click ', Function (e) {     console.log (' 1 ');});        Document.body.addEventListener (' click ', Function (e) {    console.log (' 2 ');}); Document.body.click (); +/-

Example 2: Using a function ObjectRegister the same event multiple times: Register once

function SayHello () {    console.log (' Hello ');} Document.body.addEventListener (' click ', SayHello);//Use handlers to register the same event multiple times only once Document.body.addEventListener (' click ' , SayHello);d Ocument.body.click (); = + Hello: output only once

1.4 attachevent () method Register Event

Description : The version of IE prior to IE9 can register events by this method.

Syntax : eventtarget.attachevent (EventName, EventHandler)

①eventname {string}: The name of the event to register is case-sensitive . The name here is the same as the event property, starting with "on" followed by the event name. such as: OnClick, onload.

②eventhandler {function | object}: Functions or Function objects. The function to execute when the event is triggered, and can be registered multiple times (The AddEventListener () method is only registered once) when the same event is registered multiple times with the function object.

Multiple registrations : the Attachevent () method can register multiple times for the same event of the same object. When this event is triggered, it is also executed sequentially.

Example:

function say () {    console.log (' 1 ');} Document.body.attachEvent (' onclick ', say);d ocument.body.attachEvent (' onclick ', say); Say register the same event for the second time Document.body.click (); + 1 1: Output 2 times say function

1.5 How to register events in jquery

The way events are registered in jquery solves the difference of multiple browsers: whether the element contains the AddEventListener () or the Attachevent () method.

Example:

function Add (Element,type, Eventhandle) {if (Element.addeventlistener) {Element.addeventlistener (type, Eventhandle, FALSE);} else if (element.attachevent) {element.attachevent ("on" + Type, eventhandle);}}

2. Logoff Events

You can register an event for an element, corresponding to an event that can also unregister an element.

JS, you can call RemoveEventListener () [corresponding to AddEventListener ()] and detachevent () [corresponding to Attachevent ()] to unregister an event specified by an element of the handler, You can also assign a value of NULL to the event property to unregister all bindings for this event.

2.1 RemoveEventListener (eventName, function Object)

Description : Unregisters an event handler registered through AddEventListener ().

Syntax : Eventtarget.removeeventlistener (EventName, Eventhandlerobj)

Parameters :

①eventname {string}: The event name to unregister is not case-sensitive. This name does not need to be prefixed with "on"like registering event properties. such as registering a mouse click event, write as Click.

②eventhandlerobj {Function Object}: Passing in a function body is not effective.

Example 1: Logoff event via AddEventListener ()

function SayHello (e) {    console.log (' 1 ');} Register Body Click event Document.body.addEventListener (' click ', SayHello);//Unregister body The SayHello function of the Click event Document.body.removeEventListener (' click ', SayHello);d Ocument.body.click (); Triggers the Click event without outputting any results

Example 2: If the second argument is a function body, it will not be unregistered

function SayHello (e) {    console.log (' 1 ');} Register the Body Click event Document.body.addEventListener (' click ', SayHello);//The second parameter is the function body, although the same as the contents of the SayHello function, But will not unregister Document.body.removeEventListener (' click ', Function (e) {    console.log (' 1 ');}); Document.body.click (); + 1: Output result is 1, and no logoff succeeded

　　

2.2 DetachEvent (EventName, function Object)

Description : Unregisters an event handler registered through Attachevent ().

Syntax : eventtarget.detachevent (EventName, Eventhandlerobj)

Parameters :

①eventname {string}: The event name to unregister is case-sensitive. The name here is the same as the event property, starting with "on" followed by the event name. such as: OnClick, onload.

②eventhandlerobj {Function Object}:: Functions object. Passing in a function body is not effective.

Example 1: Logoff event via DetachEvent ()

function SayHello () {    console.log (' 1 ');} Document.body.attachEvent (' onclick ', SayHello);d ocument.body.detachEvent (' onclick ', SayHello); Logoff event Document.body.click (); Do not output results

Example 2: If the second argument is a function body, it will not be unregistered

function SayHello () {    console.log (' 1 ');} Document.body.attachEvent (' onclick ', sayHello);//The second parameter is the function body, although it is the same as the contents of the SayHello function, but does not unregister document.body.detachEvent (' OnClick ', function (e) {    console.log (' 1 ');}); Document.body.click (); + 1: Output result is 1, and no logoff succeeded

Example 3: Multiple registrations and multiple logoff

Because attachevent () can register a function object multiple times on the same event as the element, the call to DetachEvent () can only be logged off once.

function SayHello () {    console.log (' 1 ');} Document.body.attachEvent (' onclick ', SayHello);d ocument.body.attachEvent (' onclick ', SayHello); Registered 2 times Document.body.click (); = 1 1: Output 2 times document.body.detachEvent (' onclick ', SayHello); Deregistration 1 times Document.body.click (); + 1: Output is 1, only 1 times are logged out

2.3 Canceling an event

Assigning a value of NULL to an object's event property cancels all registered processing events for this event.

Example:

Document.body.addEventListener (' onclick ', function (e) {    console.log (1);}); Document.body.addEventListener (' onclick ', function (e) {    console.log (2);}); Document.body.onclick=null; The OnClick property is assigned a value of NULL, which is equivalent to unregistering the onclick event Document.body.click (); No action

================================== Series article ==========================================

This article: 5.4 HTML Event (ii) registration and logoff of events

Web Development Road Series articles

HTML Event (ii) registration and logoff of events