3.1. How events occur*
In the first case, the user does certain operations on the web page, such as clicking a button to generate a click event. In the second case, if the user has not operated on the web page, an event may also occur. For example, the browser has loaded the entire page, which will generate a load completion event. After the event is generated, the browser will look for whether the node that generated the event has bound the corresponding event processing code. If so, the code is called to handle it. If not, the parent node will continue to be searched upwards, and there is no corresponding event processing code (event bubbles).
3.2. Binding event processing code**
1) Bind event processing code to the html tag
For example: <a id="a1" href="" onclick="f1();">click</a>
2) Bind event processing code to the dom node
var obj = document.getElementById('a1'); obj.onclick=f1;
Notice:
a. Do not add "()" to f1. Adding "()" means that f1 is executed immediately.
b. Anonymous function row binding can be used.
That is: obj.onclick=function(){ //Code. }
c. Binding event processing code to the dom node can completely separate the js code without HTML, which is convenient for code maintenance.
d. If you want to pass parameters to the bound function. Anonymous functions can be solved.
That is: obj.onclick=function(){ f(parameter); }
3) Use the browser's own binding method (understand)
Different browsers have their own unique binding methods, and because they are incompatible, try to use them as little as possible.
Script scripts can be written in <body>
Equivalent to the following figure
What if parameters are passed? Use anonymous functions
[Case 3.1] Binding event processing code to top html tag**
3.3. Event Object***
1) Obtain the event object
IE browser: You can directly use event to obtain
firefox: You must add a parameter event to the method
Generally, in order to be compatible with ie and firefox, add a parameter event to the method.
2) The role of event objects
a. Obtain the coordinates of the mouse click
event.clientX event.clientY
b. Obtain the event source (the object that generated the event)
firefox: event.target gets IE browser: event.srcElement gets
3.4. Event Bubble**
1) What is event bubble? When an event is generated by a node, the event will be uploaded upwards in turn (first to the parent node, if the parent node has a parent node, then upload it upwards).
2) How to prohibit bubbles? event.cancelBubble = true;
2) The "Event Bubble" phenomenon closes the dialog box "You clicked on a link", and continues to pop up the dialog box "You clicked on a div"
【Case 3.4】Event Object**
<html>
<!--Event Object-->
--------------------------------------------------------------------------------------------------------------------------------
js uses event-driven to respond to user operations.
For example, the operation performed on a browser window or web page element (button, text box...) through the mouse or key is called an event (Event).
The actions of a series of programs triggered by the mouse or hotkey are called event-Driver.
A handler or function is used to handle events, which we call an event handler (Event Handler).
--------------------------------------------------------------------------------------------------------------------------------
Browser compatibility processing
<script language="javascript"><!-- if(window.XMLHttpRequest){ //Mozilla, Safari, IE7,IE8 if(!window.ActiveXObject){ //Mozilla, Safari, alert('Mozilla, Safari'); }else{ alert('IE7 .8'); } }else { alert('IE6'); } //--></script>-------------------------------------------------------------------------------to be continued
An event requires multiple methods, you can use it and separate it.
<input type="button" value="red" onclick="mychange(this),sayHello()"/>
<body onkeydown="showkey(event)" onload="abc()" onunload="abc2()">
The above article on the browser compatibility method of the js event-driven mechanism is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.