A brief analysis of Event events in javascript

1. Focus: When an element has focus, it can accept user input (not all elements can accept focus)

How to set focus to an element:

1. Click

2. tab

　3. js

2. (Example: input box prompt text)

onfocus: Triggered when the element gains focus:

element.onfocus = function(){};

onblur: Triggered when the element loses focus:

element.onblur = function(){};

obj.focus() Set focus to the specified element

obj.blur() Cancel the focus of the specified element

obj.select() Select the text content in the specified element

3. (Example: the box moves with the mouse)

event: event object.

　 When an event occurs, all information related to the event that currently occurs on this object will be temporarily saved in a designated place - the event object for us to call when needed. It's like the black box of an airplane.

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

　Event function: a function called by an event. Whether a function is an event function is not decided when it is defined but when it is called

4. Compatible with

element.onclick = fn1;

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

function fn1(){ 　　
alert(event);  
}

Under the standard: the event object is passed in through the first parameter of the event function

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

Compatible writing:

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

clientX[Y]: When an event occurs, the mouse moves to the page The distance of the visual area

5. Event flow (example: imitation select control)

　● Event bubbling: When an element receives an event, it will propagate the event it received to its parent. , all the way to the top-level window.

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

Note: There is no event capture under IE. In event binding, there are

6 under the standard, event binding

　● The first type:

element.onclick = fn1;

Note: oDiv.onclick = fn1;

　　oDiv.onclick = fn2;

　　This way fn2 will Cover fn1;

● The second type:

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

1. No capture

2. The event name is on

3. Execution order of event functions: Standard》 Forward order non-standard》Reverse order

　　4. This points to window

element.attachEvent(onclick,fn1);

Standard: obj.addEventListener (event name, event function, whether to capture)

　　1. Captured

　　2. Event name does not have on

　　3. Event The execution order is positive order

　　　4. This points to the object that triggered the event

element.addEventListener(click,fn1,false);

bind function

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

Event unbinding

● The first kind

element.onclick = null;

● The second kind

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

document.detachEvent('onclick',fn1);

Standard: obj.removeEventListener (event name, event function, whether to capture);

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

8. Keyboard events (example: guestbook)

● onkeydown: when the keyboard key is pressed Trigger

● onkeyup: Triggered when the keyboard key is lifted

● event.keyCode: The value of the numeric keyboard key

　ctrlKey, shiftKey, altKey Boolean value

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

9. Default event (example: custom right-click menu, keyboard control p movement)

　● Event default behavior: When an event occurs What the browser does by default.

● Block default events: return false;

　oncontextmenu: right-click menu event, triggered when the right-click menu (context menu) is displayed.

Case:

The square moves with the mouse:

onmouseover: Triggered when the mouse moves on an element

Note: The frequency of triggering is not pixels, but the interval. In an interval, no matter how far the mouse moves, it is only triggered once

<style>    
body{      
height: 2000px;     
}    
#p{      
width:100px;      
height: 100px;      
background:red;      
position: absolute;     
}    
</style>    
<body>     
<p id="p1"></p>    
</body>    
<script>     
var oDiv = document.getElementById(&#39;p1&#39;);     
document.onmouseover = function(ev){      
var ev = ev || event;      
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离      
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      
oDIv.style.top = ev.clientX + scrollTop + &#39;px&#39;;      
oDIv.style.left = ev.clientY + &#39;px&#39;;     
}   
</script>

Input box text prompt:

<style></style>  
<body>   
<input type="text" id="text1" value="请输入内容"/>   
<input type="button" id="btn" value="全选" />  
</body>  
<script>   
var oText = document.getElementById(&#39;text1&#39;);   
var oBtn = document.getElementById(&#39;btn&#39;);   
oText.onfocus = function(){    
if(this.value == &#39;请输入内容&#39;){     
this.value = &#39;&#39;;    
}   
}   
oText.onblur = function(){    
if(this.value == &#39;&#39;){     
this.value = &#39;请输入内容&#39;;    
}   
}   
oBtn.onclick = function(){    
oText.select();   
}  
</script>

Imitation select control:

<style>   
#p1{     
width: 100px;     
height: 200px;     
border: 1px solid red;     
display: none;    
}   
</style>   
<body>    
<input type="button" value="按钮" id="btn" />    
<p id="p1"></p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>   
</body>   
<script>   
window.onload = function(){    
var oBtn = document.getElementById(&#39;btn&#39;);     
var oDiv = document.getElementById(&#39;p1&#39;);     
oBtn.onclick = function(ev){      
var ev = ev || event;      
ev.cancelBubble = true;      
oDiv.style.display = &#39;block&#39;;     
}     
document.onclick = function(){      
oDiv.style.display = &#39;none&#39;;     
}    
}   
</script>

Guestbook:

<style></style>  
<body>   
<input type="text" id="con"/>   
<ul id="box"></ul>  
</body>  
<script>   
var oUl = document.getElementById(&#39;box&#39;);   
var oText = document.getElementById(&#39;con&#39;);       
document.onkeyup = function(ev){    
var ev = ev || even;     
if(ev.keyCode != &#39;&#39;){     
if(ev.keyCode == 13){      
var oLi = document.createElement(&#39;li&#39;);       
oLi.innerHTML = oText.value;      
if(oUl.children[0]){       
oUl.insertBefore(oLi,oUl.children[0]);     
}else{       
oUl.appendChild(oLi);     
}     
}     
}   
} 
</script>

Customized right-click menu:

<style>   
body{  
height: 2000px;  
}  
#box{    
width: 100px;    
height: 200px;    
background: red;    
display: none;    
position: absolute;;   
}  
</style>  
<body>   
<p id="box"></p>  
</body>  
<script>   
var oBox = document.getElementById(&#39;box&#39;);   
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 = &#39;block&#39;;    
oBox.style.top = scrollTop + ev.clientY + &#39;px&#39;;    
oBox.style.left = scrollLeft + ev.clientX + &#39;px&#39;;     
return false;   
}   
document.onclick = function(){    
oBox.style.display = &#39;none&#39;;   
}  
</script>

Keyboard control p movement :

<style> 
#box{   
width: 100px;   
height: 100px;   
background: red;   
position: absolute;  
} 
</style> 
<body>  
<p id="box"></p> 
</body> 
<script>  
var oBox = document.getElementById(&#39;box&#39;);  
var timer = null;  
var oLeft = false;  
var oTop = false; 
var oRight = false;  
var oBottom = false;  // 运动一直就绪，等待按键操作  
timer = setInterval(function(){   
if(oLeft){   
oBox.style.left = oBox.offsetLeft - 10 + &#39;px&#39;;   
}else if(oTop){    
oBox.style.top = oBox.offsetTop - 10 + &#39;px&#39;;   
}else if(oRight){    
oBox.style.left = oBox.offsetLeft + 10 + &#39;px&#39;;   
}else if(oBottom){    
oBox.style.top = oBox.offsetTop + 10 + &#39;px&#39;;   
}   
// 防止溢出   
limit();  
},10);   
// 按键按下，开始运动  
document.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;   
}  
}  
// 按键抬起，停止运动  
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(){   
// 控制左边   
if(oBox.offsetLeft <= 0){    
oBox.style.left = 0;   
}   
// 控制上边   
if(oBox.offsetTop <= 0){    
oBox.style.top = 0;   
}   
// 控制右边   
if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){    
oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + &#39;px&#39;;   
}   
// 控制下边   
if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){    
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + &#39;px&#39;;   
}  
} 
</script>

The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. For more related content, please pay attention to the PHP Chinese website!