Js on 및addEventListener 원리 용법 구별 해석

2758 단어 JsonaddEventListener
하나.먼저 두 가지 방법을 소개합니다.
1.on의 사용법:onclick을 예로 들다
첫 번째:

obj.onclick = function(){
//do something..
}
두 번째:

obj.onclick= fn;
function fn (){
//do something...
}
세 번째: 함수 fn에 매개 변수가 있는 경우 익명 함수를 사용하여 참고합니다.

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}
이렇게 쓰면 안 돼요.onclick= fn(param):
이렇게 함수를 쓰면 바로 실행되기 때문에 클릭 촉발을 기다리지 않습니다. 특히 주의하십시오.
2.addEventListener 사용법:
형식:
addEventListener(event,funtionName,useCapture)
매개변수:
  • 이벤트: 이벤트의 유형은 "클릭"과 같습니다
  • funtionName: 메서드 이름
  • useCapture(선택 사항): 이벤트가 포획 또는 거품 발생 단계에서 실행되는지 여부를 지정하는 부울 값..
  • true - 이벤트 핸들이 포획 단계에서 실행됩니다
  • false-false-기본값.이벤트 핸들이 거품이 나는 단계에서 실행됩니다
  • 쓰기 방법:
    첫 번째:
    
    obj.addEventListener("click",function(){
    //do something
    }));
    두 번째, 매개 변수가 없으면 함수 이름을 직접 쓸 수 있다
    
    obj.addEventListener("click",fn,fasle));
    function fn(){
    //do something..
    }
    세 번째: 함수에 파라미터가 있을 때 익명 함수를 사용하여 파라미터를 전달해야 한다
    obj.addEventListener("click",function(){fn(parm)},false);
    2.양자의 차이
    1.on 이벤트는 뒤에 있는 on 이벤트로 덮어씁니다.
    onclick의 경우:
    
    //obj dom , // 
    obj.onclick(function(){
    alert("hello world");
    });
    // 
    obj.onclick(function(){
    alert("hello world too");
    });
    결국 탄창 출력만 가능합니다.
    hello world too
    2.addEventListener는 덮어쓰지 않습니다.
    
    // 
    obj.addEventListener("click",function(){
    alert("hello world");
    }));
    // 
    obj.addEventListener("click",function(){
    alert("hello world too");
    }));
    이렇게 하면 연속적으로 출력됩니다.
    hello world
    hello world too
    셋.addEventListener 참고 사항:
    1. 특히addEventListener는 IE9 이하와 호환되지 않으며, IE9 이하는 attachEvent () 를 사용합니다.
    obj.attachEvent(event,funtionName);
    매개변수:
    이벤트: 이벤트 형식 ("onclick"앞에 on을 붙여야 합니다. 이것은addEventListener와 다릅니다)
    funtionName: 메서드 이름(매개 변수는 익명 함수로 전달해야 함)
    사.이벤트 컬렉션:
    1. 마우스 이벤트:
  • click(클릭)
  • dbclick(더블 클릭)
  • mousedown(마우스 누르기)
  • 마우스 이동
  • mouseover(마우스 이동)
  • mouseup(마우스 튕김)
  • mousemove(마우스 이동)
  • 2. 키보드 이벤트:
  • keydown(키 누르기)
  • keypress(버튼)
  • keyup
  • 3.HTML 이벤트:
  • load(로드 페이지)
  • unload (페이지를 마운트 해제)
  • change(내용 변경)
  • scroll
  • focus(초점 획득)
  • blur(초점 잃음)
  • 5.요약:
    onXXX와addEventListener는 모두dom 요소에 이벤트 감청을 추가하여 이벤트 발생 후 해당하는 코드를 실행하고 조작합니다.그것들이 있어서 우리는 페이지와 사용자의 상호작용을 실현했다.
    이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

    좋은 웹페이지 즐겨찾기