이 글은 모든 사람들을 위한 JS DOM의 일반적인 이벤트를 요약하고 있으며, 관심 있는 친구들은 이를 참고할 수 있습니다.
click click dblclick double-click contextmenu right-click mouseover 마우스 오버가 요소 위에 있을 때 mouseout 대신 mouseenter를 사용하는 것이 좋습니다. 마우스가 요소를 떠나면 대신 mouseleave를 사용하는 것이 좋습니다. mouseenter 마우스가 요소 위로 이동합니다. mouseleave 마우스를 떠나 요소를 떠납니다. mousedown 마우스 버튼 누르기 mouseup 마우스 버튼 들어올리기 마우스move 마우스 움직임
keydown 키보드 버튼 누름 keyup 키보드 버튼 올리기 keypress 키보드 버튼 누름, 문자 키를 입력하는 데 사용됨
1. 어떤 요소 키보드 이벤트를 들을 수 있나요?
① 문서
② 포커스를 받을 수 있는 요소(폼 컨트롤, 특히 입력 요소)
2. 키다운과 키누름의 차이점은 무엇인가요?
① keydown은 모든 키를 눌러 실행할 수 있으며 대문자와 소문자를 구분할 수 없습니다.
② 키누름은 문자를 입력할 수 있는 키를 눌렀을 때만 실행될 수 있으며, 키는 대소문자를 구분할 수 있습니다.
1.33. 어떤 버튼을 눌렀는지 어떻게 알 수 있나요?
이벤트 객체의 속성을 사용하십시오.
evnet.keyCode는 키
이벤트에 해당하는 ASCII 값을 가져옵니다. 이는 keyCode와 동일합니다.
event.key는 키의 문자 값을 가져옵니다.
페이지의 모든 요소가 로드되면
addEventListener를 사용하여 unload 전 이벤트만 수신할 수 있습니다. 로드 이벤트와 웹 페이지가 닫힐 때 트리거되는 DOMContentLoaded 이벤트의 차이점
:
① 로드 이벤트는 요소 및 외부를 포함하여 페이지의 모든 항목이 로드된 후에만 트리거됩니다. 자원.
② DOMContentLoaded 이벤트는 외부 리소스를 제외한 페이지의 모든 요소가 로드될 때 트리거될 수 있습니다.
submit은 양식이 제출될 때 트리거됩니다. 이 이벤트는 양식 요소를 수신합니다. 재설정은 양식이 재설정될 때 트리거됩니다. 이 이벤트는 양식 컨트롤이 포커스를 얻을 때 트리거됩니다. 입력 상자 또는 텍스트 필드의 콘텐츠가 선택됩니다. 변경 입력 상자의 경우 콘텐츠가 변경되고 초점이 손실될 때만 트리거됩니다. 선택
로드 이미지 파일 다운로드 완료 오류 이미지 로드 실패
크기 조정은 창 및 뷰포트 크기 변경 스크롤을 모니터링합니다. 페이지나 요소의 콘텐츠가 스크롤될 때 트리거되는 스크롤 본문이 있는 창이나 요소를 모니터링합니다.
이벤트 객체를 얻기 위해서는 이벤트의 콜백 함수에 첫 번째 형식 매개변수를 설정한다.
다양한 유형의 이벤트는 다양한 유형의 Event 객체를 얻습니다.
offsetX / offsetY 대상 요소에서 마우스의 좌표 위치를 가져옵니다. clientX / clientY 뷰포트에서 마우스의 좌표 위치를 가져옵니다. pageX / pageY 페이지에서 마우스의 좌표 위치를 가져옵니다. screenX / screenY 화면에서 마우스의 좌표 위치를 가져옵니다. 버튼의 좌표 위치 버튼은 누른 마우스 버튼을 가져옵니다. 0: 왼쪽 버튼 1: 오른쪽 버튼
keyCode는 keyCode와 동일한 버튼에 해당하는 코드 값을 가져옵니다. key 키에 해당하는 문자 값을 가져옵니다.
type 이벤트 이름을 가져옵니다. timeStamp 이벤트가 트리거된 시간(밀리초)을 가져옵니다. target 대상 요소를 가져옵니다. stopPropagation() 이벤트 버블링을 방지합니다. PreventDefault() 브라우저 기본 동작을 차단합니다.2.5에서는
버블링을 방지하기 위해 이벤트의 콜백 함수에서 event.stopPropagation() 을 실행하여
하이퍼링크를 클릭하여 점프 양식을 제출하고 재설정하고, 마우스 오른쪽 버튼을 클릭하여 시스템 메뉴를 팝업하는 등...
기본 동작을 방지하려면 이벤트의 콜백 함수에서 event.preventDefault() 호출하세요.
참고: 두 번째 방법을 사용하여 이벤트를 수신하는 경우 콜백 함수에서
return false기본 동작이 방지될 수도 있습니다.
이벤트는 조상 요소를 듣고 대상 요소를 결정하고 대상 요소가 조건을 만족하면 관련 작업을 수행합니다.
이벤트 위임의 장점:
많은 수의 요소에서 동일한 이벤트를 수신하려면 이벤트 위임을 사용하는 것이 하나씩 순회하고 수신하는 것보다 더 효율적입니다.
이벤트 위임을 사용하면 새 요소가 이벤트에 응답할 수 있습니다.
관련 권장사항: [JavaScript 비디오 튜토리얼]
위 내용은 일반적인 JavaScript DOM 이벤트에 대한 최신 요약입니다! 더 자세한 사항은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!
