• JavaScript事件

    目录

    事件

    绑定事件的三种方法

    常用的JavaScript事件

    鼠标事件

    表单事件

    键盘事件

    框架/对象（Frame/Object）事件

    事件

    HTML 事件是发生在 HTML 元素上的事情。

    当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

    事件是文档或者浏览器窗口中发生的，特定的交互瞬间

    典型事例：

            页面加载完毕，触发load事件

            浏览器窗口放大或缩小，触发resize事件

            用户单击元素，触发click事件

    绑定事件的三种方法

    绑定事件的第一种方式：在元素上使用事件属性来绑定事件

    绑定事件的第二种方式：先获取元素再绑定事件

    绑定事件的第三种方式：使用事件监听器来绑定事件

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="show()">点我一下button>
    9. 	body>
    10. 	
    11. 	<script>
    12. 		//绑定事件的第一种方式：在元素上使用事件属性来绑定事件
    13. 		function show(){
    14. 			alert('我是绑定事件的第一种方式');
    15. 		}
    16. 		
    17. 		//绑定事件的第二种方式：先获取元素再绑定事件
    18. 		// var btnEle = document.querySelector('button');
    19. 		// btnEle.ondblclick = function(){
    20. 		// 	alert('我是绑定事件的第二种方式');
    21. 		// }
    22. 		
    23. 		//绑定事件的第三种方式：使用事件监听器来绑定事件
    24. 		// btnEle.addEventListener('mouseover',function(){
    25. 		// 	alert('我是绑定事件的第三种方式');
    26. 		// })
    27. 		
    28. 	script>
    29. html>

    常用的JavaScript事件

    鼠标事件

    由鼠标或类似用户动作触发的事件

    事件名

                                            描述

    onclick

                            鼠标点击某个对象

    ondblclick

                             鼠标双击某个对象

    onmouseover

                             鼠标被移到某元素之上

    onmouseout

                             鼠标从某元素移开

    onmousedown

                             某个鼠标按键被按下

    onmousemove

                             鼠标被移动

    onmouseup

                             某个鼠标按键被松开

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			.top{
    8. 				width: 200px;
    9. 				height: 30px;
    10. 				background-color: #ccc;
    11. 				font-size: 24px;
    12. 				text-align: center;
    13. 				line-height: 30px;
    14. 			}
    15. 			
    16. 			.buttom{
    17. 				width: 200px;
    18. 				height: 400px;
    19. 				background-color: #f00;
    20. 				display: none;
    21. 			}
    22. 		style>
    23. 	head>
    24. 	<body>
    25. 		<div class="top">手机/运营商/数码div>
    26. 		<div class="buttom">111div>
    27. 	body>
    28. 	<script>
    29. 		//鼠标移入灰色div中，红色div显示，鼠标移出灰色div，红色div隐藏
    30. 		
    31. 		//获取灰色的div给它添加鼠标移入和移出事件
    32. 		var topDivEle = document.querySelector('.top');
    33. 		//获取红色div
    34. 		var buttomDivEle = document.querySelector('.buttom');
    35. 		
    36. 		//绑定鼠标移入事件
    37. 		topDivEle.onmouseover = function(){
    38. 			buttomDivEle.style.display = 'block';	
    39. 		}
    40. 		
    41.         //绑定鼠标移出事件
    42. 		topDivEle.onmouseout = function(){
    43. 			buttomDivEle.style.display = 'none';
    44. 		}
    45. 		
    46. 		
    47. 	script>
    48. html>

    表单事件

    由 HTML 表单内的动作触发的事件

    事件名

                                    描述

    onfocus

                             元素获得焦点

    onblur

                             元素失去焦点

    onchange

                             用户改变域的内容

    onreset

                             表单重置时触发

    onsubmit

                             表单提交时触发

     注意：表单重置事件不支持input标签，支持form标签 

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<form>
    9. 			姓名：<input type="text" value="ttt"/>
    10. 		form>
    11. 	body>
    12. 	
    13. 	<script>
    14. 		//第一步：获取元素
    15. 		var inputEle = document.querySelector('input');
    16. 		//第二步：添加事件
    17. 		inputEle.onfocus = function(){
    18. 			console.log('输入框获得了焦点');	//按F12显示结果
    19. 		}
    20. 		
    21. 		inputEle.onblur = function(){
    22. 			console.log('输入框失去了焦点');
    23. 		}
    24.  
    25. 		
    26. 	script>
    27. html>

    键盘事件

    键盘事件就是对键盘操作触发的事件

    事件名

                                            描述

    onkeydown

                            某个键盘的键被按下

    onkeypress

                            某个键盘的键被按下并释放一个键时发生

    onkeyup

                            某个键盘的键被松开

     键盘事件的事件次序：onkeydown onkeypress onkeyup

    1. DOCTYPE html>
    3. 	
    4. 		
    5. 		
    6. 	
    7. 	
    8. 		
    9. 	
    10.

    框架/对象（Frame/Object）事件

    指的是那些不一定与用户操作有关的事件

    事件名

                                    描述

    onload

                     某个页面或图像被完成加载

    onresize

                     窗口或框架被调整尺寸

    onscroll

                     当文档被滚动时发生的事件

     如果重载页面，也会触发 unload 事件（以及 onload 事件）

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script>
    7. 			//获取p元素,这样获取p元素是获取不到的。我们需要等到html页面全部加载完毕之后才能获取
    8. 			// var pEle = document.querySelector('p');
    9. 			// console.log(pEle);//null
    10. 			
    11. 			window.onload =function(){
    12. 				var pEle = document.querySelector('p');
    13. 				console.log(pEle);
    14. 			}
    15. 		script>
    16. 	head>
    17. 	<body>
    18. 		<p>我是段落标签p>
    19. 	body>
    20. html>

  • 相关阅读:
    【PTHREAD】线程互斥与同步之栅栏
    【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
    C++ decltype 类型推导
    h3c 网络设备清理所有配置
    利用随机森林对特征重要性进行评估（公式原理）
    SwiftUI 教程之应用中实现 Core Spotlight搜索（教程含源码）
    Autosar MCAL-ADC详解（一）-基于Tc27x的cfg软件
    苹果macOS Sonoma 14正式版 “黑苹果”且用且珍惜
    华为云大咖说：开发者应用AI大模型的“道、法、术”
    Java 协程终于要来了
  • 原文地址：https://blog.csdn.net/qq_51810428/article/details/126990378