이벤트는 웹페이지에서 특정 흥미로운 순간을 설명하는 데 사용됩니다. 우리 모두 알고 있듯이 이벤트는 일반적으로 사용자가 브라우저와 상호 작용할 때 발생합니다. 실제로 특정 이벤트는 브라우저를 통해 언제든지 발생할 수 있습니다. Javascript이며 이러한 이벤트는 브라우저와 관련되어 생성되는 이벤트는 동일합니다. 이는 적절한 이벤트가 발생하고 브라우저가 할당된 이벤트 핸들러를 실행한다는 것을 의미합니다. 이 기능은 웹 애플리케이션을 테스트할 때 매우 유용합니다. DOM 레벨 3 사양은 특정 이벤트를 시뮬레이션하는 방법을 제공합니다. IE9 Chrome FF Opera와 Safari는 모두 IE8과 이전 방법에서 이 방법을 지원합니다.
Javascript 이벤트 시뮬레이션
a) Dom 이벤트 시뮬레이션
문서의 createEvent() 메소드를 통해 언제든지 이벤트 객체를 생성할 수 있습니다. 이벤트 생성 객체의 이벤트 문자열 DOM2 레벨 사양에서는 모든 문자열이 복수형입니다. DOM 레벨 3 이벤트에서는 모든 문자열이 다음과 같습니다.
UIEvents: 일반 UI 이벤트, 마우스 이벤트 키보드 이벤트는 UI 이벤트에서 상속되며 UIEvent는 DOM 레벨 3에서 사용됩니다.
MouseEvents: 범용 마우스 이벤트, MouseEvent는 DOM 레벨 3에서 사용됩니다.
MutationEvents: 범용 돌연변이 이벤트인 MutationEvent는 DOM 레벨 3에서 사용됩니다.
HTMLEvents: 범용 HTML 이벤트이며 DOM3 수준에는 이에 상응하는 이벤트가 없습니다.
IE9는 DOM3 수준 키보드 이벤트를 지원하는 유일한 브라우저이지만 다른 브라우저도 키보드 이벤트를 시뮬레이션하는 데 사용할 수 있는 다른 방법을 제공합니다.
이벤트 객체가 생성되면 해당 이벤트의 관련 정보를 초기화해야 합니다. 각 이벤트 유형에는 초기화할 특정 메서드가 있습니다. 이벤트 객체가 생성된 후 해당 이벤트는 dispatchEvent() 메서드를 통해 특정 이벤트에 적용됩니다. . 이 이벤트를 지원하도록 dom 노드에 있습니다. 이 dispatchEvent() 이벤트는 사용자가 생성한 이벤트 객체인 하나의 매개 변수를 지원합니다.
관련 권장 사항: "기본 JavaScript 튜토리얼"
b) 마우스 이벤트 시뮬레이션
마우스 이벤트는 마우스 이벤트 개체(마우스 이벤트 개체)를 생성하고 관련 정보를 부여하여 마우스 이벤트를 생성하여 시뮬레이션할 수 있습니다. createEvent() 메소드에 "MouseEvents" 문자열을 전달하여 마우스 이벤트 객체를 생성한 다음 iniMouseEvent() 메소드를 통해 반환된 이벤트 객체를 초기화합니다. iniMouseEvent() 메소드는 15개의 매개변수를 허용합니다.
유형. 문자열 유형: 트리거됩니다. '클릭'과 같은 이벤트 유형입니다.
Bubbles Boolean 유형: 이벤트가 버블링되어야 하는지 여부를 나타냅니다. 마우스 이벤트 시뮬레이션의 경우 이 값은 true로 설정되어야 합니다.
Cancelable bool type: 이벤트를 취소할 수 있는지 여부를 나타냅니다. 마우스 이벤트 시뮬레이션의 경우 이 값을 true로 설정해야 합니다.
View abstract view: 이벤트에 의해 부여된 뷰입니다. 이 값은 거의 항상 document.defaultView입니다.
Detail int type: 추가 이벤트 정보는 일반적으로 초기화 중에 기본값이 0입니다.
ScreenX int 유형: 화면 왼쪽에서 이벤트 거리의 X 좌표
ScreenY int 유형: 화면 상단에서 이벤트 거리의 y 좌표
ClientX int 유형: 화면 왼쪽에서 이벤트 거리의 X 좌표 가시 영역의 왼쪽
ClientY int 유형: 가시 영역 상단으로부터의 이벤트 거리 y 좌표
ctrlKey Boolean 유형: Ctrl 키가 눌렸는지 여부를 나타내며 기본값은 false입니다.
altKey 부울 유형: Alt 키를 눌렀는지 여부를 나타내며 기본값은 false입니다.
shiftKey 부울 유형: Shift 키를 눌렀는지 여부를 나타내며 기본값은 false입니다.
MetaKey 부울 유형: 메타 키가 눌렸는지 여부를 나타냅니다. 기본값은 false입니다.
Button int 유형: 누른 마우스 버튼을 나타냅니다. 기본값은 0입니다.
관련Target(객체): 마우스오버 및 마우스아웃을 시뮬레이션하는 경우에만 사용됩니다.
initMouseEvent()의 매개변수가 이벤트 개체에 직접 매핑된다는 점은 주목할 가치가 있습니다. 처음 4개의 매개변수는 이벤트 개체가 매개변수로 전달되는 경우에만 이벤트 처리 함수를 사용합니다. dispatch() 메서드를 사용하면 대상 속성에 자동으로 값이 할당됩니다. 아래는 예시입니다.
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()입니다. 키보드 이벤트는 다음과 같습니다:
type(문자열) - "keydown"과 같이 트리거될 이벤트 유형
bubbles(Boolean) — 이벤트가 버블링되어야 하는지 여부를 나타냅니다.
cancelable(Boolean) — 이벤트가 버블링될 수 있는지 여부를 나타냅니다.
view(AbstractView) — 이벤트를 부여한 뷰입니다. 일반적인 값은 document.defaultView.
key(문자열) — 누른 키에 해당하는 코드입니다. 키 0: 기본 키보드, 왼쪽 위치 1개, 오른쪽 위치 2개, 숫자 키보드 영역 3개, 가상 키보드 영역 4개 또는 게임 컨트롤러 5개.
수정자(문자열) — 공백으로 구분된 수정자 목록
반복(정수) —
DOM3 이벤트에서는 keypress 이벤트가 낭비되므로 다음 방법에 따르면 키보드의 keydown 및 keyup 이벤트만 시뮬레이션할 수 있다는 점에 유의하세요.
var textbox = document.getElementById(“myTextbox”),event;
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); 유형(문자열) — 이벤트 유형입니다. Bubbles(Boolean) — 이벤트가 버블링되어야 하는지 여부를 나타냅니다.
Cancelable(Boolean) — 이벤트가 취소될 수 있는지 여부를 나타냅니다.
View(AbstractView) — 이벤트가 부여된 그래프입니다. 일반적인 값은 document.defaultView.
ctrlKey(Boolean) — Ctrl 키를 눌렀는지 여부를 나타냅니다. 기본값은 false입니다.
altKey(Boolean) — Alt 키를 눌렀는지 여부를 나타냅니다.
shiftKey(Boolean) ) — Shift 키를 눌렀는지 여부를 나타냅니다. 기본값은 false입니다.
metaKey(Boolean) — 메타 키를 눌렀는지 여부를 나타냅니다.
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);
var event = document.createEvent(“HTMLEvents”); event.initEvent(“focus”, true, false); target.dispatchEvent(event);
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.screenY = 0; event.clientX = 0; event.clientY = 0; event.ctrlKey = false; event.altKey = false; event.shiftKey = false; event.button = 0; btn.fireEvent(“onclick”, event);
这个例子创建了一个事件对象，之后通过一些信息初始化该事件对象，注意事件属性的赋值是无序的，对于事件对象来说这些属性值不是很重要，因为只有事件句柄对应的处理函数（event handler）会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的，因为一个通用的事件对象，可以被任何类型的事件触发。
值得注意的是，在Dom的键盘事件模拟中，对于一个keypress模拟事件的结果不会作为字符出现在textbox中，即使对应的事件处理函数已经触发。
与DOM事件模拟相比，个人觉得IE的事件模拟更容易让人记忆和接受，统一的事件模型可以带来一些便捷。
위 내용은 Javascript 이벤트 시뮬레이션에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
