Directorio de artículos
el código
// 在网页加载完成后运行代码
document.addEventListener("DOMContentLoaded", () => {
// 监听按键按下事件
document.addEventListener("keydown", (event) => {
// 判断按下的键是否为Ctrl键和P键
if (event.ctrlKey && event.key === "p") {
// 阻止事件默认行为(打印页面)
event.preventDefault();
// 可以选择在这里添加自己的提示或处理逻辑
console.log("ctrl + p 已被阻止");
}
});
});
agregarEventListener
definición de w3school
addEventListener()
Método para adjuntar un controlador de eventos a un elemento.
parámetro describir tipo requerido. El nombre del evento.
No utilice el prefijo "on".
Utilice "hacer clic" en lugar de "al hacer clic".
función requerido. Función que se ejecutará cuando ocurra el evento. utilizarCapturar opcional (predeterminado = falso).
false
- Los manipuladores se ejecutan en la fase de burbujeo.true
- Los controladores se ejecutan durante la fase de captura.
detalles técnicos
Este método agregará la función de escucha de eventos especificada a la colección de escuchas del nodo actual para manejar
type
eventos del tipo especificado. En casouseCapture
afirmativotrue
, el oyente se registra como oyente de eventos de captura. En casouseCapture
afirmativofalse
, se registra como un detector de eventos normal.
addEventListener()
Se puede llamar varias veces para registrar varios controladores de eventos para el mismo tipo de evento en el mismo nodo. Sin embargo, tenga en cuenta queDOM
no se puede determinar el orden en el que se invocan varios controladores de eventos. Si una función de escucha de eventos se registra dos veces
en el mismo nodo con los mismos parámetrostype
y , se ignorará el segundo registro.useCapture
Si se registra un nuevo detector de eventos en un nodo mientras se procesa un evento en el nodo, no se llamará al nuevo detector de eventos para ese evento. Al clonar un nodo
con el método Node.cloneNode() o el método Document.importNode()Document
, los detectores de eventos registrados para el nodo original no se copian.
Este método también se define en objetos Documento y Ventana y funciona de manera similar.
Contenido DOM cargado
MDN
El evento se activa cuando
HTML
el documento está completamente analizado y todos los scripts diferidos ( <script defer src="…"> y <script type="module"> ) se han descargado y ejecutado .DOMContentLoaded
No espera a que termine de cargarse otro contenido como imágenes, subtramas y scripts asíncronos.
DOMContentLoaded
No espera a que se carguen las hojas de estilo, pero los scripts diferidos sí lo hacen yDOMContentLoaded
los eventos se ponen en cola después de los scripts diferidos. Además, los scripts no retrasados o asíncronos (como<script>
) esperarán a que se carguen las hojas de estilo analizadas.
El otro evento de carga solo se puede utilizar para detectar una página completamente cargada. Un error común esDOMContentLoaded
utilizarload
eventos cuando son más apropiados.
Este evento no se puede cancelar.
prevenir valor predeterminado
w3escuela
Si el evento es cancelable,
preventDefault()
el método cancela el evento, lo que significa que la acción predeterminada perteneciente al evento no se llevará a cabo.
Útil cuando, por ejemplo:
hacer clic en un botón de enviar evita que se envíe un formulario.
Hacer clic en un enlace evita que el enlace sigaURL
No todos los eventos se pueden cancelar. Utilice el atributo cancelable para determinar si el evento es cancelable.
preventDefault()
El método no impide que el evento seDOM
propague más. UtilicestopPropagation()
el método para resolverlo.
MDN
Un método de la interfaz de eventos
preventDefault()
que le dice al agente de usuario que si el evento no se maneja explícitamente, sus acciones predeterminadas no deben realizarse como de costumbre. Este evento continúa propagándose, a menos que el detector de eventos llame a stopPropagation() o stopImmediatePropagation() para detener la propagación.