Javascript events and javascript events

Javascript events and javascript events

The events in javascript have three knowledge aspects: event stream, event processing program, and event object. The following is my personal understanding of these three aspects.

First, event stream

An event stream is triggered by an event in a certain order. It has two orders: top-down and bottom-up.

Top-down events are called event capture. Event capture means that event processing starts from the root of the DOM level, rather than from the target element that triggers the event, events are passed down from all the ancestor elements of the target element. During this process, the event will be captured by each inherited element from the document root to the event Target element. If the event listener sets the useCapture attribute to true when it is registered, they can be assigned to any element during this period to handle the event; otherwise, the event will be passed to the next element on the derived element path until the target element. After the event arrives at the target element, it then bubbles through the DOM node.

Bottom-up events are called event bubbles. When an event is triggered on a DOM element, for example, a user clicks the mouse on the customer Name node, the event will follow the parent node inherited by the node to bubble through the entire DOM node hierarchy until it encounters a node attached to the Event-type processor, this event is an onclick event. You can terminate event bubbling at any time during the bubbling process. In a browser that complies with W3C standards, you can call the stopPropagation () method on the event object, in Internet Explorer, you can set the cancelBubble attribute of the event object to true. If you do not stop the event propagation, the event will always bubble through the DOM until it reaches the document root.

2. Event Processing Program

An event handler is a program that is executed after an event is captured. It has three methods.

1. html-level event handler, that is, adding the event handler directly to the html Tag. As follows:

<input type="button" value="button" onclick="alert('hello word!')" />

2. dom0-Level Event Handlers assign a function to the attributes of an event handler. The Code is as follows:

var element=document.getElementById('button');element.onclick=function(){       alert('hello word!');}

3. The dom2-level event handler registers the event handler by calling the addEventListener () method of the dom object. The addEventListener () method requires three parameters: the event name, the event handler function, and useCapture. It is of the bool type. If it is false, it is obtained by bubbling (from the inside out ), true is the capture mode (from the external to the internal ). When using the addEventListener method, note that the event name should not be prefixed with "on". The event handler added through the addEventListener method can only be deleted through removeEventListener. You can use addEventListener to add multiple identical Event Handlers for a dom and execute them in sequence. The Code is as follows:

var element=document.getElementById('button');element.addEventListener('click',function(){alert('hello jim!')},false);element.addEventListener('click',function(){alert('hello jack!')},false);

The addEventListener method is not supported on browsers that do not follow w3c annotations, such as IE8 or earlier versions of IE and operabrowsers. They use the attachEvent method when registering event handlers, delete events using detachEvent. They receive two parameters: the event name and the function for processing the event. Note that when using these two methods, the event name must be prefixed with "on", otherwise it cannot be identified.

Third, event objects. When an event on the dom is triggered, an event object is generated. It contains the event type, mouse coordinates, and so on. We can use the event object target attribute to specify the dom object that triggers the event. In IE8 and the following browsers, we need to obtain this object through the srcElement attribute. The stopPropragation method in the event object is to prevent event bubbling, And the preventDefault method is to prevent default behavior. You must set the event in IE8 and the following browsers. cancelBubble = true: prevents event bubbling and sets event. returnValue = false to prevent default behavior.

Javascript events

(1) Click Event onClick
An onClick event is generated when you click the mouse button. At the same time, the event handler or code specified by onClick will be called and executed. Usually generated in the following basic objects:
Button (button Object)
Checkbox (check box) or (check list box)
Radio (single button)
Reset buttons (important button)
Submit buttons (submit button)
For example, you can use the following buttons to activate the change () file:

<Form>
<Input type = "button" Value = "" onClick = "change ()">
</Form>

After the onClick equal sign, you can use your own functions as the event processing program, or use internal functions in JavaScript. You can also directly use JavaScript code. Example: <Input type = "button" value = "" onclick = alert ("this is an example ");

(2) onChange event
This event is triggered when the input character value of the text or texturea element is changed, and this event is also triggered when the status of an option in the select Table item changes. Example:
<Form>
<Input type = "text" name = "Test" value = "Test" onCharge = "check ('this. test)">
</Form>
(3) onSelect event
This event is triggered when the Text in the Text or Textarea object is highlighted.
(4) Get the focus event onFocus
This event is generated when you click Text, textarea, and select objects. In this case, the object becomes the foreground object.
(5) loss of focus onBlur
When a text object, textarea object, and select object no longer have the focus and return to the background, this file is triggered and corresponds to the onFocas event.
(6) load the file onLoad
This event is generated when a document is loaded. OnLoad is used to detect the cookie value when a document is loaded for the first time, and assign a value to it using a variable so that it can be used by the source code.
(7) uninstall the file onUnload
When the Web page exits, the onUnload Event is triggered and the Cookie status can be updated.

Events in javascript

Onclick is added to the button or link you write. onclick is an event, and its listening function needs to be written by itself. onclick = "defined function name"
In this way, when this button is pressed, the browser will automatically call the function pointed to by onclick