이는 적절한 이벤트가 버블링되고 브라우저가 할당된 이벤트 핸들러를 실행한다는 것을 의미합니다. 이 기능은 웹 애플리케이션을 테스트할 때 매우 유용합니다. IE9 Chrome FF Opera 및 Safari는 IE8 및 이전 방법에서 이벤트를 시뮬레이션하는 자체 방법을 제공합니다.
a) Dom 이벤트 시뮬레이션
문서의 createEvent() 메소드를 통해 언제든지 이벤트 객체를 생성할 수 있습니다. 이 메소드는 객체의 이벤트 문자열을 생성해야 하는 하나의 매개변수만 허용합니다. 레벨 사양에서는 모든 문자열이 복수형입니다. DOM 레벨 3 이벤트에서는 모든 문자열이 다음과 같습니다.
UIEvents: 일반 UI 이벤트, 마우스 이벤트 및 키보드 이벤트는 모두 UI 이벤트에서 상속됩니다. UIEvent는 DOM 레벨 3에서 사용됩니다.
MouseEvents: 범용 마우스 이벤트, MouseEvent는 DOM 레벨 3에서 사용됩니다.
MutationEvents: 범용 돌연변이 이벤트인 MutationEvent는 DOM 레벨 3에서 사용됩니다.
HTMLEvents: 범용 HTML 이벤트이며 DOM3 수준에는 이에 상응하는 이벤트가 없습니다.
IE9는 DOM3 수준 키보드 이벤트를 지원하는 유일한 브라우저이지만 다른 브라우저도 키보드 이벤트를 시뮬레이션하는 데 사용할 수 있는 다른 방법을 제공합니다.
이벤트 객체가 생성되면 해당 이벤트의 관련 정보를 초기화해야 합니다. 각 이벤트 유형에는 초기화할 특정 메서드가 있습니다. 이벤트 객체가 생성된 후 해당 이벤트는 DispatchEvent()를 통해 이벤트에 적용됩니다. 특정 DOM 노드에서 이 이벤트를 지원합니다. 이 dispatchEvent() 이벤트는 사용자가 생성한 이벤트 객체인 하나의 매개 변수를 지원합니다.
b) 마우스 이벤트 시뮬레이션
마우스 이벤트는 마우스 이벤트 개체(마우스 이벤트 개체)를 생성하고 관련 정보를 부여하여 문자열을 createEvent() 메서드에 전달하여 마우스 이벤트를 시뮬레이션할 수 있습니다. "를 사용하여 마우스 이벤트 객체를 생성한 후 iniMouseEvent() 메서드를 통해 반환된 이벤트 객체를 초기화합니다. iniMouseEvent() 메서드는 15개의 매개변수를 받습니다. 매개변수는 다음과 같습니다.
유형 문자열 유형: 이벤트 유형 'click' 과 같이 트리거됩니다.
Bubbles Boolean 유형: 이벤트가 버블링되어야 하는지 여부를 나타냅니다. 마우스 이벤트 시뮬레이션의 경우 이 값은 true로 설정되어야 합니다.
취소 가능한 bool 유형: 이벤트를 취소할 수 있는지 여부를 나타냅니다. 마우스 이벤트 시뮬레이션의 경우 이 값을 true로 설정해야 합니다.
뷰 추상 뷰: 이 값은 거의 항상 document.defaultView입니다.
세부 정보 int 유형: 일반적으로 초기화 중에 기본값은 0입니다.
ScreenX int type : 이벤트 화면 왼쪽의 X 좌표
screenY int type : 이벤트 화면 상단의 y 좌표
clientX int type : 이벤트 화면의 X 좌표 이벤트에서 보이는 영역의 왼쪽
clientY int type : 보이는 영역 위의 이벤트 거리의 y 좌표
ctrlKey Boolean type: Ctrl 키가 눌렸는지 여부를 나타내며, 기본값은 false입니다.
altKey 부울 유형: Alt 키를 눌렀는지 여부를 나타내며 기본값은 false입니다.
shiftKey 부울 유형: Shift 키를 눌렀는지 여부를 나타내며 기본값은 false입니다.
MetaKey 부울 유형: 메타 키가 눌렸는지 여부를 나타냅니다. 기본값은 false입니다.
Button int 유형: 누른 마우스 버튼을 나타냅니다. 기본값은 0입니다.
관련Target(객체): 마우스오버 및 마우스아웃을 시뮬레이션할 때만 사용됩니다.
initMouseEvent()의 매개변수가 이벤트 객체에 직접 매핑된다는 점은 주목할 가치가 있습니다. 처음 4개의 매개변수는 이벤트 객체가 전달될 때 이벤트 처리 함수에서만 사용됩니다. 매개변수로 전달() 메소드의 경우 대상 속성에 자동으로 값이 할당됩니다. 다음은 예시입니다.
var btn = document.getElementById( "myBtn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0 , 0,false , false, false, false, 0, null)
btn.dispatchEvent(event)
;
DOM이 구현된 브라우저에서는 dbclick을 포함한 다른 모든 이벤트도 동일한 방식으로 구현할 수 있습니다.
c) 키보드 이벤트 시뮬레이션
키보드 이벤트가 DOM2 수준 이벤트에서 벗어났다는 점은 주목할 가치가 있습니다. 처음에는 DOM2 수준 이벤트 초안 버전에서 키보드 이벤트가 초안의 일부로 포함되었습니다. 그러나 최종 버전에서는 FF가 초안 버전에서 키보드 이벤트를 구현했습니다. DOM3 레벨 이벤트에 구현된 키보드 이벤트가 DOM2 레벨 이벤트 초안 버전의 키보드 이벤트와 여전히 매우 다르다는 점은 주목할 가치가 있습니다.
dom3 레벨 이벤트에서 키보드 이벤트 객체를 생성하는 방법은 createEvent() 메서드를 사용하고 KeyBoardEvent 문자열을 매개변수로 전달하는 것입니다. 반환된 이벤트 객체에 대해 초기화를 위한 매개변수는 initKeyBoadEvent()입니다. 키보드 이벤트는 다음과 같습니다. 각각:
유형(문자열) - "keydown"과 같이 트리거될 이벤트 유형입니다.
버블(부울) — 이벤트가 버블되어야 하는지 여부를 나타냅니다.
취소 가능. (Boolean) — 이벤트를 취소할 수 있는지 여부를 나타냅니다.
view(AbstractView) — 이벤트가 이미지에 부여됩니다. 일반적으로 값은 다음과 같습니다.
key(string) —
위치(정수) — 누른 키의 위치 0: 기본 키보드, 왼쪽 위치 1개, 오른쪽 위치 2개, 숫자 키보드 영역 3개, 가상 키보드 영역 4개 또는 게임 컨트롤러 5개. (문자열) - 공백으로 구분된 수정자 목록입니다.
반복(정수) - 키를 연속으로 누른 횟수입니다.
DOM3 이벤트에서는 키 누르기 이벤트가 낭비되므로 주의하세요. 다음 방법을 사용하면 키보드에서 keydown 및 keyup 이벤트만 시뮬레이션할 수 있습니다.
var textbox = document.getElementById("myTextbox "), 이벤트;
if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown" , true, true, document.defaultView, "a",0, "Shift", 0)
}
textbox.dispatchEvent(event)
FF에서는 document.createEvent('KeyEvents')를 사용하여 키보드 이벤트를 생성할 수 있습니다. 초기화 방법은 initKeyEvent()입니다. 이 방법은 10개의 매개변수,
유형(문자열)을 허용합니다.
bubbles(Boolean) — 이벤트가 버블링되어야 하는지 여부를 나타냅니다.
Cancelable(Boolean) — 이벤트를 취소할 수 있는지 여부를 나타냅니다.
view(AbstractView) 이벤트는 그림에 부여됩니다. 일반적인 값은 다음과 같습니다.
ctrlKey(Boolean) — Ctrl 키를 눌렀는지 여부를 나타냅니다.
altKey(Boolean) — Alt 키를 누릅니다. 기본값은 false입니다.
shiftKey(Boolean) — Shift 키를 눌렀는지 여부를 나타냅니다.
metaKey(Boolean) — 기본값은 false입니다. 🎜> keyCode(정수) — 키에 해당하는 키 코드입니다. 기본값은 0입니다.
CharCode(정수) — 누른 키의 문자에 해당하는 ASCII 코드입니다. 키 누르기 이벤트는 0입니다.
D) 다른 이벤트 시뮬레이션
마우스 이벤트와 키보드 이벤트는 브라우저에서 가장 일반적으로 시뮬레이션되는 이벤트이지만 때로는 돌연변이 이벤트와 HTML 이벤트도 시뮬레이션해야 합니다. createEvent('MutationEvents')를 사용하여 변형 이벤트 객체를 생성할 수 있습니다. initMutationEvent()를 사용하여 이 이벤트 객체를 초기화할 수 있습니다. 매개변수에는 type, bubble, cancelable, 관련Node, prevValue,
newValue, attrName 및 attrChange가 포함됩니다. . 예 다음 방법을 사용하여 돌연변이 이벤트를 시뮬레이션합니다.
var event = document.createEvent('MutationEvents');
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","", "" ,0);
Target.dispatchEvent(event)
HTML 이벤트의 경우 코드를 직접 입력하세요.
var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false)
target.dispatchEvent(event)
변이 이벤트의 경우 애플리케이션 제한을 부과하기 때문에 브라우저에서는 거의 사용되지 않습니다.
E) 맞춤형 DOM 이벤트
DOM3 레벨 이벤트에는 맞춤형 이벤트라는 이벤트 유형이 정의되어 있습니다. 고객 이벤트는 기본적으로 DOM에 의해 트리거되지 않고 직접 제공됩니다. 자체 이벤트를 생성할 수 있는 개발자는 createEvent('CustomEvent')를 호출하고, 반환된 이벤트 객체에 대해 initCustomEvent() 메서드를 호출하고, 4가지 매개변수(type, bubble, cancelable, Detail)를 전달하여 고유한 고객 이벤트를 생성할 수 있습니다. ps: 이 부분은 제가 이해하는 데 한계가 있어서 여기서는 그냥 조언을 드리고자 합니다.
F) IE의 이벤트 시뮬레이션
IE8 및 이전 버전의 IE에서는 DOM이 이벤트를 시뮬레이션하는 방식(이벤트 객체 생성, 이벤트 정보 초기화, 이벤트 트리거)을 모방합니다. 물론 이러한 단계를 완료하는 IE의 프로세스는 다릅니다.
우선 DOM에서 이벤트 객체를 생성하는 방법과 달리 IE는 document.createEventObject() 메서드를 사용하며 매개변수가 없습니다. 다음으로 반환된 이벤트 객체에 값을 할당해야 합니다. 현재 IE는 초기화 기능을 제공하지 않습니다. 물리적 메서드를 사용하여 값을 하나씩 할당하고 마지막으로 두 개의 매개 변수인 이름을 사용하여 대상 요소에 대해 fireEvent() 메서드를 호출할 수 있습니다. 이벤트 핸들러와 생성된 이벤트 객체. fireEvent 메소드가 호출되면 이벤트 객체의 srcElement 및 type 속성이 자동으로 할당되고 나머지는 수동으로 할당해야 합니다. 다음 예를 참조하세요.
var btn = document.getElementById("myBtn");
var event = document.createEventObject();
event.screenX = 100;
event.clientX = 0; > event.clientY = 0;
event.altKey = false;
event.button = 0; "onclick" , 이벤트);
이 예에서는 이벤트 객체를 생성한 다음 일부 정보로 이벤트 객체를 초기화합니다. 이벤트 객체의 경우 이러한 속성 값은 순서가 지정되지 않습니다. 이벤트 핸들러에 해당하는 핸들러 함수만 사용하기 때문에 그다지 중요하지 않습니다. 일반 이벤트 객체는 모든 유형의 이벤트에 의해 트리거될 수 있으므로 마우스 이벤트, 키보드 이벤트 또는 기타 이벤트에 대한 이벤트 객체를 생성하는 것에는 차이가 없습니다.
Dom의 키보드 이벤트 시뮬레이션에서는 해당 이벤트 핸들러가 트리거되더라도 키 누르기 시뮬레이션 이벤트의 결과가 텍스트 상자에 문자로 표시되지 않는다는 점에 주목할 가치가 있습니다.
DOM 이벤트 시뮬레이션에 비해 저는 개인적으로 IE의 이벤트 시뮬레이션이 기억하기 쉽고 수용하기 쉽다고 생각합니다. 통합된 이벤트 모델이 어느 정도 편리함을 가져올 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
