Appunti di studio su JavaScript: modello di gestione degli eventi

In tutti i browser ci sono quattro modelli di evento: modello di evento originale, modello di evento standard, modello di evento IE e un modello di evento Netscape4. Di seguito, esamineremo ciascuno di essi in dettaglio.

1. Attualmente ci sono quattro modelli di gestione degli eventi: modello di evento originale, modello di evento standard, modello di evento IE e un modello di evento Netscape4, che può essere trascurato

2. Il modello di gestione degli eventi può essere diviso in trattamento degli eventi di base e trattamento degli eventi avanzati, il modello di evento originale appartiene al trattamento degli eventi di base, mentre il modello di evento standard e il modello di evento IE appartengono al trattamento degli eventi avanzati

1. Trattamento degli eventi di base:

Il trattamento degli eventi di base si riferisce principalmente al trattamento degli eventi implementato dal modello di evento originale. Si suddivide principalmente in due tipi:

(1) Come proprietà degli eventi degli etichetta HTML, ad esempio <div onmouseover=”var a=1; alert();”>……</div> // In questo caso, onmouseover è solo un rappresentante e include molti altri eventi

In questo modo, il codice stringa assegnato a funzione di gestione degli eventi come onmouseover viene automaticamente impacchettato in una funzione anonima. Può includere la parola chiave this, che si riferisce a questo etichetta elemento, e la parola chiave event, che rappresenta l'oggetto dell'evento che si verifica quando l'evento accade (usato nei browser standard). Ad esempio, <div onmouseover=”f(this,event);”>……</div>

　In realtà, possiamo considerare onmouseover e altri come funzioni, che sono funzioni vuote prima di essere assegnate un codice JavaScript. Dopo averle assegnato un codice, è come aggiungere codice a una funzione vuota. Poiché onmouseover e altri sono funzioni, possiamo chiamarle esplicitamente, ad esempio element.onmouseover(), ma così non avverrà l'evento mouseover.

È possibile restituire false dalla funzione di gestione degli eventi (ad esempio onmoouseover) per prevenire l'accadimento dell'azione predefinita.

La funzione viene eseguita all'interno dell'ambito in cui è definita, quindi se assegniamo un codice JavaScript a una funzione di gestione degli eventi, è come definire una funzione all'interno dell'ambiente di questo etichetta HTML, che è un ambiente piuttosto speciale. Il suo ambito superiore non è l'ambiente globale window, ma c'è almeno un altro ambiente di ambito tra i due. Le funzioni definite all'interno di <script> hanno come ambito superiore l'ambiente window (ovviamente, i funzioni annidate sono un caso a parte). Pertanto, è meglio mettere il codice all'interno di una funzione definita in <script> e poi assegnare questa funzione alla funzione di gestione degli eventi, ad esempio <div onmouseover=“function();”>……</div>

(2)、作为javascript属性的事件处理 比如element.onmouseover=function(){……}

注意在这种方式下，不能再给事件处理函数赋值js代码串了，而是直接把函数（不是函数调用）赋给它，或者赋一个匿名函数，如 element.onmouseover=function(){……} 或 element.onmouseover=f； f为一个函数，在这里不能加上括号

基本事件处理也会以冒泡的形式向上传播

　二、高级事件处理：

高级事件处理指的是实现标准事件模型和IE事件模型的事件处理。

【概念理解】事件的传播可分为两种：一种是捕获传播，一种是冒泡传播。

捕获传播：即事件从外部传到内部，每一级都发生了该事件

冒泡传播；即事件从内部传到外部，每一级都发生了该事件，并不是所有的事件都会冒泡

（1）标准事件模型

标准事件模型既可以发生冒泡传播也可以发生捕获传播。

【Funzione di registrazione degli eventi】

addEventListener() 这个方法用于为特定元素注册事件处理程序，有三个参数，第一个参数是事件名，注意没有前缀on，第二个是处理函数（当然也可以是匿名函数），事件发生时，系统会自动将一个Event对象传递给该函数的第一个参数。最后一个参数是布尔值，如果为true，则只用于事件捕获传播阶段，如果为false则只用于事件冒泡传播阶段，一般我们把它设为false

例如：element.addEventListener(“click”,f,false) //其中f为一个函数

f函数可以这样定义：function f(e){……} //其中的参数在事件发生时就代表Event对象

高级事件处理的一个主要优势是可以为同一个元素注册多个事件处理函数，这些事件函数执行的顺序不能确定，但一般来说是按照注册的先后顺序执行，如果注册了重复的事件函数，则只有第一个会生效。

removeEventListener() 这个方法用于解除事件注册，它的三个参数与addEventListener() 相同

　(2) Modello di evento dell'IE

　Il modello di evento dell'IE supporta solo la propagazione degli eventi

【Funzione di registrazione degli eventi】

attachEvent() - Questo metodo ha due parametri, uno è il nome dell'evento, notare che ha il prefisso on, l'altro è la funzione di gestione degli eventi. Ad esempio, element.attachEvent('onclick', f)

　L'oggetto Event del modello di evento dell'IE non viene passato come parametro alla funzione di gestione degli eventi al momento dell'evento, l'oggetto Event dell'IE è un oggetto globale della finestra, che può essere acceduto solo quando si verifica un evento

Quindi la funzione f può essere definita così: function f(){var e=window.event;……} // In questo caso e ottiene l'oggetto Event

detachEvent() - Questo metodo viene utilizzato per cancellare la registrazione degli eventi, i parametri sono gli stessi di attachEvent()

　Una delle differenze principali tra addEventListener() e attachEvent() è che il riferimento this all'interno della funzione di gestione degli eventi registrata con attachEvent() si riferisce sempre all'oggetto window, mentre il riferimento this all'interno della funzione di gestione degli eventi registrata con addEventListener() si riferisce all'elemento che ha causato l'evento

　(3) Confronto tra l'oggetto Event dell'IE e del modello di evento standard

oggetto evento IE	oggetto evento IE	oggetto evento standard	oggetto evento standard
altKey	true indica che è stato premuto il tasto ALT, false indica che non è stato premuto	altKey	true indica che è stato premuto il tasto ALT, false indica che non è stato premuto
ctrlKey	true indica che è stato premuto il tasto CTRL, false indica che non è stato premuto	ctrlKey	true indica che è stato premuto il tasto CTRL, false indica che non è stato premuto
shiftKey	true indica che è stato premuto il tasto SHIFT, false indica che non è stato premuto	shiftKey	true indica che è stato premuto il tasto SHIFT, false indica che non è stato premuto
button	Evento del mouse. 0 indica che nessun pulsante è stato premuto, 1 indica che è stato premuto il pulsante sinistro, 2 indica che è stato premuto il pulsante destro, 4 indica che è stato premuto il pulsante centrale, 3 indica che sono stati premuti contemporaneamente il pulsante sinistro e il destro, 5 indica che sono stati premuti contemporaneamente il pulsante sinistro e il centrale, 6 indica che sono stati premuti contemporaneamente il pulsante destro e il centrale, 7 indica che sono stati premuti contemporaneamente il pulsante sinistro, il centrale e il destro	button	0 per il pulsante sinistro, 1 per il pulsante centrale, 2 per il pulsante destro
clientX	la coordinata X del mouse nella finestra del browser (esclusi la barra degli strumenti, le barre di scorrimento, ecc.) al momento dell'evento	clientX	la coordinata X del mouse nella finestra del browser (esclusi la barra degli strumenti, le barre di scorrimento, ecc.) al momento dell'evento
clientY	come sopra	clientY	come sopra
screenX	la coordinata X del mouse sull'intero schermo al momento dell'evento	screenX	la coordinata X del mouse sull'intero schermo al momento dell'evento
screenY	come sopra	screenY	come sopra
type	il nome dell'evento (ad esempio, click)	type	il nome dell'evento (ad esempio, click)
srcElement	elemento che ha causato l'evento	target	elemento che ha causato l'evento
keyCode	per l'evento keypress, rappresenta il carattere Unicode del pulsante, per gli eventi keydown e keyup rappresenta il codice numerico del pulsante	charCode	representa il carattere Unicode della pulsante
		keyCode	Rappresenta il codice numerico della pressione di un tasto
cancelBubble	Con valore true blocca che l'evento continui a propagarsi	stopPropagation	Puoi chiamare questo metodo per prevenire che l'evento continui a propagarsi
		cancelBubble	true indica che l'event bubble è stato annullato, false indica che non è stato
returnValue	Con valore false blocca il comportamento predefinito dell'evento	preventDefault()	Chiamare questo metodo può prevenire il comportamento predefinito dell'evento
offsetX	Ottieni l'asse X del mouse rispetto all'elemento che ha scatenato l'evento al momento dell'evento, considerando l'angolo superiore sinistro dell'elemento stesso (senza calcolare padding e margin)	layerX	Se l'elemento che ha scatenato l'evento non ha posizionamento dinamico, restituisce l'asse X del mouse rispetto al padre più vicino con posizionamento dinamico rispetto all'elemento che ha scatenato l'evento, considerando l'angolo superiore sinistro del bordo del padre come origine. 　　　　　　　 Se l'elemento che ha scatenato l'evento ha posizionamento dinamico, restituisce l'asse X del mouse rispetto all'elemento che ha scatenato l'evento, considerando l'angolo superiore sinistro del bordo dell'elemento come origine.
x	Ottieni l'asse X del padre più vicino con posizionamento dinamico rispetto all'elemento che ha scatenato l'evento, considerando l'angolo superiore sinistro del bordo del padre come origine

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。