JavaScript操作addEventListener监听触发事件

JavaScript 的 addEventListener 方法允许你为指定的 HTML 元素添加事件监听器。以下是一些常见的事件类型，可以使用 addEventListener 来监听它们：

1，点击事件 (click)

点击事件 (click): 当用户点击元素时触发。

element.addEventListener('click', function(event) {
    console.log('Element was clicked!' + '点击位置：(' + event.clientX + ', ' + event.clientY + ')');
});

2，鼠标移入事件 (mouseover)

鼠标移入事件 (mouseover): 当鼠标指针移入元素时触发。

element.addEventListener('mouseover', function(event) {
    console.log('Mouse is over the element!');
});

3，鼠标移出事件 (mouseout)

鼠标移出事件 (mouseout): 当鼠标指针移出元素时触发。

element.addEventListener('mouseout', function(event) {
    console.log('Mouse is out of the element!');
});

4，键盘按键事件 (keydown, keyup)

键盘按键事件 (keydown, keyup): 当用户按下或释放键盘上的键时触发。

document.addEventListener('keydown', function(event) {
    console.log('Key was pressed:', event.key);
});
document.addEventListener('keyup', function(event) {
    console.log('Key was Released:', event.key);
});

5，输入事件 (input)

输入事件 (input): 当 <input>, <textarea> 或 <select> 元素的值发生变化时触发。这个函数会在input元素的值发生变化时被调用。

inputElement.addEventListener('input', function(event) {
    // event参数包含了事件的相关信息。
    // 你可以通过event.target来获取触发事件的元素
    // 在这个例子中，event.target就是inputElement
    var changedElement = event.target;  

    // 你可以获取改变后的值
    var newValue = changedElement.value;
    // 现在你可以根据新的值做一些处理
    console.log('Input value changed to:', newValue);

    // 或者你也可以直接对宿主对象做一些处理，效果是一样的
    console.log('Input value changed:', inputElement.value);
});

---

加载事件 (DOMContentLoaded、load )

在 JavaScript 中，DOMContentLoaded 事件和 load 事件都与页面加载有关，但它们在触发时机和用途上有一些重要的区别。

DOMContentLoaded 事件

DOMContentLoaded事件在DOM树构建完成后触发，即当整个HTML文档被解析完成并且DOM树构建完成之后触发。此时，页面的CSS、JavaScript、图片等资源可能还没有完全加载完成，但是DOM结构已经可以访问并操作了。

DOMContentLoaded 事件在文档被完全加载和解析完成后触发，不等待样式表、图像和子框架的完成加载。换句话说，当 HTML 文档被完全加载和解析，DOM 树构建完成时，就会触发 DOMContentLoaded 事件。此时，页面中的脚本可以安全地访问 DOM 元素，并进行相关的 DOM 操作。

由于 DOMContentLoaded 事件不等待其他资源（如图片、CSS 文件等）的加载，因此它通常比 load 事件触发得更快。

6.1，加载事件 (DOMContentLoaded)

加载事件 (load): 当元素（如 <img>）或整个页面完成加载时触发。

// 使用 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function(event) {
    console.log('DOMContentLoaded 事件触发');
    // 在这里执行与 DOM 相关的操作
});  

load 事件

load 事件在整个页面及所有依赖资源如样式表和图片完成加载后触发。这意味着，当 load 事件触发时，页面上的所有内容（包括图像、脚本文件、CSS 文件等）都已经完全加载到浏览器中，并且可以被访问和操作。

由于 load 事件需要等待所有资源加载完成，因此它通常比 DOMContentLoaded 事件触发得更晚。

另外，load 事件监听的对象可以是窗口、文档、也可以是页面的CSS、JavaScript、图片等资源。这一点对于页面上静态资源很大，或数量很多的场景下很有用。

6.2，加载事件 (load)

加载事件 (load): 当元素（如 <img>）或整个页面完成加载时触发。

imageElement.addEventListener('load', function(event) {
    console.log('Image loaded!');
});  

// 使用 load 事件
window.addEventListener('load', function(event) {
    console.log('load 事件触发');
    // 在这里执行需要等待所有资源加载完成的操作
});

用途和选择

如果你需要在 DOM 元素可用时立即执行某些操作（例如，添加事件监听器、修改 DOM 结构等），那么使用 DOMContentLoaded 事件是一个好选择。因为它不等待其他资源的加载，可以更快地执行代码。

如果你需要确保页面上的所有资源（包括图像、CSS 文件等）都已经加载完成后再执行某些操作（例如，计算图像的尺寸、应用某些样式等），那么应该使用 load 事件。

---

7，滚动事件 (scroll)

滚动事件 (scroll): 当元素或页面滚动时触发。

var lastScrollTop = 0;
window.addEventListener('scroll', function(event) {
    console.log('Page scrolled!');
    // 根据滚动位置进行相应操作
    var scrollPosition = window.scrollY;
    if (element.offsetTop <= window.innerHeight + window.scrollY) {
    // 元素已经进入视口，可以执行相应的操作
    }

    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        // 页面已经滚动到底部，可以执行加载更多内容的操作
    }

    // 判断页面滚动的方向
    var currentScrollTop = window.scrollY;
    if (currentScrollTop > lastScrollTop) {
        // 向下滚动
    } else {
        // 向上滚动
    }
    lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop; // 防止在顶部时出现负数 

});

8，提交事件 (submit)

提交事件 (submit): 当表单尝试提交时触发。

formElement.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('Form submitted!');
});

9，拖拽事件 (dragstart, dragover, drop 等)

拖拽事件 (dragstart, dragover, drop 等): 与拖拽相关的系列事件。

拖拽事件类型

当元素被拖拽时，会触发一系列的事件。这些事件包括：

• dragstart：当用户开始拖拽元素时触发。
• drag：在拖拽过程中持续触发。
• dragenter：拖拽的元素进入目标区域时触发。
• dragover：当元素在目标区域上方移动时触发。
• dragleave：当元素离开目标区域时触发。
• drop：当拖拽的元素被放置在目标区域时触发。
• dragend：拖拽操作结束时触发。

示例：

element.addEventListener('dragstart', function(event) {
    console.log('Dragging started!', event.target);
});
element.addEventListener('drag', function(event) {
    console.log('Dragging!', event.target);
});
element.addEventListener('dragend', function(event) {
    console.log('Dragging has stopped!', event.target);
});

10，触摸事件 (touchstart, touchmove, touchend 等)

触摸事件 (touchstart, touchmove, touchend 等): 在触摸屏设备上触发的事件。

element.addEventListener('touchstart', function(event) {
    console.log('Touch started!', event.touches);
});

11，右键点击事件 (contextmenu)

右键点击事件 (contextmenu): 当用户右击元素时触发（通常用于自定义右键菜单）。

element.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 阻止默认右键菜单显示
    console.log('Right-click on the element!');
});

12，用户选择文本事件 (selectstart)

用户选择文本事件 (selectstart): 当文本被选中时触发（通常用于自定义右键菜单）。

element.addEventListener('selectstart', function(event) {
    event.preventDefault(); // 阻止默认事件
    console.log('Select start on the element!');
});

这些只是众多可用事件类型中的一部分。你可以根据需求选择合适的事件来监听。

---

---

其他示例：根据鼠标在元素停留时长判断是否真人操作

在JavaScript中，要判断鼠标移到元素上的时间和移出元素的时间，你可以使用mouseenter和mouseleave事件。这两个事件分别会在鼠标指针进入和离开元素时触发。你可以在这些事件的回调函数中记录时间戳，并据此计算出鼠标在元素上停留的时长。

以下是一个简单的示例代码，展示了如何实现这一功能：

// 获取你想要监听鼠标事件的元素
var element = document.getElementById('inputElementId');  

// 定义变量来存储时间戳
var enterTime = 0;
var leaveTime = 0;
var duration = 0;  

// 监听 mouseenter 事件
element.addEventListener('mouseenter', function(event) {
    // 记录鼠标进入元素的时间戳
    enterTime = Date.now();
    console.log('鼠标进入元素时间:', enterTime);
});  

// 监听 mouseleave 事件
element.addEventListener('mouseleave', function(event) {
    // 记录鼠标离开元素的时间戳
    leaveTime = Date.now();
    console.log('鼠标离开元素时间:', leaveTime);  

    // 计算鼠标在元素上停留的时长
    duration = leaveTime - enterTime;
    console.log('鼠标在元素上停留的时长（毫秒）:', duration);
});

在这段代码中，inputElementId应该替换为你想要监听鼠标事件的元素的ID。当鼠标指针进入该元素时，会记录一个时间戳到enterTime变量中；当鼠标指针离开该元素时，会记录另一个时间戳到leaveTime变量中，并计算两个时间戳之间的差值，得到鼠标在元素上停留的时长（以毫秒为单位）。

请注意，这种方法只能测量鼠标在单个连续进入和离开动作期间在元素上的停留时间。如果鼠标在元素内部移动并在不同位置触发其他事件（如mousemove），则不会影响这里计算的停留时长。

其他示例：禁止网页的复制粘贴和右键操作

要禁止网页的复制、粘贴和右键操作，可以使用 JavaScript 来实现。下面是一些示例代码：

document.addEventListener('copy', function(e) {
  e.preventDefault();
  alert('Copying is not allowed on this website.');
  return false;
});  

document.addEventListener('cut', function(e) {
  e.preventDefault();
  alert('Cutting is not allowed on this website.');
  return false;
});  

document.addEventListener('paste', function(e) {
  e.preventDefault();
  alert('Pasting is not allowed on this website.');
  return false;
}); 

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  alert('Right-clicking is not allowed on this website.');
  return false;
}); 

/* 右键、复制都失效 */
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");

可以结合 CSS 一起来实现：

使用纯CSS，你可以实现禁止用户选择文本（从而间接地限制复制操作）和隐藏右键菜单。但是，请注意，这些方法并不能完全阻止用户获取页面内容，因为它们不会阻止程序化的复制操作或其他高级用户技巧。

禁止文本选择（限制复制）

你可以通过CSS的user-select属性来禁止用户选择页面上的文本。这会让文本无法通过常规的鼠标拖拽方式被选中，从而间接限制了复制操作。

body {
    -webkit-user-select: none; /* Chrome、Safari、Opera, Android */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    -o-user-select: none; /* Opera浏览器私有属性 */
    user-select: none; /* 标准语法：禁止用户选择文本 */
    -webkit-user-drag: none; /* 禁止用户拖拽 */
}

将这段代码添加到你的CSS样式表中，会禁止整个区域内的文本选择。如果你只想针对特定元素禁止选择，可以将body替换为相应的选择器。

隐藏右键菜单

隐藏右键菜单可以通过CSS的::context-menu伪元素来实现，但这并不是一个广泛支持的特性。更常见且兼容的方法是使用JavaScript来禁用contextmenu事件。不过，如果你坚持只使用CSS，并且不介意牺牲一些兼容性，可以尝试以下方法（主要在Firefox中有效）：

* {
  contextmenu: none;
}  

// 或者针对特定元素：
.no-contextmenu {
  contextmenu: none;
}

然后，在HTML中为想要禁止右键菜单的元素添加no-contextmenu类：

<div class="no-contextmenu">右键点击这里不会有任何反应（在支持的浏览器中）</div>

由于这种方法兼容性有限，通常建议结合使用JavaScript来处理右键菜单的禁用。

虽然CSS可以提供一定程度的保护来防止用户复制文本或显示右键菜单，但这些方法并不是绝对安全的。熟练的用户或开发者仍然可以通过其他手段（如查看页面源代码、使用开发者工具、或编写脚本）来访问和复制页面内容。因此，这些CSS技巧更多是用于增强用户体验或防止无意的复制行为，而不是作为内容保护的严格措施。