HTML5의 새로운 이벤트 자세히 살펴보기

HTML5에는 많은 새로운 이벤트가 추가되었지만 호환성 문제가 그다지 이상적이지 않고 실제 적용이 그리 강력하지 않기 때문에 여기서는 기본적으로 좋은 응용 프로그램과 널리 호환되는 이벤트만 공유합니다. 앞으로 호환성 상황이 개선됨에 따라 앞으로 더 많은 공유가 추가될 예정입니다.

touchstart, touchmove 및 touchend 이벤트

초기 터치 이벤트 touchstart, touchmove 및 touchend는 개발자에게 일부 정보를 전달하기 위해 iOS 버전 Safari 브라우저에 새로 추가된 이벤트입니다. . iOS 장치에는 마우스나 키보드가 없기 때문에 모바일 Safari 브라우저용 대화형 웹 페이지를 개발할 때 PC 측 마우스 및 키보드 이벤트로는 충분하지 않습니다.

iPhone 3G가 출시되었을 때 자체 모바일 Safari 브라우저에서는 터치 조작과 관련된 몇 가지 새로운 이벤트를 제공했습니다. 이후 Android의 브라우저도 동일한 이벤트를 구현했습니다. 터치 이벤트(터치)는 사용자가 화면에 손가락을 대거나, 화면을 슬라이드하거나, 화면에서 멀어질 때 발생합니다. 아래의 구체적인 지침:

touchstart 이벤트: 이미 화면에 손가락이 있는 경우에도 손가락이 화면을 터치하면 트리거됩니다.

Touchmove 이벤트: 손가락이 화면을 슬라이드할 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault() 이벤트를 호출하면 스크롤을 방지할 수 있습니다.

터치엔드 이벤트: 손가락이 화면에서 벗어날 때 트리거됩니다.

Touchcancel 이벤트: 시스템이 터치 추적을 중지할 때 트리거됩니다. 이번 행사의 정확한 출발 시간에 대해서는 문서에 구체적인 설명이 없기 때문에 추측만 할 수 있을 뿐입니다.

위 이벤트는 버블티가 발생하여 취소될 수 있습니다. 이러한 터치 이벤트는 DOM 사양에 정의되어 있지 않지만 DOM 호환 방식으로 구현됩니다. 따라서 각 터치 이벤트의 이벤트 객체는 마우스 연습에서 다음과 같은 공통 속성을 제공합니다. 이벤트가 발생하면 마우스 포인터의 가로 좌표), clientY(이벤트가 발생하면 마우스 포인터의 세로 좌표를 반환), screenX(이벤트가 발생하면 마우스 포인터의 가로 좌표) 및 screenY( 이벤트가 트리거될 때 반환) 이벤트가 트리거될 때 마우스 포인터의 수직 좌표). 일반적인 DOM 속성 외에도 터치 이벤트에는 터치 추적을 위한 다음 세 가지 속성도 포함되어 있습니다.

터치: 현재 추적되는 터치 작업을 나타내는 터치 개체의 배열입니다.

TargetTouches: 이벤트 대상과 관련된 Touch 개체의 배열입니다.

changeTouches: 마지막 터치 이후 변경된 내용을 나타내는 Touch 개체의 배열입니다.

각 Touch 개체에는 다음 속성이 포함되어 있습니다.

ClientX: 뷰포트에서 터치 대상의 x 좌표입니다.

ClientY: 뷰포트에서 터치 대상의 y 좌표입니다.

식별자: 터치를 식별하는 고유 ID입니다.

pageX: 페이지 터치 대상의 x 좌표입니다.

pageY: 페이지에서 터치 대상의 y 좌표입니다.

screenX: 화면 터치 대상의 x 좌표입니다.

ScreenY: 화면 터치 대상의 y 좌표입니다.

대상: DOM 노드 대상.

각 터치 포인트에는 다음과 같은 터치 정보(일반적으로 사용됨)가 포함됩니다.

식별자: 터치 세션에서 현재 손가락을 고유하게 식별하는 숫자 값입니다. 일반적으로 0부터 시작하는 일련번호(android4.1, uc)

target: 액션의 타겟인 DOM 요소.

pageX/pageX/clientX/clientY/screenX/screenY: 값, 작업이 발생하는 화면의 위치(페이지에는 스크롤 거리가 포함되고 클라이언트에는 스크롤 거리가 포함되지 않으며 화면은 다음을 기반으로 함) 화면).

radiusX/radiusY/rotationAngle: 타원의 두 반경과 회전 각도를 각각 사용하여 대략 손가락 모양과 동일한 타원을 그립니다. 예비 테스트 브라우저에서는 이 기능을 지원하지 않습니다. 다행히 일반적으로 사용되는 기능은 아닙니다.

JavaScript 작업의 작은 예:

JavaScript 코드클립보드에 콘텐츠 복사

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);

DOMContentLoaded 이벤트 정보

이 이벤트는 HTML의 onLoad에서 확장된 것입니다. 페이지 로딩이 완료되면 스크립트를 초기화하는 방법은 로드 이벤트를 사용하는 것이지만 이 클래스 함수의 단점은 그것만 트리거된다는 것입니다. 개발자는 DOM이 로드된 후 리소스가 로드되기 전에 트리거되는 사용자 정의 이벤트인 domready를 생성했습니다.

domready 이벤트는 많은 JavaScript 라이브러리에서 빠르게 채택되었으며 DOMContentLoaded 형식으로 기본 브라우저에서 사용되기 시작했으며 이제 HTML5에서 표준화되었습니다. 문서 객체의 트리거에 사용됩니다.
document.addeventListener('DOMContentLoaded',function(){...},false);

위 내용은 HTML5의 새로운 이벤트 자세히 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!