JavaScript事件绑定与常用事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/aqzengkuasheng/article/details/122883997

事件是可以被 JavaScript 侦测到的行为。Js本身就可以检测到事件的发送，但是如果没做处理也就没效果。
事件绑定：

HTML内联属性： HTML 元素里面直接填写事件有关属性，属性值为 JavaScript 代码，即可在触发该事件的时候，执行属性值的内容

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

onclick 属性表示触发 click，属性值的内容（JavaScript 代码）会在单击该 HTML 节点时执行。
2.Dom事件模型绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>你好</h1>
		<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>
		<button id="btn">再点一个按钮</button>
		<script>
		var btn1=document.getElementById("btn");
		btn1.onclick=function(){
			console.log("又是一个按钮的helloWorld");
		}
		</script>
	</body>
</html>

常用的事件
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>你好</h1>
		<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>
		<button id="btn">再点一个按钮</button>
		<script>
		var btn1=document.getElementById("btn");
		btn1.onclick=function(){
			console.log("又是一个按钮的helloWorld");
		}
		</script>
	</body>
</html>

			window.onkeydown=function(event){//事件出现的时候，可以用event表示事件对象
				console.log(event)
			}

这表示一个键盘事件：
在这里插入图片描述

js事件绑定以及常用事件