事件（浅谈）

最新推荐文章于 2024-04-12 22:14:57 发布

原创最新推荐文章于 2024-04-12 22:14:57 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了网页中的事件类型，包括鼠标、键盘及状态事件，并详细解释了如何在HTML、JavaScript和jQuery中定义这些事件。此外，还探讨了事件对象的概念及其在不同浏览器中的兼容性问题，最后讲解了事件处理机制，特别是冒泡机制的工作原理和取消方法。

事件概述：指页面元素状态改变，用户在操作鼠标或键盘时触发的动作

事件属性：通过一个事件属性，可以在某一个事件发生时对某个元素进行某种操作

鼠标事件：onclick（单击事件）；ondblclick（双击事件）；onmousedown（事件会在鼠标按键被按下时发生）；

键盘事件：onkeydown（事件会在用户按下一个键盘按键时发生）；onkeyup（当用户释放键盘按钮时执行）；

状态事件：onload（事件会在页面或图像加载完成后立即发生），onchange（事件在用户改变输入域的内容时执行）

其他还有很多事件，可以查询API文档；

事件定义：

在html中定义：

<input type="button" value="按钮" onclick="method();"></input>

js代码中定义：

//btn为一个按钮对象
btn.onclick = method;
//或者
btn.onclick = function(){
     alert("定义对象");
}

jQuery中定义：

//表示触发了单击事件
$obj.click()

event（事件）对象：

概念：任何事件发生之后都会产生一个event对象，对象记录时间发生时的鼠标位置、键盘状态和触发对象等信息；

获取event对象：（需要考虑浏览器的兼容性）

IE浏览器：js或html代码中直接使用event

<p onclick="alert(event.clientX);">p text</p>
<div onclick="func()">dic text</div>

function func(){
   alert(event.clientX+";"+event.clientY);
}

Firefox浏览器：html可以直接使用event；但是js使用的话汇报错：event is not defined

解决浏览器兼容问题：在句柄定义是，将event关键字作为参数传递过去

<div onclick="func(event);">div text</div>

//firefox浏览器
function func(e){
   alert(e.clientX);
}

jQuery获取event对象：

只需要为事件处理函数传递任意一个参数；如：$obj.click(function(e){......});然后在调用相应的API即可；

e就是事件对象，但已经经过jQuery对底层事件对象的封装；封装之后的事件对象可以方便兼容各浏览器。

使用event对象：

对于使用event对象，经常需要先获取事件源；事件源：触发事件的元素（事件的目标节点）

考虑到浏览器兼容问题：

<div onclick="func(event)">div text</div>

function func(e){
//IE:e.srcElement
//firefox:e.target
  var obj = e.srcElement ||e.target;
  alert(obj.nodeName);//DIV
}

jQuery获取事件源：e.target；返回值为DOM对象；

获取鼠标点击的坐标：e.pageX; e.pageY

事件处理机制：冒泡机制

冒泡机制：字节点产生的事件会依次向上抛给父节点；

JS（检测冒泡机制代码如下）：

<style>
	#d1{
		width:200px;
		border:1px solid red;
		padding:30px;
	}
	#p1{
		border:1px solid blue;
		padding:20px;
	}
	#d2{
		width:800px;
		border:1px solid red;
		padding:30px;
		margin:30px;
	}
</style>

<body>
	<div id="d1" onclick="alert('div')">
		<p id="p1" onclick="alert('p')">
			<input type="button" value="冒泡">
		</p>
	</div>
</body>

取消冒泡机制：

js：

function f1(e){
		alert("aaa");
		//取消事件冒泡机制
		if(e.stopPropagation){
			e.stopPropagation();
		}else{
			e.cancelBubble = true;
		}
		
	}

jQuery：

$('a').click(function(e){
    alert("点击一个完整的连接");
    e.stopPropagation();
});

总结：在事件的处理上，jQuery已经封装了很多的API，可以很方便的实现一些业务。这就是框架带来的好处，但是弊端就是不了解底层的实现，所有有利也有弊。个人观点：这些东西不一定要记得很熟，但是你必须知道有怎么个东西，才能在需要的时候想起来，找得到。