JavaScript 的 addEventListener 方法允许你为指定的 HTML 元素添加事件监听器。以下是一些常见的事件类型，可以使用 addEventListener 来监听它们：
1，点击事件 (click)
点击事件 (click): 当用户点击元素时触发。
element.addEventListener('click', function() { console.log('Element was clicked!');
});
2，鼠标移入事件 (mouseover)
鼠标移入事件 (mouseover): 当鼠标指针移入元素时触发。
element.addEventListener('mouseover', function() { console.log('Mouse is over the element!');
});
3，鼠标移出事件 (mouseout)
鼠标移出事件 (mouseout): 当鼠标指针移出元素时触发。
element.addEventListener('mouseout', function() { 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 pressed:', event.key);
});
5，输入事件 (input)
输入事件 (input): 当 <input>, <textarea> 或 <select> 元素的值发生变化时触发。
inputElement.addEventListener('input', function() { console.log('Input value changed:', inputElement.value);
});
6，加载事件 (load)
加载事件 (load): 当元素（如 <img>）或整个页面完成加载时触发。
imageElement.addEventListener('load', function() { console.log('Image loaded!');
}); document.addEventListener('load', function() { console.log('Image loaded!');
});
7，滚动事件 (scroll)
滚动事件 (scroll): 当元素或页面滚动时触发。
window.addEventListener('scroll', function() { console.log('Page scrolled!');
});
8，提交事件 (submit)
提交事件 (submit): 当表单尝试提交时触发。
formElement.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 console.log('Form submitted!');
});
9，拖拽事件 (dragstart, dragover, drop 等)
拖拽事件 (dragstart, dragover, drop 等): 与拖拽相关的系列事件。
element.addEventListener('dragstart', function(event) { console.log('Dragging started!', 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!');
});
这些只是众多可用事件类型中的一部分。你可以根据需求选择合适的事件来监听。
其他示例：禁止网页的复制粘贴和右键操作
要禁止网页的复制、粘贴和右键操作，可以使用 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;
});
可以结合 CSS 一起来实现：
使用纯CSS，你可以实现禁止用户选择文本（从而间接地限制复制操作）和隐藏右键菜单。但是，请注意，这些方法并不能完全阻止用户获取页面内容，因为它们不会阻止程序化的复制操作或其他高级用户技巧。
禁止文本选择（限制复制）
你可以通过CSS的user-select属性来禁止用户选择页面上的文本。这会让文本无法通过常规的鼠标拖拽方式被选中，从而间接限制了复制操作。
body { -webkit-user-select: none; /* Chrome, Safari, Android */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: 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技巧更多是用于增强用户体验或防止无意的复制行为，而不是作为内容保护的严格措施。
