May 27, 2016 morning (wonderful classroom JS Basics-3 Note one (event))

first, event events1. What is an event object? 　　

　　　　　　Used to get the details of the event: mouse position, keyboard keys

--Example: Get mouse Position: ClientX

The essence of--document: Document.childnodes[0].tagname

(1) First for the Click event, if we want to open the page, click anywhere on the page will pop up a box, then what should we do?

<script type= "Text/javascript" >        window.onload=function  () {            document.  Body. onclick=function  () {                alert ("a");}            ;        }     style= "border:1px solid red;" ></body>

When this is the code above, we found that the body is shrunk to a small bar at the top of the page only click on the top of the time will be pop-up box, (under normal circumstances the body does not stand up) then we do, where is the problem? Now let's look at:

  <script type= "Text/javascript" >        window.onload=function  () {             Document.onclick=function   () {                alert ("a");            };        }     </script>
　Now we are directly to the document add event, then can be achieved no matter where the click will have a reaction, then the question is now, what is the document exactly? So let's explore it now:
A, document is the Web page; (Yes, right)
B, document is the node; reference (Childnode) returns the child nodes of an element;
<script type= "Text/javascript" >        Alert (document.childnodes[1].tagname); HTML    </script>
　　Displayed on the video is childnodes[0] "! ", and in Childnodes[1], the HTML is displayed, so the document can be called the topmost virtual parent node.
2. Event object (get mouse position)
(1) Here's how an event object is written: (click on the page and execute a function;)
<script type= "Text/javascript" >        document.onclick=function  () {            alert (  Event.clientx);        }     </script>
　In fact, the above event is an object of events, which contains the various information of the event, of which Clientx is one;
<script type= "Text/javascript" >        document.onclick=function  () {            alert ( 　　　　Event.clientx+ "," +event.clienty); Do not pop out under Firefox, there is an error!        }     </script>
　The event handler function in Firefox requires the addition of parameters;
<script type= "Text/javascript" >        document.onclick=function   (EV) {            Alert (ev.clientx+ "," +ev.clienty); EV is undefined under IE, but under Firefox there is a mouse event object;        }    </script>
　And this code under IE does not show out: therefore need to deal with compatibility;
<script type= "Text/javascript" >        document.onclick=function  (EV) {              if (EV) {                alert (ev.clientx+ "," +ev.clienty ");            }            {                alert (event.clientx+ "," + Event.clienty);}}                   </script>
　But this on my computer on the IE is still not show out? What's the reason?
　　Note: Because this time object is used too many times, if we use it every time to write so that it is too troublesome, then how to do? Next we continue to look at:
　　　Get the Event object (compatibility notation):
--var oevent=ev| | Event
　　(2) or
<script type= "Text/javascript" >        vara=12| | ' ABC ';              alert (a);     </script>
　In this way, the mouse click on the display location of the event can be used to simplify the code.
<script type= "Text/javascript" >        document.onclick=function  (EV) {            var oevent=ev| |  event;                Alert (Oevent.clientx+ "," +oevent.clienty);            }     </script>
3. Event Flow
　　　　　(1) Event bubbling
Cancel bubbling: Oevent.cancelbubble=true
Example: Imitation Select control
Dom Event Flow
　　
　　
　　　　
　　
May 27, 2016 morning (wonderful classroom JS Basics-3 Note one (event))