Eine kurze Analyse von Event-Ereignissen in Javascript

1. Fokus: Wenn ein Element den Fokus hat, kann es Benutzereingaben akzeptieren (nicht alle Elemente können den Fokus akzeptieren)

So legen Sie den Fokus auf ein Element fest:

1. Klicken Sie auf

2. Tab

3. js

2. (Beispiel: Eingabeaufforderungstext im Eingabefeld)

onfocus: Wird ausgelöst, wenn das Element den Fokus erhält:

element.onfocus = function(){};

onblur: Wird ausgelöst, wenn das Element den Fokus verliert:

element.onblur = function(){};

obj.focus() Setzt den Fokus auf das angegebene Element

obj.blur() hebt den Fokus des angegebenen Elements auf

obj.select() wählt den Textinhalt im angegebenen Element aus

3 , ( Beispiel: Das Quadrat bewegt sich mit der Maus)

Ereignis: Ereignisobjekt.

Wenn ein Ereignis eintritt, werden alle Informationen im Zusammenhang mit dem Ereignis, das derzeit in diesem Objekt auftritt, vorübergehend an einem bestimmten Ort gespeichert – dem Ereignisobjekt, das wir bei Bedarf aufrufen können. Es ist wie die Blackbox eines Flugzeugs.

Das Ereignisobjekt muss in der Ereignisaufruffunktion eines Objekts verwendet werden, um Inhalt zu haben.

Ereignisfunktion: Eine von einem Ereignis aufgerufene Funktion wird nicht bei der Definition, sondern beim Aufruf entschieden.

4. Kompatibilität

element.onclick = fn1;

IE/Chrome-Browser: Ereignis ist ein integriertes globales Objekt (kann direkt verwendet werden)

function fn1(){ 　　
alert(event);  
}

Unter dem Standard: Das Ereignisobjekt ist das Erster Parameter, der über die Ereignisfunktion übergeben wird. Übergeben

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

Kompatible Schreibweise:

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

clientX[Y]: Wenn ein Ereignis auftritt, der Abstand von der Maus zum sichtbaren Bereich von ​​die Seite

5. Ereignisfluss (Beispiel: Nachahmung der Auswahlsteuerung)

　● Ereignissprudeln: Wenn ein Element ein Ereignis empfängt, wird es weitergegeben das empfangene Ereignis an sein übergeordnetes Fenster weiter, bis hin zum Fenster der obersten Ebene.

● Ereigniserfassung: Wenn ein Element ein Ereignis empfangen möchte, empfängt sein übergeordnetes Element zuerst das Ereignis und übergibt es dann an dieses.

Hinweis: Im IE gibt es keine Ereigniserfassung. Bei der Ereignisbindung umfassen die Standards

6. Ereignisbindung

　● Erster Typ:

element.onclick = fn1;

Hinweis:oDiv.onclick = fn1;

　oDiv.onclick = fn2;

　Auf diese Weise überdeckt fn2 fn1;

● Der zweite Typ:

IE: obj.attachEvent (Ereignisname, Ereignisfunktion)

1. Keine Erfassung

2. Der Ereignisname ist aktiviert

3. Ausführungsreihenfolge der Ereignisfunktionen: Standard > Vorwärtsreihenfolge Nicht- Standard》Umgekehrte Reihenfolge

　4. Dies zeigt auf Fenster

element.attachEvent(onclick,fn1);

Standard: obj.addEventListener (Ereignisname, Ereignisfunktion, ob erfasst werden soll)

　1. Erfassen

2. Der Ereignisname hat kein on

3. Die Ausführungsreihenfolge der Ereignisse ist positive Reihenfolge

4. Dies zeigt auf das Objekt, das das Ereignis ausgelöst hat

element.addEventListener(click,fn1,false);

Bind-Funktion

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

Ereignis-Entbindung

● Der erste Typ

element.onclick = null;

● Der zweite Typ

IE:obj.detachEvent(Ereignisname, Ereignisfunktion);

document.detachEvent('onclick',fn1);

Standard: obj.removeEventListener (Ereignisname, Ereignisfunktion, ob erfasst werden soll);

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

8. Tastaturereignisse (Beispiel: Gästebuch)

● onkeydown: Wird ausgelöst, wenn die Tastaturtaste gedrückt wird

● onkeyup: Wird ausgelöst, wenn die Tastaturtaste angehoben wird

● event.keyCode: Numerischer Tastaturschlüssel Wert Schlüsselwert

StrgTaste, Umschalttaste, AltTaste Boolescher Wert

Wenn ein Ereignis ausgelöst wird und die Umschalttaste || nicht gedrückt wird, wird andernfalls „false“ zurückgegeben return true;

9. Standardereignisse (Beispiele: benutzerdefiniertes Rechtsklick-Menü, Tastatursteuerung p-Bewegung)

　● Ereignis-Standardverhalten: Was der Browser standardmäßig tun wird, wenn ein Ereignis auftritt.

● Standardereignis blockieren: false zurückgeben;

oncontextmenu: Rechtsklick-Menüereignis, ausgelöst, wenn das Rechtsklick-Menü (Kontextmenü) angezeigt wird.

Fall:

Das Quadrat bewegt sich mit der Maus:

onmouseover: Wird ausgelöst, wenn sich die Maus über ein Element bewegt

Hinweis: Die Häufigkeit der Auslösung beträgt nicht pixels , sondern das Intervall. Nur einmal innerhalb eines Intervalls auslösen, egal wie weit sich die Maus bewegt

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

Texteingabeaufforderung im Eingabefeld:

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

Imitationsauswahlsteuerung:

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

Gästebuch :

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

Benutzerdefiniertes Rechtsklick-Menü:

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

Tastatursteuerung p Bewegung:

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

Das Obige ist der gesamte Inhalt dieses Artikels I Ich hoffe, dass dieser Artikel hilfreich für das Studium oder die Arbeit aller ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.