1. ¿Cómo se unen controlador de eventos : 3 Zhong :
(1). En el HTML etiqueta de inicio elemento de unión
Html en : < elemento en el nombre del evento = " JS comunicado ">
Js en : función de controlador de eventos () {
...
}
Pregunta : no es fácil de mantener, no cumple con el principio de separación de contenido y el comportamiento
. (2) en js a modo de asignación de unión :
Elemento objetos .En el nombre del evento = function () {
... this-> está actualmente evento desencadenante elemento de objeto ...
}
Problema : Un atributo caso de un elemento sólo puede enlazar un controlador!
. (3) la adición de un detector de eventos objetos maneras :
a. elemento de objeto .addEventListener ( " nombre del evento " controlador de eventos )
La adición de un objetos de eventos oyente
. B principio :
. C Retire eventos Los detectores de objetos :
1). Elementos .removeEventListener ( " nombre del evento ", el controlador de originales )
Extracción de eventos oyentes objetos
2). Los resultados : para encontrar un objeto detector detector de eventos de cola se elimina completamente coherente!
Plenamente coherente : los mismos elementos, el mismo nombre del evento, objetos de controlador tienen el mismo ( un objeto de función con )
3). Pregunta : exactamente como si sólo el manejador escrito y vinculante, no son capaces de eliminar el controlador original,
. 4) La razón : Al retirar , requiere el uso de la dirección de la función y la dirección de función debe ser utilizado cuando se une exactamente de la misma , que es un objeto de función debe ser la misma , se puede retirar
5) resolver : el futuro si una función puede ser retirado en el momento de la unión, no se puede utilizar una función anónima, la función debe tener un nombre!
1. DOM modelo de eventos estándar : Cuando se produce un evento , de hecho, pasan por tres etapas !
(1). Exterior al interior de la captura de la etapa : a partir dom inicio nodo raíz, haga clic en el elemento de la posición actual, a través y registrar el controlador de eventos ligado al elemento primario actual en todos los niveles . Sin embargo, el único registro, no se disparará!
. (2) etapa de disparo objetivo : prioridad de disparo controladores de eventos en los elementos del punto actual
Elementos de destino : (destino) Elementos de hecho quieren hacer clic que desencadenó el evento
(3) que burbujea la fase de aplicación : de acuerdo con el orden de procesamiento de la función de la fase de captura de los niveles de registro de elementos de matriz, en el elemento inverso hacia el exterior de los padres dentro de los niveles de activación de eventos.
2. El objeto de evento :
. (1) ¿Cuál es el objeto de evento : Cuando se produce un evento , el navegador crea automáticamente , guardar la información del evento objeto. También proporciona la funcionalidad para cambiar las características del evento predeterminado
. (2) Cuando usar : en el futuro, siempre y cuando la información de eventos deseo, evento o cambiar las características predeterminadas, sólo puede utilizar el objeto de evento
. (3) Cómo obtener el objeto de evento :
a. no tenga que crear , pero tienen sus propias maneras de conseguir a su uso!
. B Obtiene un objeto de evento : el objeto de evento defecto siempre estará en el primer valor de argumento como un controlador de eventos se pasa automáticamente
Por lo tanto, siempre que el controlador de eventos para definir un parámetro, el objeto de evento a la captura
// crea automáticamente cuando un evento desencadenante de eventos objetos
↓
Elemento .en nombre del evento = función (E) {
e = de eventos objetos
}
Enfatizó : cada vez que desee utilizar el objeto de evento de correo , debe añadirse al controlador de eventos primer parámetro correo
(4). ¿Puede usted hacer ?
. Un burbujeo parada :
1). e.stopPropagation ()
Detener la propagación ; outdiffusion
2) características : no se detenga la ejecución del manejador de evento actual de elemento, sino para evitar la ejecución del controlador de eventos del elemento padre!
3). Ejemplo : cesó la efervescencia
| <Head> <Título> Procesamiento de Eventos </ title> <Meta charset = "UTF-8" /> <Style> # # D1 d2 d3 # {cursor: puntero} {# D1
position: relative; anchura: 150 píxeles; altura: 150 píxeles; text-align: center; Cursor: puntero; } # D2 {
position: absolute; top: 25px; la izquierda: 25px; anchura: 100px; altura: 100px; } # D3 {
position: absolute; top: 25px; la izquierda: 25px; anchura: 50px; altura: 50px; line-height: 50px; } </ Style> </ Head> <Body> <Div id = "d1"> <Div id = "D2"> <Div id = "d3"> </ Div> </ Div> </ Div> <Script> // tres en exteriores div son evento click cota // esperanza de que el punto que, solamente la persona que llama a sí mismo daño! var d1=document.getElementById("d1"); var d2=document.getElementById("d2"); var d3=document.getElementById("d3");
d1.onclick=function(){ alert(`${this.id} 疼!`) } d2.onclick=function(e){ e.stopPropagation(); //不阻止d2的onclick，而是阻止d1的onclick alert(`${this.id} 疼!`) } d3.onclick=function(e){ e.stopPropagation(); alert(`${this.id} 疼!`) } </script> </body>
|
b. 利用冒泡/事件委托/事件代理 event delegate
委托 代理
1). 问题: 浏览器触发事件处理函数是用遍历事件监听对象队列的方式来找到符合条件的事件监听对象，执行其中的处理函数。如果队列中被添加的事件监听对象的个数过多，遍历就会慢！事件响应的速度慢！
2). 优化: 尽量减少事件绑定或事件监听对象的个数！
3). 何时: 只要一个父元素下的多个平级子元素都需要绑定同一个事件时，都必须用事件委托优化！
4). 如何: 只要将事件只绑定在公共的父元素上一份即可！所有子元素，都可通过冒泡这个机制，冒泡到父元素上执行事件处理函数!
5). 两个难题:
i. this无法获得目标元素了:
①原因: 事件绑定在父元素上，所以this指父元素，不再指当前点击的目标元素了！因为事件处理函数在哪个元素上执行，this就指谁！
②解决: 其实事件对象e中始终保存着一个属性e.target，保存着最初触发事件的那个目标元素！e.target不会随冒泡而改变自己的初心——一旦拥有别无所求！
③结论: 今后只要使用事件委托，都用e.target代替this来获得目标元素
ii. 点父元素下其余子元素或点父元素本身也会触发事件:
①解决: 今后只要使用事件委托，都要先判断当前点击的目标元素是不是想要的！只有当前单击的目标元素e.target是想要的那种元素，才执行后续操作。否则，就什么也不干
c. 阻止元素自带的默认行为:
1). 有些HTML元素上自带一些默认行为:
i. <a href="#"></a> 当点击a时，会自动在地址栏末尾加#
ii. <form>元素中的<input type="submit">和<button>点击后，默认会自动提交表单！
2). 何时阻止默认行为: 只要元素自带的这些自动的默认行为不是我们想要的！都可以阻止！——就像什么都没有发生一样
3). 如何: e.preventDefault();
阻止 默认
4). 但是: 以上两种情况其实可以规避，换成没有默认行为的元素或写法即可
i. <a href="javascript:;">
ii. <input type="button">
5). 示例: 阻止a元素和提交按钮的默认行为:
| <body> <a id="a1" href="#">click me</a> <a id="a1" href="javascript:;">click me</a> <form> <input name="uname"><input id="btn1" type="submit"> <input type="button"> </form> <script> //想阻止a的默认行为，而执行我们自己的操作 var a1=document.getElementById("a1"); a1.onclick=function(e){ e.preventDefault(); alert(`a1 疼！`); } var btn1=document.getElementById("btn1"); btn1.onclick=function(e){ e.preventDefault(); alert("btn1 疼！"); } </script> </body>
|
d. 鼠标坐标:
1). 当鼠标点击或移动时，触发事件，在事件对象中都会保存鼠标当前所在位置的x、y坐标
2). 其实这个坐标有三组:
i. 当前鼠标位置相对于整个显示屏左上角坐标
e.screenX e.screenY
ii. 当前鼠标位置相对于文档显示区左上角坐标
e.clientX e.clientY
客户端
iii. 当前鼠标位置相对于当前点击的元素左上角坐标
e.offsetX e.offsetY
偏移量