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 좌표입니다.

identifier: 터치를 식별하는 고유 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소형 작업 예:

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

DOMContentLoaded 이벤트 정보

이 이벤트는 HTML의 onLoad에서 확장된 것으로, 페이지 로딩이 완료되면 스크립트를 초기화하는 방법은 로드 이벤트를 사용하는 것이지만 이 클래스는 함수 의 특징은 모든 리소스가 완전히 로드된 후에만 트리거되어 때로는 심각한 지연이 발생한다는 것입니다. 그런 다음 개발자는 DOM이 로드된 후에 실행되고 리소스가 이전에 트리거되는 사용자 정의 이벤트를 만들었습니다. 로딩.

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

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

 

 

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