Mock event and custom event instance analysis in JavaScript

This article illustrates mock events and custom events in JavaScript. To share for your reference, the details are as follows:

The five ways in JavaScript to specify handlers for events and JavaScript's event object event were described earlier.

Mock events and custom events in JavaScript are described below.

1. Event simulation in DOM

1) Event simulation in DOM has the following three steps:

Step 1: Create the event object event

Can be used on document objects createEvent() Method creates the event object, which takes one argument, a string of the event type to be created. In DOM2 these strings are plural and in DOM3 they are singular. The string can be one of the following:

UIEvents: 1 common UI event, mouse event and keyboard event are inherited from UI event, DOM3 is UIEvent;

MouseEvents: 1 general mouse event, MouseEvent in DOM3;

MutationEvents: 1 generic DOM change event, DOM3 is MutationEvent;

HTMLEvents: 1 General HTML events, no corresponding DOM3 level events, are scattered into other categories.

Step 2: Initialize the event object

Each type of event object has a special method that initializes the event object by passing in the appropriate data. The names of the different types of methods are also different, depending on the type createEvent() The parameters used in.

Step 3: Trigger the event

use dispatch() Method, which takes one argument, the event object to trigger the event.

2) Simulate mouse events:

use createEvent() Method creates an event object, passing in the string "MouseEvents", and returning an object with a name initMouseEvent() Method to specify information about the mouse event.

Simulate button click events:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
btn.dispatchEvent(event);

3) Simulate keyboard events:

use createEvent() Method creates an event object, passes in the string "KeyboardEvent", and returns an object named "KeyboardEvent" initKeyboardEvent() Methods.

The DOM2 event did not specify keyboard events, and later DOM3 events officially defined it as an event. IE9 is currently the only 1 browser that supports DOM3 level keyboard events, but other browsers can also emulate keyboard events.

In the use of createEvent() Method, you need to check that the browser supports DOM3 level events.

Simulate holding down Shift while pressing the A key:

var text = document.getElementsByTagNames("input")[0];
if (document.implementation.hasFeature("KeyboardEvents", 3.0) {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
text.dispatchEvent(event);

4) Simulate other events:

Simulation of change events:

use createEvent() Method creates an event object, passes in the string "MutationEvents", and returns an object named MutationEvents initMutationEvent() Methods.

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "", "", "", 0);
target.dispatchEvent(event);

Simulate HTML events:

use createEvent() Method creates an event object, passing in the string "HTMLEvents", and returning an object named HTMLEvents initMutationEvent() Methods.

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

5) Custom DOM event:

DOM3 also defines custom events. Custom events are not triggered by DOM natively and are intended to allow developers to create their own events.

Create custom events that can be used createEvent("CustomEvent") Method that returns an object with a name initCustomEvent() , which receives the following four parameters:

type (string) : event type;

bubbles (Boolean) : Whether the time should bubble;

cancelable (Boolean) : indicates whether the event can be cancelled;

detail (object) : Any value, stored in the detail property of the event object.

var div = document.getElementsByTagNames("div")[0];
EventUtil.addHandler(div, "myEvent", function(event) {
  alert("div : " + event.detail);
});
EventUtil.addHandler(document, "myEvent", function(event) {
  alert("document : " + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", 3.0) {
  var event = document.createEvent("CustomEvent");
  event.initCustomEvent("myEvent", true, false, "Hello world");
}
div.dispatchEvent(event);

Click div to output:

[

div: Hello world
document: Hello world

]

Click document to output:

[

document: Hello world

]

2. Event simulation in IE

The event simulation in IE has the following three steps:

(1) using document.createEventObject() Method creates an event object in IE. Unlike DOM, this method takes no arguments and returns a generic event object as a result.

Manually add all the necessary information for the event object. There is no way to assist the addition.

(3) use on target fireEvent() Method, which takes two parameters: the name of the event handler and the event object. In the call fireEvent() Methods, the srcElement and type attributes are automatically added to the event object, and other attributes must be added manually.

In IE, the simulation of any event follows the same pattern.

Simulated click event:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEventObject();
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.button = 0;
btn.fireEvent("onclick", event);

Simulate keypress events:

var text = document.getElementsByTagNames("input")[0];
var event = document.createEventObject();
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.keyCode = 65;
btn.fireEvent("onkeypress", event);

PS: about javascript event that refer to this site javascript events and function description: http: / / tools ofstack. com/table/javascript_event

More about JavaScript related topics: interested readers to view this site operation and skills of the related events JavaScript, JavaScript page elements skills summary, JavaScript DOM operation skills summary, JavaScript lookup algorithm skills summary, JavaScript data structure and algorithm skills summary, JavaScript times calendar calculation method and skills summary and "JavaScript error and debugging skills summary"

I hope this article has been helpful in JavaScript programming.