A detailed introduction to new events in HTML5

HTML5 Many new events have been added, 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. Sharing will be added in the future as the compatibility improves.

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, the browser 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 the touch object representing the currently tracked touch operation.

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 (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.

JavaScriptOperation example:

1. 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 method of initializing the script is to use the load event, but this class# The disadvantage of ##function is that it is only triggered after all resources are fully loaded, which sometimes leads to serious delays. The developer then created a custom event, domready, which is triggered after the DOM is loaded and the resources are loaded. Triggered before loading.

domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;

  document.addeventListener('DOMContentLoaded',function(){...},false);

 

 

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