javascript事件大全

在JavaScript中，事件是用户和浏览器之间交互的桥梁。当某些特定的事情发生时（如用户点击按钮、鼠标移动、页面加载等），浏览器会触发相应的事件。这些事件可以被JavaScript代码捕获，并允许开发者执行某些操作。以下是一些常见的JavaScript事件及其代码示例：

1.点击事件 (click)

当用户点击某个元素时触发。

	// 获取元素
	var button = document.getElementById('myButton');
	// 为元素添加点击事件监听器
	button.addEventListener('click', function() {
	alert('按钮被点击了！');
	});

2.鼠标移动事件 (mousemove, mouseover, mouseout)

当鼠标指针在元素内部移动时触发 mousemove；当鼠标指针进入元素时触发 mouseover；当鼠标指针离开元素时触发 mouseout。

	var element = document.getElementById('myElement');
	element.addEventListener('mousemove', function(event) {
	console.log('鼠标在元素内移动，当前位置：', event.clientX, event.clientY);
	});
	element.addEventListener('mouseover', function() {
	console.log('鼠标进入了元素');
	});
	element.addEventListener('mouseout', function() {
	console.log('鼠标离开了元素');
	});

3.键盘事件 (keydown, keyup, keypress)

当用户按下、释放或按住键盘上的键时触发。

	document.addEventListener('keydown', function(event) {
	console.log('按下了键：', event.key);
	});
	document.addEventListener('keyup', function(event) {
	console.log('释放了键：', event.key);
	});
	document.addEventListener('keypress', function(event) {
	console.log('按住了键：', event.key);
	});

4.表单事件 (submit, focus, blur)

当表单提交时触发 submit；当元素获得焦点时触发 focus；当元素失去焦点时触发 blur。

	var form = document.getElementById('myForm');
	form.addEventListener('submit', function(event) {
	event.preventDefault(); // 阻止表单的默认提交行为
	console.log('表单被提交了');
	});
	var input = document.getElementById('myInput');
	input.addEventListener('focus', function() {
	console.log('输入框获得了焦点');
	});
	input.addEventListener('blur', function() {
	console.log('输入框失去了焦点');
	});

5.加载事件 (load)

当页面或图片加载完成时触发。

	window.addEventListener('load', function() {
	console.log('页面加载完成');
	});
	var img = document.getElementById('myImage');
	img.addEventListener('load', function() {
	console.log('图片加载完成');
	});

6.滚动事件 (scroll)

当用户滚动页面时触发。

	window.addEventListener('scroll', function() {
	console.log('页面滚动位置：', window.scrollY);
	});

7.触摸事件 (touchstart, touchmove, touchend)

在触摸屏设备上触发，当用户触摸、移动或停止触摸屏幕时。

	var element = document.getElementById('myElement');
	element.addEventListener('touchstart', function(event) {
	console.log('触摸开始', event.touches);
	});
	element.addEventListener('touchmove', function(event) {
	console.log('触摸移动', event.touches);
	});
	element.addEventListener('touchend', function(event) {
	console.log('触摸结束', event.changedTouches);
	});

这些只是JavaScript事件的一小部分。在实际开发中，你可能会遇到更多特定于应用或库的事件。请注意，当使用事件监听器时，要确保在不再需要它们时移除它们，以防止内存泄漏。可以通过调用监听器对象的 removeEventListener 方法来实现这一点。