JavaScript 이벤트 유형_javascript 기술의 UI 이벤트에 대한 자세한 설명

"DOM 레벨 3 이벤트"는 여러 유형의 이벤트를 규정합니다

사용자가 페이지의 요소와 상호작용할 때 분할되는 UI 이벤트
포커스 이벤트, 요소가 포커스를 얻거나 잃습니다.
마우스 이벤트, 마우스를 통해 페이지에서 작업을 수행합니다.
마우스 휠 또는 유사한 장치를 사용하여 휠 스크롤 이벤트
사용자가 문서에 텍스트를 입력할 때 발생하는 텍스트 이벤트
키보드 이벤트, 키보드를 통해 페이지 작업을 수행합니다.
IME(Input Method Editor)에 문자 입력 시 합성 이벤트, 분할
변경 이벤트(변이), 기본 DOM 구조 변경
이름 변경 이벤트, 요소 또는 속성 이름이 변경되면 이 유형의 이벤트는 더 이상 사용되지 않습니다.
다음은 UI 이벤트 내용을 중심으로

UI 이벤트는 반드시 사용자 작업과 관련이 없는 이벤트를 의미합니다.

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

로드 이벤트

js에서 가장 일반적으로 사용되는 이벤트 중 하나는 로드입니다. 페이지가 완전히 로드되면(모든 이미지, js 파일, CSS 파일 등) 창의 로드 이벤트가 트리거됩니다. 예:

window.onload = function () {
  console.log('loaded');
}

일반적으로 창에서 발생하는 모든 이벤트는 HTML에서 창 요소에 액세스할 수 없기 때문에 body 요소의 해당 특성을 통해 지정할 수 있습니다. 이는 이전 버전과의 호환성을 보장하기 위한 임시방편일 뿐입니다. 예:

document.body.onload = function () {
  console.log('loaded');
}

이미지 요소에도 사용할 수 있습니다.

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

또 다른 예는 다음 코드입니다. img 요소가 로드된 후 이미지의 src와 프롬프트 메시지가 표시됩니다.

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

또한 스크립트 요소는 비표준 방식으로 로드 이벤트도 지원합니다.

일부 브라우저에서는 개발자가 스타일 시트가 로드되었는지 확인할 수 있도록 링크 요소에서 로드 이벤트도 지원합니다.

언로드 이벤트

이 이벤트는 문서가 완전히 언로드된 후에 트리거됩니다. 언로드 이벤트는 사용자가 한 페이지에서 다른 페이지로 전환할 때마다 발생합니다.

window.onunload = function () {
  alert("8888");
}

onunload 이벤트 핸들러에 코드를 작성할 때는 주의해야 합니다. 페이지가 로드된 후 존재하는 객체가 현재 존재하지 않을 수 있기 때문입니다.

크기 조정 이벤트

이 이벤트는 브라우저 창의 크기가 새로운 높이나 너비로 조정될 때 트리거됩니다.

window.onresize = function () {
  console.log(document.body.clientWidth);
}

일부 브라우저는 창이 1픽셀씩 변경될 때 이 이벤트를 트리거하고 창이 변경될 때 계속 트리거하기 때문에 다른 브라우저는 사용자가 창 크기 조정을 중지할 때만 트리거됩니다. 따라서 브라우저의 응답 속도가 느려지는 것을 방지하려면 이 이벤트 핸들러에 많은 계산 코드를 추가하지 않아야 합니다.

스크롤 이벤트

이 이벤트는 창 개체에서 발생하지만 실제로는 페이지 응답 요소의 변경 사항을 나타냅니다. 혼합 모드에서는 변경 사항이 body 요소의 scrollLeft 및 scrollTop을 통해 모니터링됩니다. 비표준 모드에서는 Safari를 제외한 모든 브라우저가 html 요소(documentElement)를 통해 이 변경 사항을 반영합니다.

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

브라우저는 변경 사항에 따라 지속적으로 트리거되므로 브라우저 응답 속도가 느려지는 것을 방지하려면 이 이벤트 핸들러에 많은 계산 코드를 추가하지 않아야 합니다.

이벤트 중단

중단, 오류, 선택 및 기타 이벤트에 대한 후속 업데이트에 주의하시기 바랍니다

오류 이벤트

중단, 오류, 선택 및 기타 이벤트에 대한 후속 업데이트에 주의하시기 바랍니다

이벤트 선택

중단, 오류, 선택 및 기타 이벤트에 대한 후속 업데이트에 주의하시기 바랍니다