JavaScript의 이벤트 모니터링에 대해 간략하게 설명

이 글은 javascript에 대한 관련 지식을 제공합니다. 이벤트 모니터링이 무엇인지, 이벤트 모니터링을 설정하는 방법 등 이벤트 모니터링과 관련된 문제를 주로 정리합니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

"이벤트 청취"란 무엇입니까

DOM을 사용하면 JS 코드를 작성하여 HTML 요소가 이벤트에 반응하도록 만들 수 있습니다;

Event: 사용자와 웹페이지 사이의 상호 작용, 예: 웹페이지를 클릭

Listening: 컴퓨터가 이 이벤트가 언제든지 발생했음을 감지하여 실행할 수 있도록 합니다. 프로그래머가 미리 작성한 일부 프로그램

이벤트 설정 두 가지 주요 수신 방법이 있습니다:

onxxx 및 addEventListener()

이벤트 수신을 설정하는 가장 간단한 방법

onxxx 속성 설정

oBox.onclick = function () {
    // 点击盒子时，将执行这里的语句
}

일반적인 마우스 이벤트 모니터링

이벤트 이름 onclickondblclickonmousedownonmouseuponmousemove onmouseenteronmouseleave공통 키보드 이벤트 모니터링

이벤트 설명
마우스가 개체를 한 번 클릭했을 때
마우스가 개체를 더블 클릭했을 때
객체 위에서 마우스 버튼을 눌렀을 때 Press
객체 위에서 마우스 버튼을 놓았을 때
마우스 버튼을 객체 위에서 움직일 때
마우스가 객체에 들어갈 때 (마우스 오버시 유사한 이벤트)
마우스가 객체를 떠날 때 (마우스아웃시 유사한 이벤트)

이벤트 이름 onkeypressonkeydownonkeyup공통 폼 이벤트 모니터링

이벤트 설명
특정 키보드 키가 눌렸을 때(방향키, 기능키 등 시스템 버튼은 인식되지 않습니다.)
특정 키보드 키가 눌렸을 때(시스템 버튼은 인식되지 않습니다) onkeypress 이전에 인식되고 발생합니다)
키보드 키가 놓였을 때

이벤트 이름변경시onfocusonbluronsubmitonreset공통 페이지 이벤트 모니터링

이벤트 설명
사용자가 양식 필드의 콘텐츠를 변경하면
요소에 포커스가 있을 때(예: 탭 키 또는 마우스 클릭)
요소가 포커스를 잃을 때	가 트리거됩니다.
폼이 제출될 때
폼이 재설정될 때

이벤트 이름onloadonunload이벤트 전파

이벤트 설명
페이지 또는 이미지 로딩이 완료되었을 때
사용자가 페이지를 종료했을 때

먼저 외부에서 내부로

(캡처 단계) 그 다음 다시 내부에서 외부로 (버블링 단계)

그러나 onxxx를 이렇게 작성하면(DOM 레벨 0)

는 버블링 단계 만 모니터링할 수 있으므로 addEventListener()를 사용해야 합니다. 메소드(DOM 레벨 2);

oBox1.addEventListener('click', function(){
    // 这是事件处理函数
}, true)  // true表示监听捕获阶段，false表示监听冒泡阶段

Notes

가장
• 내부 요소가 더 이상 캡처 단계와 버블링 단계를 구분하지 않습니다. 앞에 쓰여진 모니터가 먼저 실행되고 그 다음 나중에 작성된 모니터가 실행됩니다.
요소에 대해 동일한 이름을 가진 동일한 이벤트를 두 개 이상 설정하면 나중에 작성된 DOM 레벨 0 작성 방법
• 이 DOM 레벨 2에서 처음 작성된 이벤트를 덮어씁니다. 순서대로 실행됩니다 ;
[관련 권장사항:

javascript 비디오 튜토리얼

、web front-end]

위 내용은 JavaScript의 이벤트 모니터링에 대해 간략하게 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!