JavaScript事件

最新推荐文章于 2025-02-19 09:09:27 发布

熊先生～

最新推荐文章于 2025-02-19 09:09:27 发布

阅读量198

点赞数

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/Super_XiongDa/article/details/90646131

版权

学习专栏收录该内容

32 篇文章

订阅专栏

本文围绕JavaScript事件展开，介绍了事件定义，即用户与Web页面交互或浏览器自身操作触发的情况。还阐述了事件的作用，列举常用事件，讲解事件流和事件模型，重点介绍了DOM0级和DOM2级事件处理程序，如addEventListener()和removeEventListener()的使用。

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

事件定义

事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小.通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件
做出响应。

作用

1. 验证用户输入的数据
2. 增加页面的动感效果
3. 增强用户的体验感
4. 也就是三要素
  	1. 事件源
  	2. 事件名称
  	3. 处理函数

常用事件

1. 点击事件  onclick
2. 失焦事件  onBlur
3. 聚焦事件  onfocus
4. 改变越对象(下拉框)   onchange
5. 鼠标悬停事件  onmouserver
6. 鼠标移开事件  onmouseout
7. 键盘按下事件  onkeydown
8. 键盘弹起事件  onkeyup

事件流和事件模型

1. 事件顺序有两种类型:事件捕获和事件冒泡
2. 事件捕获是从document → <html> → <body> → <div>
3. 事件冒泡是从<div> → <body> → <html> → document
4. 两种事件流从不同方向寻找事件源

事件处理程序

		<button onclick="alert('我被点了');">按钮1</button>
		
		<button onclick="test()">按钮2</button>
		
		<button id="btn3">按钮3</button>
		
		<button id="btn4" >按钮4</button>

DOM0级事件处理程序

1. 不能绑定同一个元素同一个事件多次

/*DOM0 级事件处理程序*/		
		function test(){
			alert("我又被点了");
		}
		
		// 得到按钮对象
		var btn = document.getElementById("btn3"); //通过ID获取元素
		console.log(btn);
		// 给按钮绑定鼠标悬停事件
		btn.onmouseover = function() {
			alert("我再次被点击了");
		}
		btn.onmouseover = function() {
			alert("我再次被点击了.....");
		}

DOM2级事件
1. 可以绑定一个元素的内容多次

/*DOM2级事件*/
		// 获取元素
		var btn4 = document.getElementById("btn4");
		// 绑定事件
		btn4.addEventListener("click",function(){
			console.log("这是第4个按钮...");
		});
		btn4.addEventListener("click",function(){
			console.log("这是第4个按钮。。。。");
		});
		
		btn4.addEventListener("mouseout",function(){
			console.log("离开第4个按钮...");
			
			// 移除事件
			btn4.removeEventListener("click",tt)
			
		});
		
		btn4.addEventListener("click",tt);
		
		function tt() {
			console.log("第三次被打印...");
		}

addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段调用事件处理程序。