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

하나.먼저 두 가지 방법을 소개합니다.
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 요소에 이벤트 감청을 추가하여 이벤트 발생 후 해당하는 코드를 실행하고 조작합니다.그것들이 있어서 우리는 페이지와 사용자의 상호작용을 실현했다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.