事件委托，冒泡，捕获和行为

最新推荐文章于 2025-08-07 00:32:43 发布

原创最新推荐文章于 2025-08-07 00:32:43 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件

前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了网页开发中各类事件的概念及其用法，包括鼠标事件、键盘事件、表单事件和页面事件等，同时深入探讨了事件绑定方法、事件冒泡与捕获机制，以及如何阻止默认行为和冒泡。

首先我们要搞明白什么是事件？
事件：就是满足条件后，会去执行某一段代码用户有操作的时候

鼠标事件	用法
click	鼠标单击
dbclick	鼠标双击
onmousedown	鼠标按下时
mouseup	鼠标抬起时
mousemove	鼠标移动
mouseover	鼠标移入
mouseout	鼠标移出
键盘事件	用法
–	–
onkeyup	抬起键时
onkeydown	按下键时
onkeypress	按下并放开任何字母数字键时
表单事件	用法
–	–
onsubmit	点击提交按钮时发生
onblur	失去焦点时发生
onfocus	获得焦点时发生
onchange	内容发生变化并失去焦点时触发

页面事件：onload 窗体事件：onresize 滚动条事件：onscroll

事件绑定的方法

1.句柄：写在HTML元素中，以属性的形式存在
2.DOM0级绑定 dom.on + 事件 = 处理函数
3.DOM2级绑定事件监听器

键盘事件不需要选择元素

document.onkeydown = function(event){
//				event对象,只有当用户有操作的时候才会产生
				var event = event || window.event ;
				console.log(event);
//				event.keyCode : 键盘码
//				event.key :  按键名字

		**addEventListener**

var d1 = document.getElementById("can");
d1.addEventListener("click",function(){
				alert("中国")
			},true)
//第一个参数是事件的名称 第二个参数是处理函数 第三个参数为冒泡/捕获   默认为冒泡（false）   捕获（true）

**行为:**当你有操作的时候,所带来的后果点击a链接,后果是跳转页面点击表单中的按钮,后果是提交,清空
阻止冒泡

span.onclick = function(event){
	var event = event || window.event;
	a.style.display = "none";
	event.stopPropagation();//阻止冒泡
	event.cancelBubble = true; // 老版本IE独有      通过事件监听器
}

**`阻止默认行为`**

document.getElementsByTagName("a")[0].onclick = function(event){
				var event = event || window.event;
//				event.preventDefault();//IE9以下不兼容
				return false;
//				event.returnValue = false;//兼容老版本的IE
			}