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

WBOY
풀어 주다: 2022-06-23 11:59:56
앞으로
2206명이 탐색했습니다.

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

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

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

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

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

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

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

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

onxxx 및 addEventListener()

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

onxxx 속성 설정

oBox.onclick = function () { // 点击盒子时,将执行这里的语句 }
로그인 후 복사
일반적인 마우스 이벤트 모니터링

이벤트 이름 onclick ondblclick onmousedown onmouseup onmousemove onmouseenter onmouseleave 공통 키보드 이벤트 모니터링
이벤트 설명
마우스가 개체를 한 번 클릭했을 때
마우스가 개체를 더블 클릭했을 때
객체 위에서 마우스 버튼을 눌렀을 때 Press
객체 위에서 마우스 버튼을 놓았을 때
마우스 버튼을 객체 위에서 움직일 때
마우스가 객체에 들어갈 때 (마우스 오버시 유사한 이벤트)
마우스가 객체를 떠날 때 (마우스아웃시 유사한 이벤트)

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

이벤트 이름 변경시 onfocus onblur onsubmit onreset 공통 페이지 이벤트 모니터링
이벤트 설명

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

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

먼저 외부에서 내부로

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

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

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

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

Notes

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

web front-end]

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

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!