JavaScript 학습 총화 4 - 이벤트 귀속

3667 단어
이벤트 란 우리 가 페이지 에서 상호작용 을 하 는 것 을 말한다. 예 를 들 어 마 우 스 를 클릭 하고 키 보드 를 누 르 는 등 이다.
우리 가 특정한 요 소 를 조작 하여 일정한 상호작용 효 과 를 가 져 야 할 때 해당 하 는 요소 에 사건 처리 함 수 를 연결 해 야 한다.
이벤트 바 인 딩 은 HTML 내장 (추천 하지 않 음), 전통 이벤트 바 인 딩 (DOM 0 급 이벤트 바 인 딩 이 라 고도 함), 그리고 DOM 2 급 이벤트 바 인 딩 으로 나 뉜 다.
1. HTML 내장
  
<!--      -->
<body>
    <a href="#" onclick="fnEvent()">      </a>
</body>
<script>
    function fnEvent(){
      alert("     ");
    }
</script>

 
그러나 이런 표기 법 은 구조 적 표현 행위 분리의 원칙 에 어 긋 나 기 때문에 이런 귀속 사건 을 추천 하지 않 는 다
2. DOM 0 레벨 이벤트 귀속
//      
var aA=document.getElementsByTagName("a")[0];
aA.onclick=function(){
  alert("      ！");  
}

//     
function abc(){
  alert("      ");  
}
aA.onclick=abc;

 
이것 은 이벤트 처리 함 수 를 요소 에 직접 할당 하 는 클릭 이벤트 에 해당 하 는 할당 쓰기 입 니 다. 매우 간단 합 니 다.
단점 은 하나의 요소 가 한 번 에 하나의 이벤트 처리 함수 만 연결 할 수 있 고, 새로 연 결 된 이벤트 처리 함수 도 오래된 이벤트 처리 함 수 를 덮어 씁 니 다.
3. DOM 2 레벨 이벤트 귀속
DOM 2 급 이벤트 바 인 딩 은 IE 와 표준 W3C 호환성 문제 와 관련된다.
또는 상기 코드 중의 a 요 소 를 예 로 들 면 W3C 의 귀속 방식 은
  
var aA=document.getElementsByTagName("a")[0];
    aA.addEventListener('click',function(e){
    alert("      ");
},false);
//  aA    addEventListener  ，      ，       （  on），              （true     ，false     ）

 
IE 의 귀속 방식 은
aA.attachEvent('onclick',function(){
    alert("     ");
});
//      ，IE       ，           this，  this    window  ，       
//IE               on

이렇게 되면 W3C 와 IE 의 서로 다른 바 인 딩 방식 을 호 환 해 야 합 니 다.
DOM 2 레벨 이벤트 크로스 브 라 우 저 연결
//        
function addEvent(element,type,fn){
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else{
      element.attachEvent('on'+type,fn);  
    }
}

파이썬 알고리즘 097 | [백준 1193번] 분수찾기
(LeetCode)[JS] #1221

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage