다음은 제가 여러분을 위해 정리한 js 네이티브 이벤트입니다. 관심 있는 학생들은 한 번 살펴볼 수 있습니다.
1. 이벤트 흐름
이벤트 흐름은 크게 이벤트 버블링과 이벤트 캡처의 두 가지 유형으로 나뉩니다. 이벤트가 버블링되고 대상 요소가 먼저 이벤트를 수신한 다음 덜 구체적인 노드로 점진적으로 전파됩니다. 이벤트 캡처는 정반대입니다. 주요 아이디어는 덜 구체적인 노드가 먼저 이벤트를 수신한 다음 점차적으로 대상 노드로 전파된다는 것입니다.
div를 클릭하면 버블링 이벤트는 노드 순서 div->body->html->document를 수신합니다.
캡처 이벤트는 노드 순서 document->html->body->div를 수신합니다.
2. 이벤트 핸들러
a) HTML 이벤트 핸들러
요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다.
단점: 1. 시차 문제, 브라우저가 클릭 이벤트 기능을 구문 분석하기 전에 사용자가 페이지 요소를 클릭했을 수 있습니다. try-catch를 통해 오류를 래핑합니다.
2 이벤트 핸들러의 범위 체인은 다른 브라우저에서 변경됩니다. 다른 결과를 가져옵니다.
3. HTML 코드와 Javascript 코드가 밀접하게 결합되어 있어 확장 및 유지 관리에 도움이 되지 않습니다.
b) DOM0 레벨 이벤트 핸들러
요소 이벤트 핸들러 속성에 함수 할당
var btn = document.getElementById(“#dv”)
btn.onclick = function(){}
삭제하려는 이벤트 Handler 요소 –btn.onclicn = null;
이런 방식으로 추가된 이벤트 핸들러는 이벤트 버블링 단계에서 처리됩니다.
c) DOM2 레벨 이벤트 핸들러
이벤트 핸들러 지정 addEventListener
이벤트 핸들러 제거 RemoveEventListener
3개의 매개변수, 즉 처리할 이벤트 이름, 이벤트 핸들러의 기능 및 부울 값을 수신합니다(true는 핸들러가 호출됨을 나타냄). 캡처 단계에서 false는 버블링 단계에서 이벤트 핸들러가 호출된다는 의미입니다.)
참고: addEventListener는 RemoveEventListener를 통해 삭제되어야 하며 매개변수가 일관되어야 하므로 addEventListener를 통해 추가된 익명 함수는 제거할 수 없습니다.
d)IE事件处理程序
attachEvent
detachEvent
两个方法接收相同的两个参数(”onclick”,”function(){}”);
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。
注意:attach中第一个参数是onclick而不是addEventListener中的click
IE事件处理程序attachEvent添加的在全局作用域中运行
var btn = document.getElementById(“#tes”); btn.attachEvent(“onclick”,function(){ alert(this == window); //true })
3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同,所以有必要编写可以跨浏览器使用的事件处理程序。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
위 내용은 js 기본 이벤트 설명에 대한 자세한 분석(코드 첨부, 간단하고 명확함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!