JavaScript 常用事件-优快云博客

本文介绍了DOM中元素间距的相关属性，如clientWidth、offsetWidth等，并详细解释了元素与父元素及可视窗口的位置关系。此外，还深入探讨了事件绑定与解绑的方法，事件对象的属性，以及如何阻止事件传递和默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Dom 常用的元素间距

获取（设置）元素的css行内样式（计算好的样式值需要使用驼峰写法）

元素的宽和高

clientWidth:内容+padding+border（减去工具条)
offsetWidth:内容+padding+border
scrollWidth没有滚动条同offsetWidth 内容+padding-工具条+滚动的距离
clientHeight；offsetHeight；scrollHeight

元素与父元素距离

offsetLeft与相对父元素的左偏移值
offsetTop与相对父元素的垂直偏移值
offsetParent相对父元素（元素的父辈元素有position非static值）

元素的滚动距离

elem.scrollTop
elem.scrollLeft
浏览器滚动距离
document.documentElement.scrollTop
document.body.scrollTop

元素与可视化窗口的编辑

elem.getBoundingClientRect()
elem.getBoundingClientRect()
Bounding 边界
Clien 客户端

二、常用事件

事件的解绑与绑定

绑定
btn.οnclick=function（）{}

btn.addEventListener(type,funName)
解绑

btn.οnclick=null

btn.removeEventListener(type,funName)

匿名函数不能解绑

事件对象

event.offsetX、event.offsetY 相对于事件源（X轴Y轴）偏移文字
event.target 源对象
event.pageX、event.pageY （X轴Y轴）相对于页面的位置

事件传递

冒泡：最具体元素最先捕捉到事件，传递给最不具体的元素（document）
捕获：最不具体的元素先捕获到事件，传递给最具体的元素
默认都是冒泡，使用捕获
elem.addEventListener(事件类型，响应时间，是否为捕获）
elem.addEventListener（"click,doit,true)
阻止事件传递 event.stopPropagation()
阻止默认事件 event.preventDefault()

键盘事件

keypress 按下弹起、keyup 键盘弹起、keydown 键盘按下

键盘事件参数：

event.keyCode键对应数字编码、event.key键盘的名称、event.which等于keyCode

鼠标事件：

mouseover 鼠标移入、mouseout 鼠标移出、mousedown 鼠标按下
mouseup 鼠标弹起、mousemove 鼠标移动、click 单击dblclick 双击

鼠标事件对象参数：

event.offsetLeft;event.offsetTop;相对于事件源对象水平距离;垂直距离;

表单事件

change值发生变化、input正在输入、focus获取焦点、blur失去焦点

页面事件

load加载、resize窗口变化、scroll滚动

事件代理

把事件注册到其共有的父元素上，通过事件的冒泡机制，event.target实现目标
（本来注册给每个元素，注册到其共有的父元素）

	<body>
		<h1>留言板</h1>
		<div class="container">
			<p>我是第一条默认留言</p>
			<p>我是第二条留言</p>
		</div>
		<input type="text" placeholder="请留言" id="inp">
		<script>
			var inp = document.getElementById("inp");
			var container = document.querySelector(".container");
			// 单击container里面的p标签弹出内容
			/* var ps = container.querySelectorAll("p");
			// 遍历ps 添加事件
			ps.forEach(item=>{
				item.onclick = function(){
					// 弹出item的文本
					alert(this.innerText);
				}
			}) */
			container.addEventListener("click",function(event){
				alert(event.target.innerText);
			})
			// 动态添加的p元素没办法绑定事件
					
			// inp添加键盘事件keyup,如果是回车键
			inp.addEventListener("keyup",function(event){
				console.log(event,event.keyCode,event.key);
				// 如果是enter键
				if(event.keyCode==13){
					// 创建个p
					var p = document.createElement("p");
					// 设置文本
					p.innerText = inp.value;
					// 插入到container
					container.appendChild(p);
					// 请求inpt
					inp.value = '';
				}
			})
			// 创建一个p标签,把inp文本放入p
			// 让container插入p标签
		</script>
	</body>