집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 학습에서 자주 접하는 js 이벤트 핸들러

JavaScript 학습에서 자주 접하는 js 이벤트 핸들러

php是最好的语言원래의: 2018-07-26 12:43:451593검색

이벤트에 대한 이벤트 핸들러를 지정하는 세 가지 주요 방법이 있습니다. 1. html 이벤트 핸들러: 우선 이 방법은 오래되었습니다. 2. DOM 레벨 0 이벤트 핸들러: 이 방법은 간단하고 브라우저 간이지만 사용할 수만 있습니다. 3. DOM2 수준 이벤트 핸들러: DOM2 수준 이벤트 핸들러는 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.

1. 이벤트 핸들러

앞서 언급했듯이 이벤트는 사용자 또는 찾아보기 클릭, 로드, 마우스 오버 등 서버 자체에서 수행되는 특정 동작은 이벤트의 이름입니다. 이벤트에 응답하는 함수를 이벤트 핸들러(이벤트 핸들러, 이벤트 핸들러라고도 함)라고 합니다. 이벤트 핸들러의 이름은 "on"으로 시작하므로 click 이벤트에 대한 이벤트 핸들러는 onclick이고, load 이벤트에 대한 이벤트 핸들러는 onload입니다.

이벤트에 대한 이벤트 핸들러를 지정하는 세 가지 주요 방법이 있습니다.

1.html 이벤트 핸들러

우선 이 방법은 오래되었습니다. 액션(자바스크립트 코드)과 콘텐츠(html 코드)가 밀접하게 결합되어 있기 때문입니다. 하지만 작은 데모를 작성할 때는 여전히 사용할 수 있습니다.

이 방법에는 두 가지 방법도 있는데 둘 다 간단합니다.

첫 번째 방법: 이벤트 핸들러와 포함된 작업을 HTML에 직접 정의합니다.

코드는 다음과 같습니다.

88ee14391983dff0919134c61f7ad1b0

두 번째 유형 : html 이벤트 핸들러는 스크립트에 정의되어 있으며 수행되는 작업은 다른 곳에 정의된 스크립트를 호출합니다.

코드는 다음과 같습니다:

88ee14391983dff0919134c61f7ad1b03f1c4e4b6b16bbbd69b2ee476dc4f83afunction showMessage(){ 경고 ("클릭했습니다!");}2cacc6d41bbb37262a98f745aa00fbf0

note:

1) 당신 이벤트 변수를 사용할 수 있습니다. 이벤트 자체에 직접 액세스할 수 있습니다. 예를 들어 onclick="alert(event.type)"은 클릭 이벤트를 팝업합니다.

2) 이 값은 이벤트의 대상 요소가 입력된 대상 요소와 같습니다. 예를 들어 onclick="alert(this.value)"는 입력 요소의 값을 가져올 수 있습니다.

2. DOM 레벨 0 이벤트 핸들러

이 방법은 간단하고 크로스 브라우저이지만 하나의 이벤트 핸들러에만 추가할 수 있습니다. 요소 기능.

이 메서드는 여러 이벤트 핸들러를 요소에 추가하기 때문에 이후 이벤트 핸들러가 이전 이벤트 핸들러를 덮어쓰게 됩니다.

이벤트 핸들러 추가:

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
 alert("clicked!");
}
</script>

이벤트 핸들러 제거:
#🎜🎜 ## 🎜🎜#코드는 다음과 같습니다.

myBtn.onclick=null;

3 DOM2 수준 이벤트 핸들러

# 🎜🎜#DOM2 수준 이벤트 핸들러는 요소에 여러 이벤트 핸들러를 추가할 수 있습니다. 이는 이벤트 핸들러를 추가하고 제거하기 위한 두 가지 메소드인 addEventListener() 및 RemoveEventListener()를 정의합니다.

두 방법 모두 이벤트 이름, 이벤트 처리 함수, 부울 값이라는 3가지 매개변수가 필요합니다.

이 부울 값은 true, 캡처 단계에서 이벤트가 처리되는 경우 false, 버블링 단계에서 이벤트가 처리되는 경우, 기본값은 false입니다.

이벤트 핸들러 추가:

이제 버튼에 두 개의 이벤트 핸들러를 추가합니다. 하나는 "hello" 팝업이고 다른 하나는 "world" 팝업입니다.

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.addEventListener("click",function(){
  alert("hello");
 },false);
 myBtn.addEventListener("click",function(){
  alert("world");
 },false);
</script>

Delete 이벤트 핸들러:

addEventListener를 통해 추가된 이벤트 핸들러는 RemoveEventListener를 통해 삭제해야 하며 매개변수는 일관됩니다. 참고: addEventListener를 통해 추가된 익명 함수는 삭제할 수 없습니다. 아래 코드는 작동하지 않습니다!

코드는 다음과 같습니다:

myBtn.removeEventListener("click",function(){ Alert("world "); },false);

removeEventListener 매개변수는 위의 addEventListener 매개변수와 일치하는 것처럼 보이지만 실제로 두 번째 매개변수의 익명 함수는 완전히 다릅니다.

따라서 이벤트 핸들러를 삭제하려면 다음과 같이 코드를 작성하면 됩니다.

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler=function(){
  alert("hello");
 }
 myBtn.addEventListener("click",handler,false);
 myBtn.removeEventListener("click",handler,false);
</script>

2. IE 이벤트 핸들러

#🎜🎜 ##🎜 🎜#

1. 실제 적용 시나리오

IE8 이하 브라우저에서는 addEventListener를 지원하지 않습니다. IE8 이하 브라우저. 기본 바인딩 이벤트를 사용하고 호환성 처리를 수행해야 하는 경우 jquery의 바인딩을 대신 사용할 수 있습니다.

2. IE8 이벤트 바인딩

IE8 이하 브라우저는 DOM의 메소드와 유사한 두 가지 메소드인 attachmentEvent() 및 detachEvent()를 구현합니다. .

두 방법 모두 이벤트 핸들러 이름과 이벤트 핸들러 함수라는 두 가지 매개변수가 필요합니다.

참고:

IE11은 addEventListener만 지원합니다! IE9 및 IE10은 AttachEvent와 addEventListener를 모두 지원합니다!

TE8 이하 버전은 AttachEvent만 지원합니다!

다음 코드를 사용하여 다양한 버전의 IE 브라우저에서 테스트할 수 있습니다.

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handlerIE=function(){
  alert("helloIE");
 }
 var handlerDOM= function () {
  alert("helloDOM");
 }
 myBtn.addEventListener("click",handlerDOM,false);
 myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world

<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert("hello");
 });
 myBtn.attachEvent("onclick",function(){
  alert("world");
 });
</script>

note:这里运行效果值得注意一下：

IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。

和DOM事件一样，添加的匿名函数将无法删除。

所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler= function () {
  alert("hello");
 }
 myBtn.attachEvent("onclick",handler);
 myBtn.detachEvent("onclick",handler);
</script>

note:IE事件处理程序中还有一个地方需要注意：作用域。

使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。

而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

下面例子会弹出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert(this===window);
 });
</script>

在编写跨浏览器的代码时，需牢记这点。

IE7\8检测：

//判断IE7\8 兼容性检测
   var isIE=!!window.ActiveXObject;
   var isIE6=isIE&&!window.XMLHttpRequest;
   var isIE8=isIE&&!!document.documentMode;
   var isIE7=isIE&&!isIE6&&!isIE8;
   if(isIE8 || isIE7){
    li.attachEvent("onclick",function(){
     _marker.openInfoWindow(_iw);
    }) 
   }else{
    li.addEventListener("click",function(){
     _marker.openInfoWindow(_iw);
    })
   }

以上所述是小编给大家介绍的JavaScript事件学习小结(二)js事件处理程序的相关知识，希望对大家有所帮助！

JavaScript 학습에서 자주 접하는 js 이벤트 핸들러

相关推荐：

관련 기사