js 大厦之JavaScript事件

最新推荐文章于 2024-10-07 09:24:46 发布

光明辉煌100

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量133

点赞数

文章标签： javascript js事件

本文链接：https://blog.csdn.net/qq_40041074/article/details/78720011

版权

1、js事件简介

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

2、主要作用

1）、验证用户输入窗体的数据
2）、增加页面的动感效果

3、事件名称与事件处理程序(事件侦听器)

事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办？

事件源	事件名	监听	处理
车	闯红灯	摄像头、交警	扣分罚款
按钮	点击	窗口	执行函数

如我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、 mousemove、 load

<body οnlοad="loadWindow();"></body>
	<script>
		function loadWindow() {
			alert("加载窗体");
		}
	</script>

4、处理事件的方式

1）、行内事件（耦合度高）

<span id="main" οnclick="test();">点我</span>
<script type="text/javascript">
// 此处 click，点击，是一种事件的名称，onclick 就叫做事件处理程序。
//下面这段代码，我们通过处理程序(onclick)为 main 这个元素预定了点击(click)，
//这样在点击(click)发生的时候，执行函数中的代码(弹出一个对话框)。
	function test() {
		alert('别点我。。。 ');
	}
</script>

2）、DOM 0级事件（解耦）

<span id="main" οnclick="test();">点我</span>
	<script>
		//dom 事件级处理 
		var obj = document.getElementById("main");
		obj.onclick = function() {
			alert('点击了此处哦！');
		}
		obj.onclick = function() {
			alert('点击了此处哦 2！');
		}
	</script>

3、DOM2级事件（可为同一个元素绑定多个同类型事件）

<span id="main" οnclick="test();">点我</span> 
	//dom02 事件级处理：绑定 3 个事件
	<script>
		var obj = document.getElementById("main");
		obj.addEventListener("click", test, false);

		function test() {
			alert(this.innerHTML);
		}
		obj.addEventListener("click", function() {
			alert("第二个事件");
		}, false);
	</script>

以上是我们对js中事件的处理方式，下节我们将结合具体的事件演示效果。

更多有关Javascript大厦的技术文章请查看：

JavaScript工作体系中不可或缺的函数、

JS之location详解、

JavaScript大厦之JS运算符、

JavaScript工作原理：内存管理 + 如何处理4个常见的内存泄露、

JavaScript 和 Web 开发都应该知道的10个概念