JavaScrip之禁止快捷键打印、禁用组合键、监听、阻止、addEventListener、DOMContentLoaded、preventDefault

文章目录

  • 代码
  • addEventListener
  • DOMContentLoaded
  • preventDefault


代码

// 在网页加载完成后运行代码
document.addEventListener("DOMContentLoaded", () => {
    // 监听按键按下事件
    document.addEventListener("keydown", (event) => {
        // 判断按下的键是否为Ctrl键和P键
        if (event.ctrlKey && event.key === "p") {
            // 阻止事件默认行为(打印页面)
            event.preventDefault();
            // 可以选择在这里添加自己的提示或处理逻辑
            console.log("ctrl + p 已被阻止");
        }
    });
});

addEventListener

w3school
定义

addEventListener()方法将事件处理程序附加到元素。

参数 描述
type

必需。事件的名称。

请不要使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。


DOM事件的完整列表

function 必需。事件发生时运行的函数。
useCapture

可选(default = false)。

  • false - 处理程序在冒泡阶段执行。
  • true - 处理程序在捕获阶段执行。

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中,以处理指定类型type的事件。如果useCapturetrue,则监听器被注册为捕捉事件监听器。如果useCapturefalse,它被注册为普通事件监听器。
addEventListener()可能被调用多次,在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意,DOM不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的typeuseCapture参数注册了两次,那么第二次注册将被忽略。如果正在处理一个节点上的事件时,在这个节点上注册了一个新的事件监听器,则不会为那个事件调用新的事件监听器。
当用Node.cloneNode()方法或Document.importNode()方法复制一个Document节点时,不会复制为原始节点注册的事件监听器。
这个方法也在Document和Window对象上定义了,而且工作方式类似。


DOMContentLoaded

MDN

HTML文档完全解析,且所有延迟脚本(

你可能感兴趣的:(web前端,JavaScript,前端,javascript,web)