A detailed look at new events in HTML5

Many new events have been added to HTML5, but because their compatibility issues are not ideal and their practical application is not very strong, they are basically omitted here. We only share events that are widely compatible with good applications. In the future, as the compatibility situation improves More sharing will be added in the future.

touchstart, touchmove and touchend events

The initial touch events touchstart, touchmove and touchend are newly added events in the Safari browser for iOS to convey some information to developers . Because iOS devices have neither a mouse nor a keyboard, PC-side mouse and keyboard events are not sufficient when developing interactive web pages for the mobile Safari browser.

When the iPhone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, browsers on Android also implemented the same event. Touch events (touch) occur when the user places their finger on the screen, slides on the screen, or moves away from the screen. The following details:

Touchstart event: Triggered when a finger touches the screen, even if there is already a finger on the screen.

Touchmove event: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.

Touchend event: Triggered when the finger leaves the screen.

Touchcancel event: Triggered when the system stops tracking touches. Regarding the exact departure time of this event, there is no specific explanation in the document, so we can only guess.

The above events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM-compatible manner. Therefore, the event object of each touch event provides common attributes in mouse practice: bubbles (type of bubble event), cancelable (whether the preventDefault() method can be used to cancel the default action associated with the event), clientX (return When the event is triggered, the horizontal coordinate of the mouse pointer), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (when an event is triggered, the horizontal coordinate of the mouse pointer) and screenY (returns when an event is triggered) The vertical coordinate of the mouse pointer when an event is triggered). In addition to the common DOM properties, touch events also contain the following three properties for tracking touches.

Touches: An array of touch objects representing the currently tracked touch operations.

TargetTouches: An array of Touch objects specific to the event target.

ChangeTouches: An array of Touch objects that represents what has changed since the last touch.

Each Touch object contains the following properties.

ClientX: The x coordinate of the touch target in the viewport.

ClientY: The y coordinate of the touch target in the viewport.

Identifier: The unique ID that identifies the touch.

PageX: The x coordinate of the touch target on the page.

PageY: The y coordinate of the touch target on the page.

ScreenX: The x coordinate of the touch target on the screen.

ScreenY: The y coordinate of the touch target on the screen.

Target: The striking DOM node target.

Each touch point contains the following touch information (commonly used):

identifier: a numerical value that uniquely identifies the current finger in the touch session. Generally a serial number starting from 0 (android4.1, uc)

target: DOM element, which is the target of the action.

pageX/pageX/clientX/clientY/screenX/screenY: a value, the position on the screen where the action occurs (page includes the scrolling distance, client does not include the scrolling distance, and screen is based on the screen).

radiusX/radiusY/rotationAngle: Draw an ellipse roughly equivalent to the shape of a finger, with the two radii and rotation angles of the ellipse respectively. The preliminary test browser does not support it. Fortunately, the function is not commonly used. Feedback is welcome.

Small example of JavaScript operation:

JavaScript CodeCopy content to the clipboard

var obj = document.getElementByIdx_x('id');   
obj.addEventListener('touchmove', function(event) {   
     // 如果这个元素的位置内只有一个手指的话   
    if (event.targetTouches.length == 1) {   
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要    
        var touch = event.targetTouches[0];   
        // 把元素放在手指所在的位置   
        obj.style.left = touch.pageX-50 + 'px';   
        obj.style.top = touch.pageY-50 + 'px';   
        }   
}, false);

About DOMContentLoaded event

This event is extended from onLoad in HTML. When a page completes loading, the way to initialize the script is to use the load event, but the disadvantage of this class function is that it only It is triggered after it is fully loaded, which sometimes results in serious delays. The developer then created a custom event, domready, which is triggered after the DOM is loaded and before the resource is loaded.

The domready event was quickly adopted by many JavaScript libraries, and it began to be used in native browsers in the form of DOMContentLoaded; in addition, it has now been standardized in HTML5. The following code shows how DOMContentLoaded is used in Triggered in the document object;
document.addeventListener('DOMContentLoaded',function(){...},false);

The above is the detailed content of A detailed look at new events in HTML5. For more information, please follow other related articles on the PHP Chinese website!