JavaScript 이벤트 바인딩 사용 방법에 대한 자세한 설명

html은 위에서 아래로 로드되기 때문에 일반적으로 헤드 섹션에 자바스크립트 파일을 삽입하는 경우 문서가 로드될 때 DOM 작업의 오류를 방지하기 위해 자바스크립트 시작 부분에 window.onload 이벤트를 추가합니다. . 자바스크립트 파일이 여러 개인 경우 여러 개의 window.onload 이벤트가 발생할 가능성이 높지만, 결국에는 하나만 작동하게 되므로 이 문제를 해결하려면 이벤트 바인딩을 사용해야 합니다.

IE 모드
attachEvent(이벤트 이름, 함수), 바인딩 이벤트 처리 함수
detachEvent(이벤트 이름, 함수), unbind

DOM 모드
addEventListener(이벤트 이름 , function, 캡처)
removeEventListener(이벤트 이름, 함수, 캡처)

이 js 코드를 실행한 결과 oBtn 클릭 이벤트가 2개 있어서 b가 팝업되는데 하나만 실행됩니다. 마지막 첫째, 이번에는 이벤트 바인딩의 중요성을 반영합니다.

이벤트 바인딩을 사용하면 두 클릭 이벤트가 모두 실행되지만 브라우저마다 실행 순서가 다릅니다. IE에서는 아래에서 위로 실행되는 반면, 다른 브라우저에서는 위에서 아래로 실행됩니다. 그러나 경고의 특수성으로 인해 다른 명령문은 기본적으로 차이가 없음을 알 수 있습니다. 엄격한 시간 요구 사항이 있는 일부 사람들은 이벤트를 사용할 때 여전히 주의를 기울여야 합니다. 예를 들어 이전 기사에서는 이미지 캐러셀의 setInterval 간의 미묘한 시간 차이로 인해 결국 스크롤 혼란이 발생했습니다. 네이티브 자바스크립트 기반 이미지 캐러셀 도모

마지막으로 후속 사용을 용이하게 하기 위해 코드를 함수로 정리

function myAddEvent(obj, ev, fn)
{
  if(obj.attachEvent)
  {
    obj.attachEvent('on'+ev, fn);
  }
  else
  {
    obj.addEventListener(ev, fn, false);
  }
}

이때 여러 window.onload 이벤트를 사용해야 하는 경우 실제로는 여러 oBtn.onclick 이벤트로 거의 충분합니다. 다음과 같이 함수를 호출하면 됩니다.

myAddEvent(window,'load',function ()
{
  alert('a');
});
myAddEvent(window,'load',function ()
{
  alert('b');