Event Events Detailed

First of all, we must first understand the event, and we must first understand the focus and what is the focus. Focus: Enables the browser to distinguish between objects entered by the user, and when an element has the focus, he can receive input from the user.

We can set the focus for the element in some way. Instead of all elements being able to receive focus, the elements that respond to the user's actions have the focus. For example:

<input type="text" />   <a href="http://www.baidu.com  "> Baidu </a>

When it comes to input, it usually uses more onfocus: When the element gets to the focus, the onblur: triggers when the element loses focus. And of course it's not used: Obj.select ()-Select the text content within the specified element.

　　

// When you click Btn, select the content in text  = function () {            otext. Select ();        }

Then there is the event object, and when an event occurs, some detailed information about the event that occurs with the current object is temporarily saved to a specified place-event object for the call we need. And just said, the event will save the relevant information, such as for the mouse position, keyboard keys. Event object compatibility: EV = EV | | Window.event. And then there is clientx[y], it is--when an event occurs, the distance of the mouse to the visual area of the page. We can view the properties in the event object through a piece of code.

function fn1 (EV) {        varevent;      for var inch ev) {         "+ ev[attr]);    }     = FN1;    

All related properties of the event object are printed on the console.

A small demo that is extended by the event is a div that can be moved with the mouse.

See: Any div that moves with the mouse

The code is as follows:

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Untitled Document </title><style>#div1 {width:100px; height:100px; background:red; position:absolute;}</style><script>window.onload=function () {//onmousemove: Triggers when the mouse moves over an element//The trigger frequency is not the pixel, but the interval time, within a specified time (very short), if the position of the mouse and the last position has changed, then it will trigger a        vari =0; varOdiv = document.getElementById ('Div1'); Document.onmousemove=function (EV) {//document.title = i++;                varEV = EV | |Event; varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; ODiv.style.left= Ev.clientx +'px'; ODiv.style.top= Ev.clienty + scrolltop +'px'; }    }</script>"height:2000px;"> <div id="Div1"></div></body>
When it comes to events, it's important to think of events bubbling: When an element receives an event, it propagates all of his received to his parent, always to the top window. event bubbling mechanism. Instead of bubbling: call event.cancelbubble = True in the event function that is currently blocking bubbling; The simpler one is the drop-down list of the simulation.
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Untitled Document </title><style>#div1 {width:100px; height:200px; border:1px solid red; display:none;}</style><script>window.onload=function () {varOBTN = document.getElementById ('btn'); varOdiv = document.getElementById ('Div1'); Obtn.onclick=function (EV) {varEV = EV | |Event; Ev.cancelbubble=true;//blocks the current event bubbling of the current objectODiv.style.display='Block'; } Document.onclick=function () {ODiv.style.display='None'; }    }</script>"Button"Value="Button"Id="btn"/> <div id="Div1"></div></body>
　　　　　　　　
　　
Event Events Detailed