Js on과 addEventListener 원칙 및 사용법의 차이점을 분석합니다.

1. 먼저 두 가지의 사용을 소개합니다. 하나:

obj.onclick = function(){
//do something..
}

세 번째 방법: 함수 fn에 매개변수가 있는 경우 익명 함수를 사용하여 매개변수 전달:

obj.onclick= fn;
function fn (){
//do something...
}

다음과 같이 작성할 수 없습니다: 잘못된 작성: obj.onclick= fn(param):

함수를 다음과 같이 작성하기 때문에 이는 즉시 실행되며 클릭이 트리거될 때까지 기다리지 않습니다.

2 사용법에 특히 주의하세요. addEventListener:

Form:

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

매개변수:

event: 이벤트 유형 "click"과 같습니다.

funtionName: 메서드 이름
useCapture(선택 사항): 부울 값, 캡처 또는 버블링 단계에서 이벤트가 실행되는지 여부를 지정합니다.

true - 캡처 단계에서 이벤트 핸들러가 실행됩니다.

false - false - 기본값입니다. 이벤트 핸들은 버블링 단계에서 실행됩니다

작성:
• 첫 번째 유형:

addEventListener(event,funtionName,useCapture)

• 두 번째 유형은 매개 변수 없이 함수 이름을 직접 작성할 수 있습니다

obj.addEventListener("click",function(){
//do something
}));

• 세 번째 유형: 함수에 매개 변수가 있는 경우, 매개변수

• obj.addEventListener("click",fn,fasle));
  function fn(){
  //do something..
  }

2를 전달하려면 익명 함수를 사용해야 합니다. 두

1의 차이점은 후속 on 이벤트

로 덮어쓰여집니다. 예:

obj.addEventListener("click",function(){fn(parm)},false);

결국에는 팝업 상자만 출력됩니다.

//obj是一个dom对象，下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

2.addEventListener는 재정의되지 않습니다.

hello world too

다음과 같이 계속해서 출력됩니다.

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

3. addEventListener에 대한 참고 사항:

1. IE9 이하에서는 addEventListener가 호환되지 않는다는 점에 유의하세요.

hello world
hello world too

매개변수:

event: 이벤트 유형(앞에 on이 있는 "onclick"으로 작성해야 하며 이는 addEventListener와 다름) funtionName: 메소드 이름(매개변수를 원하는 경우에도 사용해야 함) 매개변수 전달을 위한 익명 함수)

IV. 이벤트 수집:

1. 마우스 이벤트:

click(클릭)

dbclick(더블클릭)

mousedown(마우스 누름)
mouseout(마우스 제거)mouseover(마우스가 안으로 이동)

mouseup(마우스 업)

mousemove(마우스 이동)
• 2. 키보드 이벤트:
• keydown(키 누름)
• keypress(키)
keyup(키업)
• 3.HTML 이벤트 :
• load(페이지 로드)

unload(페이지 나가기 언로드)

change(내용 변경)
• scroll(스크롤)
• focus(포커스 가져오기)
• 흐림(포커스 상실)
• 5. 요약:
• onXXX 및 addEventListener는 모두 이벤트 발생 후 해당 코드 및 작업을 실행할 수 있도록 dom 요소에 이벤트 리스너를 추가합니다. 이를 통해 우리는 페이지와 사용자 상호 작용을 실현합니다.
• 관련 학습 권장사항:
javascript 비디오 튜토리얼

위 내용은 Js on과 addEventListener 원칙 및 사용법의 차이점을 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!