JS의 이벤트 소개

1 이벤트

이벤트는 사용자와 브라우저 간의 상호작용 동작으로 이해될 수 있습니다.

2 이벤트 함수 바인딩
이벤트 기능: 이벤트가 발생하면 이벤트를 처리하는 데 사용되는 구체적인 대응 계획이 이벤트 처리 기능입니다
일부 코드 블록으로 표시됩니다
예: 마우스를 클릭하면(이벤트) - 어떤 동작이 수행됩니까? 이는 이벤트 핸들러에 의해 수행됩니다
키보드를 눌렀을 때(Enter 키를 누름) - 어떻게 해야 할까요?

요약: 이벤트 발생과 이벤트 처리 기능은 다른 개념이라는 점에 유의해야 합니다
이벤트 발생 후 해당 작업을 수행하는 이벤트 처리 기능이 있을 수도 있고 없을 수도 있습니다
이벤트 처리 기능이 없는 경우 , 이벤트 발생에 영향을 미치지는 않습니다. 무슨 일이 일어날지는 여전히 일어날 것입니다.
무엇을 할지는 이벤트 처리 기능에 의해 결정됩니다.

3 이벤트 학습 방법
1 마우스 클릭, 마우스 누르기, 마우스 리프트, 마우스 이동
과 같은 몇 가지 일반적인 이벤트가 js에 지정됩니다. , 마우스를 안팎으로 움직여보세요...
이벤트에 대해 숙지해야 할 두 부분이 있습니다: 1) 이벤트 이름(onclickonmouseover) 2) 해당 트리거 장면
이벤트 이름과 트리거 장면을 기억해야 합니다(연습을 더 많이 하고 손으로 복사하세요)

2 事件处理函数（功能）
  需要根据具体业务场景来实现

4 마우스 이벤트
마우스 관련 이벤트

事件名称        事件的触发场景

onmousedown     当鼠标按下的时候触发
onmouseup       当鼠标抬起的时候触发
onmouseover     当鼠标移入的时候触发
onmouseout      当鼠标移出的时候触发
onclick         当鼠标点击的时候触发
ondblclick      当鼠标双击的时候触发
onmousemove     当鼠标移动的时候触发
oncontextmenu   当鼠标右键的时候触发（可以自定义右键菜单）

5 키보드 이벤트
키보드 관련 이벤트 키보드(키) 눌림 키보드 들림
onkeydown 키보드를 누를 때 트리거됨
onkeyup은 키보드를 떼면

6개의 양식 이벤트를 트리거합니다
양식 관련 이벤트 양식 제출 집중하기 Lose focus

onsubmit     当表单提交的时候触发
onchange     当修改表单字段的时候触发(内容改变就会触发)
onfocus      当获取到焦点的时候触发
onblur        当失去焦点的时候触发

7 창 이벤트
창 관련 이벤트 창 로딩 창 변경

onload      当对象加载完成以后触发
onresize    当窗口改变的时候触发

8 이벤트 객체 이벤트
이벤트 객체는 이벤트가 발생했을 때 해당 이벤트와 관련된 정보를 기록하는데 사용되는 객체입니다
이벤트 객체는 항공기의 블랙박스와 자동차의 주행 기록기로 이해됩니다

핵심: 호환성 솔루션을 기억하세요 var ev = ev || keyCode 키보드 코드 Enter 13 Space 32 제어 방향
clientX, clientY 브라우저 가시 영역의 마우스 좌표
offsetLeft, offsetTop

9 이벤트 버블링

이벤트 버블링 메커니즘 – 현상
이벤트 버블링의 영향
이벤트 버블링을 중지하세요
이벤트 버블링 적용

创建元素、添加子元素
事件源
事件委托

관련 권장 사항:

JS 및 Node.js의 이벤트 루프에 대한 자세한 설명

node.js의 이벤트 처리 메커니즘에 대한 자세한 설명

이벤트 캡처 모델 및 버블링 js 모델 인스턴스 분석_javascript 기술

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