在JavaScript中,有许多不同的事件可以触发。以下是一些常见的事件及其使用示例:
- 点击事件(click):当用户点击某个元素时触发。
javascriptdocument.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了!"); });
- 加载事件(load):当页面或部分页面加载完毕时触发。
javascriptwindow.addEventListener("load", function() { alert("页面加载完毕!"); });
- 鼠标移动事件(mousemove):当用户移动鼠标时触发。
javascriptdocument.addEventListener("mousemove", function(event) { console.log("鼠标位置: " + event.clientX + ", " + event.clientY); });
- 键盘事件(keydown, keyup, keypress):当用户在键盘上按下或释放一个键时触发。
javascriptdocument.addEventListener("keydown", function(event) { console.log("按下的键是: " + event.key); });
- 滚动事件(scroll):当用户滚动页面时触发。
javascriptwindow.addEventListener("scroll", function() { console.log("页面已滚动到: " + window.pageYOffset); });
- 触摸事件(touchstart, touchend, touchmove):在触摸屏幕上,当用户开始触摸、结束触摸或移动手指时触发。这些事件主要在移动设备上使用。
- 失去焦点事件(blur):当元素失去焦点时触发。例如,当用户点击页面上的其他地方,或者使用tab键移开焦点时。
- 获得焦点事件(focus):当元素获得焦点时触发。例如,当用户点击输入框或使用tab键选中输入框时。
- 输入事件(input):当元素的值发生变化时触发,例如在输入框中输入文本。
- 选择事件(change):当元素的值被改变并且离开焦点时触发,例如在选择框中选择一个选项。
- DOMContentLoaded事件:当文档被完全加载和解析完成时触发,但不会等待样式表、图像和子框架完成加载。它和load事件的区别是DOMContentLoaded不等待样式表、图像和子框架完成加载。