Analysis of Event Events in javascript

This article mainly introduces (Event) Events in javascript. At the end of this article, we will introduce several cases: Box moving with the mouse; text prompt in the input box; select control imitation; message book; custom right-click menu; the keyboard controls the div movement. If you need a friend, you can see 1. Focus: When an element has focus, it can accept user input (not all elements can accept focus)

How to Set focus for the element:

1. Click

2. tab

3. js

2. (example: Text in the input box)

Onfocus: triggered when the element gets the focus:

element.onfocus = function(){};

Onblur: triggered when the element loses focus:

element.onblur = function(){};

Obj. focus () sets focus for the specified Element

Obj. blur () removes the focus of a specified element.

Obj. select () select the text content in the specified Element

3. (example: Move the square with the mouse)

Event: event object.

When an event occurs, all the information related to the event of the current object will be temporarily saved in a specified location-event object for our call as needed. It's like the black box of an airplane.

The event object must be used in the event calling function of an object.

Event function: a function called by an event. Whether a function is an event function is determined when it is called instead of being defined.

4. Compatibility

element.onclick = fn1;

IE/Chrome: event is a built-in Global Object (can be used directly)

function fn1(){ 　　alert(event);  }

Standard: The event object is passed in through the first parameter of the event function.

function fn1(ev){ 　　　　alert(ev);  }

Compatible Syntax:

function fn1(ev){ 　　　　var ev = ev || event;  }

ClientX [Y]: The distance from the mouse to the visible area of the page when an event occurs.

5. event stream (example: similar to the select Control)

● Event bubbling: When an element receives an event, it will spread the event it received to its parent level until the top-Layer window.

● Event Capture: if an element wants to receive an event, its parent element will first accept the event and then pass it to it.

Note: No event is captured in ie. In event binding, there are

6. Event binding

● First:

element.onclick = fn1;

Note: oDiv. onclick = fn1;

ODiv. onclick = fn2;

In this way, fn2 will overwrite fn1;

● Type 2:

IE: obj. attachEvent (event name, event function)

1. No capture

2. The event name is on

3. execution sequence of event functions: Standard, positive, non-standard, and reverse

4. this points to window

element.attachEvent(onclick,fn1);

Standard: obj. addEventListener (event name, event function, capture or not)

1. Capture

2. The event name is not on

3. The event execution sequence is positive.

4. this indicates the object that triggers the event.

element.addEventListener(click,fn1,false);

Bind Functions

function bind(obj,evname,fn){  if(obj.addEventListener){  obj.addEventListener(evname,fn,false);  }else{   obj.attachEvent('on' + evname,function(){    fn.call(obj);   });  } }

Unbind event

● First

element.onclick = null;

● Type 2

IE: obj. detachEvent (event name, event function );

document.detachEvent('onclick',fn1);

Standard: obj. removeEventListener (event name, event function, capture or not );

document.removeEventListener('click',fn1,false);

8. Keyboard Events (example: Message book)

● Onkeydown: triggered when the keyboard is pressed

● Onkeyup: triggered when the keyboard is lifted

● Event. keyCode: Value key value of a numeric keyboard key

CtrlKey, shiftKey, and altKey Boolean Value

When an event is triggered, if shift | ctrl | the alt key is not pressed, false is returned; otherwise, true is returned;

9. default events (for example, customizing the right-click menu and controlling the p motion on the keyboard)

● Default event behavior: What the browser will do when an event occurs.

● Prevent default events: return false;

Oncontextmenu: the context menu event is triggered when the context menu (Environment menu) is displayed.

Case:

Move the square with the mouse:

Onmouseover: triggered when the mouse moves over an element.

Note: The Trigger frequency is not a pixel, but an interval. Trigger only once at an interval, no matter how far the mouse moves

         
    Script var oDiv = document. getElementById ('p1'); document. onmouseover = function (ev) {var ev = ev | event; // If the scroll bar is rolled (the header of the page is hidden), the square is positioned on the page, the mouse is positioned in a visible area, which leads to bugs. So we need to add the scrolling distance of the scroll bar var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop; oDIv. style. top = ev. clientX + scrollTop + 'px '; oDIv. style. left = ev. clientY + 'px ';} script

Text prompt in the input box:

          Script var oText = document. getElementById ('text1'); var oBtn = document. getElementById ('btn '); oText. onfocus = function () {if (this. value = 'Enter the content') {this. value = '';} oText. onblur = function () {if (this. value = '') {this. value = 'Enter the content';} oBtn. onclick = function () {oText. select ();} script

Similar to the select control:

           
    
Ppppppppp
    
Ppppppppp
    
Ppppppppp
    
Ppppppppp
    
Ppppppppp
   Script window. onload = function () {var oBtn = document. getElementById ('btn '); var oDiv = document. getElementById ('p1'); oBtn. onclick = function (ev) {var ev = ev | event; ev. cancelBubble = true; oDiv. style. display = 'block';} document. onclick = function () {oDiv. style. display = 'none';} script

Message book:

        
 
 
    《script》   var oUl = document.getElementById('box');   var oText = document.getElementById('con');       document.onkeyup = function(ev){    var ev = ev || even;     if(ev.keyCode != ''){     if(ev.keyCode == 13){      var oLi = document.createElement('li');       oLi.innerHTML = oText.value;      if(oUl.children[0]){       oUl.insertBefore(oLi,oUl.children[0]);     }else{       oUl.appendChild(oLi);     }     }     }   } 《script》

Right-click the custom menu:

     
    《script》   var oBox = document.getElementById('box');   document.oncontextmenu = function(ev){    var ev = ev || event;    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;    oBox.style.display = 'block';    oBox.style.top = scrollTop + ev.clientY + 'px';    oBox.style.left = scrollLeft + ev.clientX + 'px';     return false;   }   document.onclick = function(){    oBox.style.display = 'none';   }  《script》

Keyboard control p motion:

   
 Script var oBox = document. getElementById ('box'); var timer = null; var oLeft = false; var oTop = false; var oRight = false; var oBottom = false; // The motion is always ready, wait for the key operation timer = setInterval (function () {if (oLeft) {oBox. style. left = oBox. offsetLeft-10 + 'px ';} else if (oTop) {oBox. style. top = oBox. offsetTop-10 + 'px ';} else if (oRight) {oBox. style. left = oBox. offsetLeft + 10 + 'px ';} else if (oBottom) {oBox. style. top = oBox. offsetTop + 10 + 'px ';} // prevent limit () ;}, 10) overflow; // press the button to start the document motion. onkeydown = function (ev) {var ev = ev | even; switch (ev. keyCode) {case 37: oLeft = true; break; case 38: oTop = true; break; case 39: oRight = true; break; case 40: oBottom = true; break;} // press the button to stop the motion document. onkeyup = function (ev) {var ev = ev | even; switch (ev. keyCode) {case 37: oLeft = false; break; case 38: oTop = false; break; case 39: oRight = false; break; case 40: oBottom = false; break ;}} function limit () {// controls the left if (oBox. offsetLeft <= 0) {oBox. style. left = 0;} // control the above if (oBox. offsetTop <= 0) {oBox. style. top = 0;} // control the if(document.doc umentElement on the right. clientWidth-oBox. offsetLeft-oBox. offsetWidth <0) {oBox. style. left = document.doc umentElement. clientWidth-oBox. offsetWidth + 'px ';} // control if(document.doc umentElement. clientHeight-oBox. offsetTop-oBox. offsetHeight <0) {oBox. style. top = document.doc umentElement. clientHeight-oBox. offsetHeight + 'px ';} script

The above is all the content of this article. I hope the content of this article will help you in your study or work. For more information, please pay attention to PHP!