How to use events in HTML

Events are often triggered by customer operations or browser functions. Specific events can also be triggered at any time using JS. This time I will tell you about the commonly used event ideas in HTML

Event simulation in DOM

Use the creatEvent() method on the document object to create an event object. The parameter is a string of the event type to be created.

DOM2: All strings use the English plural form DOM3: Singular UIEvents: UI events (mouse events and keyboard events are inherited from UI events) MouseEvents: mouse events MutationEvents: DOM change events HTMLEvents: HTML event usage and events Information about its initialization triggers events. Use the dispatchEvent() method, and the parameter is the event object that triggered the event. All DOM nodes that support events support this method

Simulate mouse events

The object returned after creating the object has an initMouseEvent() method, Used to specify information related to this mouse event. This method receives 15 parameters, which correspond to each typical attribute in the mouse event.

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);

Simulating keyboard events

The object returned after creating the object has an initKeyEvent() method. DOM3 stipulates that a keyboard event can be created by calling createEvent("keyboardEvent"). In Firefox, call createEvent("keyEvents")

In other browsers, you need to create a general event, and then add keyboard event-specific information to the event object.

var event=document.createEvent("Events");
event.initEvent(type,bubbles,cancelable);
event.view=document.defaultView;
...
textbox.dispatchEvent(event);

Custom DOM events

Custom events are not triggered natively by the DOM. Its purpose is to allow developers to create their own events. To create a new custom event, you can call createEvent("CustomEvent"). The returned object has an initCustomEvent() method.

Time simulation in ie

Idea: Create the event object first, then point to the corresponding information, and then trigger the creation: document.createEventObject(), which does not receive parameters, and the result will return a Generic event object. Add all information manually. Call the fireEvent() method on the target. Parameters: Event processingProgram name and event object, srcElement and type attributes will be automatically added to the event object

I believe you have mastered the method after reading these cases, please pay attention to php Chinese for more exciting information Other related articles online!

Related reading:

Detailed introduction to HTML5 tag nesting rules

Detailed introduction to the FormData object in HTML

Detailed graphic and text explanation of postMessage API in H5

The above is the detailed content of How to use events in HTML. For more information, please follow other related articles on the PHP Chinese website!