이벤트 흐름 : 두 가지 유형이 있습니다. 즉, 이벤트 버블 흐름입니다. 이벤트가 시작되면 가장 구체적인 요소에서 수신되고 덜 구체적인 노드로 단계별로 전파됩니다 (요소 -> 문서). 대조적으로, Netscape의 이벤트 캡처 스트림.
DOM2 레벨 이벤트는 이벤트 흐름에 3 단계의 단계, 이벤트 캡처 스테이지, 대상 단계 및 이벤트 버블 스테이지가 포함되어 있다고 규정합니다.
대부분의 경우 이벤트 핸들러를 이벤트 스트림에 추가하는 버블 단계입니다. 이벤트의 밤나무 :
var eventUtil = {addhandler : 함수 (요소, 유형, 핸들러) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ( 'on' + type, handler); // IE8} else {element [ 'on' + type] = handler; }}, removeHandler : function () {... ...}}아래에서 자세히 살펴 보겠습니다.
DOM0 레벨 이벤트 핸들러
JavaScript를 통해 이벤트 핸들러를 지정하는 전통적인 방법은 이벤트 핸들러 속성에 함수를 할당하는 것입니다.
각 요소에는 자체 이벤트 핸들러 속성이 있으며 일반적으로 OnClick과 같은 모든 소문자입니다. 이 속성의 값을 함수로 설정하면 이벤트 핸들러를 지정할 수 있습니다.
var btn = document.getElementById ( 'mybtn'); // 이벤트 핸들러 추가 btn.onclick = function () {alert (this); // 돔 요소 btn}}; // 이벤트 핸들러 제거 btn.onclick = null;장점 : 1. 단순 2. 크로스 브라우저의 장점이 있습니다.
단점 : 코드가 실행되기 전에 이벤트 핸들러가 지정되지 않으므로이 코드는 페이지의 버튼 뒤에 위치하므로 일정 기간 후에 응답이 수신되지 않고 사용자 경험이 악화 될 수 있습니다.
DOM2 레벨 이벤트 핸들러
이벤트 핸들러를 지정하고 삭제하는 작업을 처리하기 위해 두 가지 방법이 정의됩니다 : addeventListener () 및 removeEventListener (). 세 가지 매개 변수, 1. 처리 할 이벤트의 이름. 2. 이벤트 핸들러로 기능 3. 부울 값. 마지막 부울 값은 사실입니다. 즉, 이벤트 핸들러가 캡처 스테이지에서 호출되고 거짓은 이벤트 핸들러가 버블 스테이지에서 호출되었음을 의미합니다.
// 여러 이벤트 처리기 var btn = document.getElementById ( 'mybtn'); btn.addeventListener ( 'click', function () {alert (this); // dom element btn}, false); btn.addeventListener ( 'click', function () {hello world '); btn.removeeventListener ( 'click', function () {// 익명 함수를 제거 할 수없고 제거 실패}, false); // var handler = function () {alert (this.id); }; btn.addeventListener ( '클릭', 핸들러, 거짓); // 이벤트 핸들러를 다시 제거하십시오 BTN.removeEventListener ( 'Click', Handler, False); // 성공적으로 제거하십시오이 두 이벤트 핸들러는 추가 된 순서대로 해고됩니다. 대부분의 경우 이벤트 핸들러는 이벤트 스트림의 버블 링 단계에 추가되며 다양한 버전의 브라우저와 최대의 호환성이 될 수 있습니다.
장점 : 하나의 요소가 여러 이벤트 처리기를 추가 할 수 있습니다
단점 : IE8 이하의 브라우저는 DOM2 레벨 이벤트 핸들러를 지원하지 않습니다. (IE8 포함)
즉, 이벤트 핸들러
위와 유사한 두 가지 방법이 정의됩니다. 이 두 가지 방법은 이벤트 핸들러 이름과 이벤트 핸들러 기능의 동일한 두 매개 변수를받습니다. IE8과 이전 버전은 이벤트 버블 만 지원하므로 DetacheVent ()를 통해 추가 된 이벤트 처리기가 기포 단계에 추가됩니다.
var btn = document.getElementById ( 'mybtn'); btn.attacheVent ( 'onclick', function () {alert (this); // window}); btn.attachevent ( 'onclick', funciton () {alert ( "hello, world");버튼을 클릭하십시오.이 두 이벤트 처리기의 트리거 순서는 위의 반대입니다. 이벤트 핸들러가 추가되는 순서대로 트리거되지 않습니다.
장점 : 하나의 요소가 여러 이벤트 처리기를 추가 할 수 있습니다
단점 : IE 만 지원합니다.
크로스 브라우저 이벤트 핸들러
예 : :
var eventUtil = {addhandler : 함수 (ele, type, handler) {if (ele.addeventListener) {ele.addeventListener (유형, 핸들러, 거짓); } else if (ele.attachevent) {ele.attachevent ( 'on' + type, handler); } else {ele [ 'on' + type] = handler}}, removeHandler : function (ele, type, handler) {if (ele.removeEventListener) {ele.removeEventListener (유형, 핸들러, 거짓); } else if (ele.detachevent) {ele.detachevent ( 'on' + type, handler); } else {ele [ 'on' + type] = null; }}}