JavaScript every day must learn the event _javascript skills

In fact, this article is very early before the written, but because of the SF save the bug, so at that time wrote a lot of, the result did not save, feel that this did not finish is a big regret, today just have time to add, also just give me the JavaScript learning summary to do a conclusion.

Here, the main discussion of JS-related events--

Event Handlers

Some events are defined in the DOM, and the function that responds to an event is called an event handler (or event listener). The name of the event handler generally starts with "on", for example: onclick, etc.

event bubbling and capturing

Event flow refers to the order in which events are received in the page, IE, Firefox, and Chrome browsers are event bubbling, which is called event bubbling, where events are first received by the most specific elements and then propagated up to the nodes that are not specific. Event capture is the opposite, event capture was proposed by Netscape, event bubbling and capturing as shown in the following illustration:

While event capture is the only event flow model supported by Netscape, the current IE9, Firefox and Google also support this event flow model.

The benefits of event bubbling

Because events have a bubbling mechanism, we can use the principle of bubbling to add events to the parent and trigger the execution effect. The advantage of this is, of course, to improve performance,

An event handler that is specified using the DOM level 0 is considered a method of an element. Therefore, this points to the current element:

 var btn = document.getElementById (' mydiv ');

Events triggered on the DOM result in an Event object events
Btn.onclick = function (event) {
 alert (this.id);//mydiv 
}; 

DOM Level 1

DOM Level 1 focuses on the HTML and XML document models. It contains document navigation and processing capabilities.

DOM Level 1 became the recommended standard for the consortium on October 1, 1998.

The second edition of the working draft was on September 29, 2000.

It is worth mentioning that DOM level 0 is not a consortium specification. It's just a definition of equivalent functionality in Netscape Navigator 3.0 and IE 3.0.

DOM Level 2 event handler

The DOM Level 2 defines two methods for specifying and deleting the actions of an event handler: AddEventListener () and RemoveEventListener (), and they all accept three parameters:

1. Event name. Like the click on the top
2. Function as an event handler.
3. Boolean value (True indicates that the capture phase invokes an event handler, False indicates the bubbling phase)

You can also define a callback function for an event by using the AddEventListener method of the Element object.

 Element.addeventlistener (event, function, usecapture)

var btn = document.getElementById (' mydiv ');
Btn.addeventlistener (' click ', Function () {
 console.log (this.id);
},false); 

an event handler in IE

The IE browser before IE9 does not support AddEventListener () and RemoveEventListener ().

Unlike other browsers, IE uses the attachevent () and DetachEvent () methods to add event handlers for the DOM, and because IE8 and earlier versions only support event bubbling, they accept only two parameters:
1. Event handler name (plus on above)
2. event handler function
The event handlers added using Attachevent () are as follows:

 var btn = document.getElementById (' mydiv ');
Btn.attachevent (' onclick ', function () {
 console.log (this.id);
}); 

It is worth noting that, with the attachevent () method, the event handler runs in the global scope, so this is equal to window

Event Object

When you trigger an event on the DOM, an event object is generated that contains all the information associated with 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 is passed as the first parameter to the callback function that the event listens to. We can use this event object to get a lot of information about the current event:
Type (String)-The name of the event
Target (node)-dom node of event origin
Currenttarget? (node)-the DOM node in which the current callback function is triggered (described in more detail later)
Bubbles (Boolean)-Indicates whether this event is a bubbling event (followed by an explanation)
Preventdefault (function)-this method will prevent the user agent in the browser from triggering the default behavior associated with the current event. such as blocking the Click event of a <a> element to load a new page
Cancelable (Boolean)-this variable indicates whether the default behavior of this event can be blocked by calling Event.preventdefault.
Stoppropagation (function)-cancels further capture or bubbling of events, bubbles use this method for true
Eventphase: Returns a number that represents the current stage of the event, 0 for the event to begin propagating from the DOM surface to the target element, 1 for the capture phase, 2 for the event to the target element, and 3 for the bubbling phase.

Also, event objects may have many other properties, but they are all for a particular event. For example, mouse events contain clientx and Clienty properties to indicate the position of the mouse in the current window.

Additionally, the Stoppropagation () method is used to immediately stop the propagation of an event in the DOM, that is, to cancel further event bubbling or trapping.

 var btn = document.getElementById (' mydiv ');
Btn.onclick = function (event) {
 alert ("clicked");
 Event.stoppropagation ();
};

Avoid triggering an event handler on the document.body
Document.body.onclick = function (event) {
 alert ("Body clicked"); 
 

The event object will only exist during the execution of the incident handler, and the event object will be destroyed automatically once the handler has been executed.

Event objects in IE

When you add an event handler to the DOM level 0, the Events object is present as an attribute of the Window object:

 var btn = document.getElementById (' mydiv ');
Btn.onclick = function (event) {
 var event = window.event;
 alert (event.type);//click
}; 

IE's Event object also contains the properties and methods associated with the events that created it.
Canclebubble Boolean defaults are false, but can be set to True to cancel event bubbling, the same as the Stoppropagation () method in the DOM.
The ReturnValue boolean default is True, and the default behavior to cancel an event when set to False is the same as Preventdefault () in the DOM.
The target of the Srcelement element event, the same as the target attribute in the DOM.
Type of event that the type string is triggered.

Click event

When the user clicks on it, the event object will contain the following attributes.
Pagex,pagey: Click on the coordinates of the position relative to the HTML element, in pixels.
Clientx,clienty: Click on the position relative to the viewport (viewport) coordinates, the unit is pixel.
Screenx,screeny: Click Position relative to the device display screen coordinates, units for the device hardware pixel

Clientx,clienty

Diagram: Clientx and clienty, whose values indicate the horizontal and vertical coordinates of the mouse pointer in the viewport when an event occurs (without the scroll bar area)

Offset amount

The offset of an element can be obtained by using the following 4 properties.

(1) Offsetheight: The amount of space occupied by elements in a vertical direction, measured in pixels. Includes the height of the element, the height of the (visible) Horizontal scroll bar, the top border height, and the bottom frame height.

(2) Offsetwidth: The amount of space occupied by the element in a horizontal direction, measured in pixels. Includes the width of the element, the width of the (visible) vertical scroll bar, the width of the left border, and the width of the right border.

(3) Offsetleft: The pixel distance between the left bounding box of the element and the left inner border of the containing element.

(4) offsettop: The pixel distance between the inner border of the element and the top and bottom border of the containing element.

Pagex,pagey

These two properties represent the position of the mouse cursor in the page, and the value of the pagex,pagey is equal to the value of the Clientx,clienty when the page is not scrolled

Scrolling size

Scrolling size refers to the size of the element that contains the scrolling content.

Here are 4 properties related to scrolling size.

(1) ScrollHeight: The total height of the element content without a scroll bar.

(2) ScrollWidth: The total width of the element's content without a scroll bar.

(3) ScrollLeft: The number of pixels hidden in the left side of the content area. You can change the scrolling position of an element by setting this property.

(4) ScrollTop: The number of pixels that are hidden above the content area. You can change the scrolling position of an element by setting this property.

Focus Events

The focus event fires when the page element Gets or loses focus, with the following 4 focus events:
1.blur: Triggered when element loses focus, the event is not bubbling
2.focus: Trigger when element gets focus. Not bubbling
3.focusin: Trigger when element gets focus, bubbling
4.focusout: Trigger when element loses focus, bubbling

Mouse events

The DOM 3 level defines 9 mouse events:
Click: When the user clicks on the primary mouse button usually refers to the left mouse button or press Enter the trigger.

Dbclick: Triggers when the user double-clicks the mouse

MouseDown: When the user presses any of the mouse button will trigger, this event is not able to trigger through the keyboard.

MouseMove: A repeat trigger when the mouse moves around an element that cannot be triggered by a keyboard event.

Mouseout: Triggered when the mouse leaves the element, this event cannot be triggered by the keyboard.

MouseOver: Triggered when the mouse enters the element, this event cannot be triggered by the keyboard.

MouseEnter: Similar to "mouseover" but not bubbling, and does not trigger when the cursor is moved to a descendant element.

MouseLeave: Similar to "mouseout", but not bubbling. Above the element is not triggered.

MouseUp: Triggers when the user releases the mouse button and cannot be triggered by the keyboard.

Event objects passed to the mouse event handlers have Clientx and Clienty properties that specify the coordinates of the mouse pointer relative to the containing window. By adding a window's scrolling offset, you can convert the mouse position to document coordinates.
Mouse events are supported for all elements on the page. All events, except MouseEnter and MouseLeave, are bubbling and their default behavior can be canceled. However, the default behavior of canceling mouse events may affect other events, because some mouse events are interdependent.

Drag Events

(1) Drag event
The drag event is triggered when the source object is dragged.
(2) Dragstart,dragend event
The DragStart event is triggered when the user starts dragging an object with the mouse, and the Dragend event is triggered when the end is dragged.
(3) Dragenter,dragleave Event
The DragEnter event is triggered on the target object after the source object is dragged into the target object. The DragLeave event fires on the target object after the source object leaves the target object.
(4) DragOver Event
The DragOver event fires when the source object is dragged over another object.
(5) Drop event

When the source object is dragged over the target object, the drop event is triggered on the target object when the user releases the mouse.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.