js의 여러 유형의 이벤트 핸들러에 대한 자세한 소개

이벤트는 사용자나 브라우저 자체가 수행하는 특정 동작으로 클릭, 로드, 마우스 오버 등이 이벤트 이름입니다.

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다.

이벤트 핸들러는 이벤트에 응답하는 함수입니다. 이벤트 핸들러의 이름은 "on"으로 시작합니다. 예를 들어 클릭 이벤트에 해당하는 이벤트 핸들러의 이름은 onclick입니다.

HTML 이벤트 핸들러, DMO 레벨 0 이벤트 핸들러, DOM 레벨 2 이벤트 핸들러, IE 이벤트 핸들러, 크로스 브라우저 이벤트 핸들러 등 이벤트 핸들러를 지정하는 방법은 다양합니다.

(1) html 이벤트 핸들러

즉, 해당 html 태그에 이벤트 핸들러를 작성합니다.

예:

<input type="button" value="click me" onclick="alert("hello")" />

단점: ① 시간차가 있습니다. 페이지에 html 요소가 나타나자마자 사용자가 해당 이벤트를 트리거하면 이벤트 핸들러에 아직 실행 조건이 없을 수 있습니다(예: 호출됨). 함수를 아직 사용할 수 없음)이 구문 분석되었으므로 오류가 발생합니다. 예:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

호출되는 함수가 버튼 아래에 있기 때문에 메시지 함수가 로딩되기 전에 버튼을 클릭하면 에러가 발생합니다.

②html과 js 코드 간의 결합도가 너무 높습니다. 이벤트 핸들러를 변경하려면 html 코드와 javascript 코드 두 곳을 변경해야 합니다.

(2) DMO 레벨 0 이벤트 핸들러

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

참고: 이 코드가 버튼 뒤에 있으면 이 코드 앞에는 이벤트 핸들러가 지정되지 않기 때문에 한동안 어떻게 클릭해도 응답이 없을 수 있습니다. 실행됩니다.

DMO 레벨 0 이벤트 핸들러는 요소의 메서드로 간주됩니다. 즉, DMO 레벨 0 이벤트 핸들러는 요소 범위 내에서 실행되므로 프로그램에서 이는 현재 요소를 참조합니다. 이벤트 핸들러에서 이를 통해 요소의 모든 속성과 메서드에 액세스할 수 있습니다.

이런 방식으로 추가된 이벤트 핸들러는 이벤트 흐름의 버블링 단계에서 처리됩니다.

지정된 이벤트 핸들러를 삭제할 수도 있습니다. 이벤트 핸들러의 속성을 null로 설정하면 됩니다.

eg:
btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

(3) DOM2 수준 이벤트 핸들러

DOM2 수준 이벤트는 이벤트 핸들러를 지정하고 제거하는 두 가지 방법을 정의합니다. 이 두 가지 작업은 addEventListener() 및 RemoveEventListner()입니다. 모든 DOM 노드에는 이 두 가지 메서드가 포함되어 있습니다. 처리할 이벤트 이름, 처리 기능, 부울 값 등 3가지 매개변수를 허용해야 합니다. 마지막 Boolean 매개변수가 true이면 캡처 단계에서 핸들러가 호출된다는 의미입니다. false이면 버블링 단계에서 이벤트 핸들러가 호출된다는 의미입니다.

예를 들어 버튼 클릭에 대한 이벤트 핸들러를 추가하려면 다음 코드를 사용할 수 있습니다.

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

DOM2 이벤트 핸들러를 사용하면 동일한 요소에 대해 여러 이벤트 핸들러를 추가할 수 있다는 장점이 있습니다.

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

결과: ID가 먼저 표시된 다음 hello world가 표시됩니다.

addEventListner()를 통해 추가된 이벤트 핸들러는 RemoveEventListner를 통해서만 제거할 수 있습니다. 제거에 사용되는 매개변수는 이벤트 핸들러 추가와 동일합니다. 추가 참고사항: addEventListner를 통해 추가된 익명 함수는 삭제할 수 없습니다.

(4) IE 이벤트 핸들러.

IE의 이벤트 핸들러 추가 및 삭제 기능은 다음과 같습니다. attachmentEvent() 및 detachEvent() 이 두 함수는 이벤트 핸들러 이름과 이벤트 처리 함수라는 동일한 두 매개변수를 받습니다. IE는 이벤트 버블링만 지원하므로,attachEvent를 통해 추가된 이벤트 핸들러는 버블링 단계에 추가됩니다.

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE AttachEvent 메소드를 사용할 때 이벤트 핸들러의 범위는 전역 범위이므로 window와 같습니다. (크로스 브라우저 코드를 작성할 때 기억하는 것이 매우 중요합니다.)

addEventListner와 유사하게, attachmentEvent() 메소드를 사용하여 요소에 여러 이벤트 핸들러를 추가할 수도 있습니다.

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

이러한 이벤트에 대한 핸들러는 역순으로 트리거됩니다. 즉, hello 팝업이 먼저 나타납니다. 월드 클릭이 다시 나타납니다.

detach() 사용법을 간략히 언급합니다.

(5) 크로스 브라우저 이벤트 핸들러

크로스 브라우저 방식으로 이벤트를 처리하기 위해 사용할 수 있는 두 가지 주요 방법이 있습니다.

① 브라우저 차이점을 격리할 수 있는 js 라이브러리를 사용합니다.

②가장 적합한 이벤트 처리 방법을 직접 작성해 보세요. 여기에서는 기능 감지, 즉 브라우저의 기능을 식별하는 데 사용됩니다. 대부분의 브라우저에서 코드가 일관되게 실행되도록 하려면 버블링 단계에만 집중하세요.

코드 단계는 다음과 같습니다. 생성할 첫 번째 메소드는 addHandler입니다(브라우저 간 호환성 문제를 처리하는 데 사용되며 여기에는 특정 코드가 제공되지 않습니다). 이 메소드의 책임은 DOM0 레벨 메소드를 사용할지, DOM2 레벨을 사용할지 결정하는 것입니다. 상황에 따라 IE 방식으로 이벤트를 추가합니다. addHandler는 작업할 요소, 이벤트 이름, 이벤트 핸들러 함수라는 3개의 매개변수를 받습니다. 이 메서드는 EventUtil이라는 개체에 속합니다. 이 개체는 여기에서 브라우저 간의 차이점을 처리하는 데 사용됩니다.

addHandler에 해당하는 메소드는 동일한 매개변수를 허용하는 RemoveHandler()입니다. 이 이벤트의 책임은 이전에 추가된 이벤트 핸들러를 제거하는 것입니다. 객체에 이벤트를 어떻게 추가하든 다른 메소드가 유효하지 않은 경우 기본적으로 DOM 레벨 0 메소드가 사용됩니다.

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式，希望今后会对大家有帮助。

相关文章：

重点解答动态加载JS脚本，一语道破

javascript中遍历EL表达式List集合中的值

如何在<script></script>标签中一样可以使用el表达式

위 내용은 js의 여러 유형의 이벤트 핸들러에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!