A brief analysis of Event events in javascript-JS Tutorial-php.cn

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(){};

Copy after login

onblur: Triggered when the element loses focus:

element.onblur = function(){};

Copy after login

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;

Copy after login

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

function fn1(){ 　　
alert(event);  
}

Copy after login

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

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

Copy after login

Compatible writing:

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

Copy after login

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;

Copy after login

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);

Copy after login

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);

Copy after login

bind function

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

Copy after login

Event unbinding

● The first kind

element.onclick = null;

Copy after login

● The second kind

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

document.detachEvent(&#39;onclick&#39;,fn1);

Copy after login

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

document.removeEventListener(&#39;click&#39;,fn1,false);

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!