English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In realtà, questo articolo è stato scritto molto tempo fa, ma a causa di un bug di salvataggio di sf, allora ho scritto un sacco, ma non è stato salvato, e ho pensato che fosse un peccato non averlo completato, oggi ho trovato del tempo libero, quindi lo ho completato, e ha anche completato la mia summa di studio su JavaScript.
Qui, discutiamo principalmente degli eventi relativi a JavaScript -
Programma di gestione degli eventi
Nel DOM sono definiti alcuni eventi, e la funzione che risponde a un evento è chiamata programma di gestione degli eventi (o ascoltatore degli eventi). Il nome del programma di gestione degli eventi di solito inizia con "on", ad esempio: onclick ecc.
Bollettazione e acquisizione degli eventi
Il flusso degli eventi si riferisce all'ordine in cui i eventi vengono ricevuti nella pagina, IE, Firefox e Chrome browser sono tutti eventi di bollettazione, il che significa che l'evento inizia con l'elemento più specifico e si propaga gradualmente verso l'elemento meno specifico. Al contrario, l'acquisizione degli eventi è stata proposta da Netscape, come mostrato di seguito:
Nonostante l'acquisizione degli eventi sia il modello di flusso degli eventi supportato unicamente da Netscape, al momento IE9, Firefox e Google Chrome supportano anche questo modello di flusso degli eventi.
I vantaggi della bollettazione degli eventi
Poiché gli eventi hanno un meccanismo di bollettazione, possiamo utilizzare il principio della bollettazione per aggiungere eventi al livello superiore e attivare l'effetto di esecuzione. Il vantaggio di questo metodo è ovviamente migliorare le prestazioni,
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
Così possiamo aggiungere eventi del mouse ai li. Ma se ci sono molti li, l'uso di un ciclo for può influenzare le prestazioni.
Poi possiamo ottenere questo effetto utilizzando il delegamento degli eventi. L'html non cambia:
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
// In qualsiasi evento, l'elemento su cui si opera è l'origine dell'evento.
// IE: window.event.srcElement
// Standard: event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
}
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
}
}
};
</script>
Allora, come si può fermare la propagazione degli eventi? Vediamo un esempio sotto:
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//After stopping the bubble event, when you click the gray box, the dialog box will pop up only once during the entire process (note the contrast with the default situation)
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
//Stop bubble event function
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>
Click the black outer effect diagram:
DOM 0 level event handler
Assigning a callback function to the event handler's attribute is usually how event handlers are specified in JavaScript. Each element has its own event handler attribute (attributes are lowercase, such as: onclick)
btn.onclick = function() {
console.log('hello');
};
The event handler specified by DOM 0 level is considered to be an element's method. Therefore, this refers to the current element:
var btn = document.getElementById('myDiv');
//The event triggered on the DOM generates an event object event
btn.onclick = function (event) {
alert(this.id); //myDiv
};
DOM level 1
DOM level 1 focuses on the HTML and XML document model. It contains document navigation and processing functions.
DOM level 1 became a W3C recommendation standard on October 1, 1998.
The second draft of the specification was on September 29, 2000.
It is worth mentioning that DOM level 0 is not a W3C specification. It is merely a definition of equivalent functionality in Netscape Navigator 3.0 and IE 3.0.
DOM level 2 event handler
DOM level 2 defines two methods for specifying and deleting event handler operations: addEventListener() and removeEventListener(), both of which accept three parameters:
1. The event name. For example, the click above
2. The function as an event handler.
3. Boolean value (true means the event handler is called in the capture phase, false means the bubble phase)
Through the addEventListener method of the Element object, you can also define the callback function for the event.
//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
}, false);
Gestori degli eventi in IE
I browser IE precedenti a IE9 non supportano addEventListener() e removeEventListener().
A differenza degli altri browser, IE utilizza i metodi attachEvent() e detachEvent() per aggiungere gestori degli eventi al DOM, poiché le versioni di IE8 e precedenti supportano solo la propagazione degli eventi, accettano solo due parametri:
1、Nome del gestore degli eventi (deve essere preceduto da on)
2、Funzione del gestore degli eventi
I gestori degli eventi aggiunti utilizzando attachEvent() sono i seguenti:
var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});
È importante notare che, nel caso di utilizzo del metodo attachEvent(), il gestore degli eventi viene eseguito nell'ambito globale, quindi in questo caso this è uguale a window
Oggetto evento
Quando si attiva un evento su un DOM, si genera un oggetto evento event, che contiene tutte le informazioni relative all'evento. Inclusi l'elemento che ha causato l'evento, il tipo dell'evento e altre informazioni specifiche dell'evento. L'oggetto event viene passato come primo argomento alla funzione di callback dell'ascoltatore degli eventi. Possiamo utilizzare l'oggetto event per ottenere molte informazioni relative all'evento corrente:
type (Stringa) — Il nome dell'evento
target (node) — Il nodo DOM di origine dell'evento
currentTarget?(node) — Il nodo DOM attuale su cui viene invocata la funzione di callback (verrà spiegato in modo più dettagliato in seguito)
bubbles (booleano) — Indica se questo evento è un evento di propagazione (verrà spiegato in seguito)
preventDefault (funzione) — Questo metodo blocca l'attivazione del comportamento predefinito dell'utente agente nel browser per l'evento corrente. Ad esempio, blocca il caricamento di una nuova pagina per l'elemento <a> durante l'evento click
cancelable (booleano) — Questa variabile indica se il comportamento predefinito dell'evento può essere bloccato chiamando event.preventDefault
stopPropagation (funzione) — Annulla la captura ulteriore o la propagazione dell'evento, usa questo metodo se bubbles è true
eventPhase: restituisce un numero che indica la fase attuale dell'evento, 0 indica che l'evento inizia a propagarsi dal livello superiore del DOM all'elemento target, 1 è la fase di cattura, 2 l'evento raggiunge l'elemento target, 3 è la fase di bollettazione.
Inoltre, l'oggetto evento potrebbe avere molte altre proprietà, ma sono tutte specifiche per l'evento.
Inoltre, il metodo stopPropagation() viene utilizzato per fermare immediatamente la propagazione dell'evento nel DOM, ovvero annullare ulteriori eventi di bollettazione o cattura.
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("clicked");
event.stopPropagation();
};
// Evitare di scatenare il gestore di eventi sul document.body
document.body.onclick = function (event) {
alert("Body clicked");
};
L'oggetto event esiste solo durante l'esecuzione del gestore di eventi, una volta completata l'esecuzione del gestore di eventi, l'oggetto event viene automaticamente distrutto.
Oggetto evento di IE
Quando si aggiunge un gestore di eventi al livello 0 del DOM, l'oggetto event esiste come proprietà dell'oggetto window:
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type); // click
};
L'oggetto event di IE contiene anche proprietà e metodi relativi all'evento che lo ha creato.
cancleBubble: booleano, il valore predefinito è false, ma può essere impostato su true per annullare la propagazione dell'evento, come il metodo stopPropagation() nel dom.
returnValue: booleano, il valore predefinito è true, quando impostato su false viene utilizzato per annullare il comportamento predefinito dell'evento, come preventDefault() nel dom.
srcElement: elemento, l'elemento obiettivo dell'evento, lo stesso della proprietà target nel dom.
type: stringa, il tipo di evento scatenato.
Evento click
Dopo che l'utente ha cliccato, l'oggetto event contiene le seguenti proprietà.
pageX, pageY: le coordinate del punto di clicco rispetto all'elemento html, in unità di pixel.
clientX, clientY: le coordinate del punto di clicco rispetto al viewport (viewport), in unità di pixel.
screenX, screenY: le coordinate del punto di clic rispetto allo schermo di visualizzazione del dispositivo, in unità di pixel dell'hardware del dispositivo
clientX, clientY
Illustrazione: clientX e clientY, i loro valori rappresentano le coordinate orizzontali e verticali del puntatore del mouse nel viewport all'atto dell'evento (non includono l'area della barra di scorrimento)
Posizione
È possibile ottenere la posizione di un elemento utilizzando le seguenti 4 proprietà.
(1) offsetHeight: la dimensione in pixel dell'elemento in direzione verticale. Include l'altezza dell'elemento, l'altezza della barra di scorrimento orizzontale visibile, l'altezza del bordo superiore e l'altezza del bordo inferiore.
(2) offsetWidth: la dimensione in pixel dell'elemento in direzione orizzontale. Include la larghezza dell'elemento, la larghezza della barra di scorrimento verticale visibile, la larghezza del bordo sinistro e la larghezza del bordo destro.
(3) offsetLeft: la distanza in pixel tra il lato sinistro della parte esterna sinistra dell'elemento e il lato sinistro della parte interna sinistra dell'elemento contenente.
(4) offsetTop: la distanza in pixel tra l'alto della parte esterna superiore dell'elemento e l'alto della parte interna superiore dell'elemento contenente.
pageX, pageY
Queste due proprietà rappresentano la posizione del cursore del mouse nella pagina, senza scorrimento della pagina, i valori di pageX, pageY sono uguali ai valori di clientX, clientY
Dimensioni di scorrimento
Le dimensioni di scorrimento si riferiscono alle dimensioni dell'elemento che contiene il contenuto di scorrimento.
Di seguito ci sono 4 proprietà relative alle dimensioni di scorrimento.
(1) scrollHeight: l'altezza totale del contenuto dell'elemento senza barra di scorrimento.
(2) scrollWidth: la larghezza totale del contenuto dell'elemento senza barra di scorrimento.
(3) scrollLeft: numero di pixel nascosti a sinistra dell'area di contenuto. Impostando questa proprietà è possibile modificare la posizione di scorrimento dell'elemento.
(4) scrollTop: numero di pixel nascosti sopra l'area di contenuto. Impostando questa proprietà è possibile modificare la posizione di scorrimento dell'elemento.
Eventi di fuoco
Gli eventi di fuoco si verificano quando un elemento della pagina ottiene o perde il fuoco, ci sono 4 eventi di fuoco:
1.blur: si verifica quando un elemento perde il fuoco. Questo evento non esplosione
2.focus: si verifica quando un elemento ottiene il fuoco. Non esplosione
3.focusin: si verifica quando un elemento ottiene il fuoco, esplosione
4.focusout: si verifica quando un elemento perde il fuoco, esplosione
Eventi di mouse
DOM 3 livello definisce 9 eventi di mouse:
click: si verifica quando l'utente fa clic con il pulsante principale del mouse o preme il tasto Invio. Di solito si riferisce al pulsante sinistro del mouse o al tasto Invio.
dbclick: si verifica quando l'utente fa doppio clic sul mouse
mousedown: si verifica quando l'utente preme qualsiasi pulsante del mouse, questo evento non può essere scatenato da eventi di tastiera.
mousemove: si verifica quando il mouse si muove intorno a un elemento, questo evento non può essere scatenato da eventi di tastiera.
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能通过键盘触发。
mouseenter：类似于“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似于“mouseout”，但不冒泡。在元素上方不触发。
mouseup：当用户释放鼠标按键时触发，不能通过键盘触发。
传递给鼠标事件处理程序的事件对象有clientX和clientY属性，它们指定了鼠标指针相对于包含窗口的坐标。加上窗口的滚动偏移量，就可以把鼠标位置转换成文档坐标。
页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave外，所有的事件都冒泡，并且它们的默认行为是可以被取消的。但取消鼠标事件的默认行为可能会影响到其他事件，因为有些鼠标事件是相互依赖的。
拖动事件
(1) drag事件
drag事件在源对象被拖动过程中触发。
(2) dragstart，dragend事件
dragstart事件在用户开始用鼠标拖动某个对象时触发，dragend事件在结束拖动时触发。
(3) dragenter，dragleave事件
dragenter事件在源对象拖进目标对象后，在目标对象上触发。dragleave事件在源对象离开目标对象后，在目标对象上触发。
(4) dragover事件
dragover事件在源对象拖动过另一个对象上方时，在后者上触发。
(5) drop事件
当源对象被拖放到目标对象上方，用户松开鼠标时，在目标对象上触发drop事件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。