JS events, custom DOM events, custom events

Last Update:2017-11-04 Source: Internet

Author: User

Tags event listener

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article is about: The third edition of the Advanced Programming language (Chapter 13 events and 22 custom events).

This article relates to:

The constituent elements of the event,
Event optimization,
Simulation events,
Customizing the contents of an event

What is the JS event? High-level program Chapter 13 The first sentence: the interaction between JS and HTML is implemented through events . An event is an action that the browser or user performs, such as the Click event that we use most often.

1:JS Events

Event Flow
Event handlers
Event Object
Event Type

Event Flow: The order in which events are received from the page

Event Bubbling: Conceptual events receive events from the most specific elements, and then propagate up to less specific elements. This concept is proposed by IE.
　　

<!DOCTYPE HTML><HTML>    <Head>        <title>Page that tests the event flow</title>        <MetaCharSet= "Utf-8" />        <Scripttype= "Text/javascript">        </Script>    </Head>    <Body>        <Div>Test</Div>            </Body>    </HTML>

Page 1-1

Take page 1-1 as an example, if you click on a div, the Click event propagates in the order of Div < body < html <document.
now that the browser has already supported event bubbling , event bubbling in IE5.5 and earlier versions skips HTML, directly from body to document.

Event Capture: The event is received by the least specific element, and the most specific element is finally received. Presented by the Netscape Communicator team

Take page 1-1 as an example, if you click on a div, the Click event propagates in the order of document < HTML < body < Div.
Because older browsers do not support it, very few people use event capture.

Dom Event Flow: The event flow defined by the "DOM2 level event" is divided into three stages: the event capture phase, the target stage, the event bubbling phase

Take page 1-1 as an example, the following three stages occur when you click a div:
< (DIV)
2. In the target phase: div
3. Event bubbling Stage: (DIV) < body < HTML <document
When an event arrives at the target stage, the event occurs on <div> and is considered part of the bubbling phase in event handling.
The "DOM2 level event" explicitly stipulates that the capture phase does not involve event targets, but Ie9+,safari,chrome, Firefox, and Opera9.5 and later will trigger events on event objects during the capture phase.
Therefore, there are two opportunities to manipulate objects above the target object.

Example: Test the above mentioned event bubbling and event capture. Directly using the Vue-clic created by the project, so the test code is VUE writes:

<Template>  <DivID= "App">Test</Div></Template><Script>Import {addevent} from"./scripts/test"; exportdefault{name:'app', data () {return{}}, mounted () { This. Test (); }, Methods: {Callback (Event) {event=Event||window.event; Console.log (Event.currentTarget.tagName+ " is" +Event.type+ "ing")}, Test () {varDiv=document.getElementById ("app"), Body=document.body||document.documentelement, type= "Click", Tag = False; Addevent (Div, type, This. Callback,Tag); Addevent (body, type, This. Callback,Tag); }  }}</Script>

/** *  * @param {*} DOM element * @param {*} type Type * @param {*} fun callback function * @param {*} tag capture/bubbling */export function addevent (DOM, type, fun, tag) {    Dom.addeventlistener (type, fun, tag);}

When tag is false (bubbling phase), the console output is as follows:

When tag is true (Capture phase), the console output is as follows:

Event handler (Event listener): A function that responds to an event. The name of the event, such as click, Load, is the name of the event handler: "On" + event name, such as OnClick, OnLoad, and so on
There are several ways to add an event handler:
2. An HTML event handler for an HTML attribute setting with the same name as the event handler. An event handler can be a direct action to be performed, or it can be a script function defined elsewhere.
```
<onclick= "alert (1)">       Test </Div >
```
3. DOM0-level event handlers (added later overwrites newly added events)
```
<DivID= "Test">Test</Div><Scripttype= "Text/javascript">      varTest=document.getElementById ("Test"); Test.onclick= function() {alert (1); }</Script>
```
4. DOM2-level event handlers (multiple events can be bound to the same element, event execution order: first added first)
```
        <DivID= "Test">Test</Div>        <Scripttype= "Text/javascript">            varTest=document.getElementById ("Test"); Test.addeventlistener ("Click", function() {alert (1); }, false); </Script>
```
5. IE Event handlers (note: The scope of the event handlers specified by attachevent points to the global scope, this points to the window, and the other is the object that points to the bound event, confined to the scope of the owning element. (You can bind multiple events for the same element, the order in which the events are executed: First added and then executed)
```
        <DivID= "Test">Test</Div>        <Scripttype= "Text/javascript">            varTest=document.getElementById ("Test"); Test.attachevent ("Click", function() {alert ( This ===window);        }); </Script>
```
  Wait More ...

JS events, custom DOM events, custom events

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More