javascript事件学习笔记

最新推荐文章于 2024-05-21 21:29:52 发布

S117

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量236

点赞数

分类专栏： javascript学习笔记文章标签： javascript function div 浏览器 ie border

本文链接：https://blog.csdn.net/longtian1213/article/details/7840807

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、事件

当我们于浏览器中的页面进行交互的时候，事件就发生了！时间可能是我们在页面某个元素上单击鼠标，按下键盘按键或者加载一个页面，改变一个页面大小等等。

2、事件顺序

事件顺序是指javascript中事件的传播顺序，当我们在一个元素上单击鼠标的时候，就会发生鼠标单击事件，这个鼠标单击事件在javascript中会向其他元素传播，基本上有两种传播方式，一种是冒泡，传说这是IE唯一支持的事件传播类型，它很好理解，就像气泡一样，总是从发生的地方向上进行传播，一直传播到根节点；还有一种就是捕获，传说Netscape实现了它，它的意思就是当我们点击一个元素的时候，这时发生的鼠标事件首先从跟元素开始，然后一直传播到我们单击的元素，就像你往水中仍一块石头，石头肯定是从水面落到水底这么一个过程，一般我们编写javascript程序，都是在处理冒泡事件类型，很少会涉及捕获类型。

3、阻止事件传播

有时候我们不希望事件冒泡到其他节点，例如有一个外层的div，在这个DIV之下嵌套一个内层的div，如果两个div都注册了鼠标单击事件，那么当你在内存div单击鼠标的时候，外出div的鼠标单击事件也会触发，这样说可能不太形象，下面以一个例子来说明下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body id = "body">
		<div id = "outDiv" style = "width : 100xp ;height: 100px ;border: 1px solid black" οnclick="outDiv()">
			<div id = "innerDiv" style="width: 50px;height : 50px ; background-color: red" οnclick="innerDiv()">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function outDiv(){
			alert("out div");
		}
		function innerDiv(){
			alert("inner Div")
		}
	</script>
</html>

这个时候，如果你点击innerDiv，那innerDiv和outDiv这两个函数都会执行，这可能不是我们想要的结果，也许我们指向执行innerDiv，而不想执行outDiv，这时就要阻止冒泡行为，不让它把事件传播到outDiv，要阻止事件传播，在IE这样来做window.event.cancelBubble = true;在其他浏览器中则是event.stopPropagation();
4、为元素添加事件处理函数

为一个事件添加处理函数，基本上有三种方式，

第一种，就像上面写的那样，直接在html标签中添加，这样违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。传说从1998年开始，这种写法就过时了。所以我们也不要这么的写了！

第二种就是事件句柄的方式，就像下面这样：

		var innerDiv =document.getElementById("innerDiv");
		innerDiv.onclick = function(){
			alert("inner div");
		}

注意事件处理函数名称必须是小写的，还有就是只要在页面加载完毕时事件处理函数才会生效，但是要给元素注册多个监听器时，这招就不灵了，例如：

		var innerDiv =document.getElementById("innerDiv");
		innerDiv.onclick = function(){
			alert("inner div1");
		}
		innerDiv.onclick = function(){
			alert("inner div2");
		}

只有最后一个函数会起作用。

最后一种呢，就是注册事件监听器了，这也是比较推荐的方式，但是纯在IE和DOM两种注册类型，在IE中，要这样element.attachEvent("onevent",eventListener);删除事件监听器呢，就这样：element.dettachEvent("onevent",eventListener);第一个参数是事件类型，第二个参数是事件发生时的回调函数，在DOM标准下呢，要这样：

element.addEventListener('event', eventListener, useCapture);删除事件监听器要这样：element.removeEventListener('event', eventListener, useCapture);，第一个参数是事件类型，注意DOM标准下没有on，第二个是事件发生时回调函数，第三个取值是true/false，true表示是捕获事件类型，false表示是冒泡事件类型，默认是false

所以要写个跨浏览器的事件监听器基本上是这样的：

	function addEvent(node,type,handler){
		if(node.addEventListener){
			node.addEventListener(type,handler,false);
		}else if(node.attachEvent){
			node.attachEvent("on" + type,handler);
		}else{
			node["on" + type] = handler;
		}
	}
	function removeEvent (node,type,handler){
		if(node.removeEventListener){
			node.removeEventListener(type,handler,false);
		}else if(node.detachEvent){
			node.detachEvent("on" + type,handler);
		}else{
			node["on" + type] = null;
		}		
	}

5、event对象

在IE中，事件发生时，会有一个全局的event对象保持在window.event中，而其他浏览器采用W3C推荐的方法，使用独立的包含事件对象的参数传递，所以要跨浏览器获得事件对象引用要这样：

	function getEvent(event){
		return event || window.event;
	}

要获得事件发生的元素，在IE和其他浏览器中，也不相同，基本上可以通过下面方式获得

	function getTarget(event){
		event = event || window.event;
		return event.srcElemtn || event.target;
	}

S117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件学习笔记

1、事件当我们于浏览器中的页面进行交互的时候，事件就发生了！时间可能是我们在页面某个元素上单击鼠标，按下键盘按键或者加载一个页面，改变一个页面大小等等。2、事件顺序事件顺序是指javascript中事件的传播顺序，当我们在一个元素上单击鼠标的时候，就会发生鼠标单击事件，这个鼠标单击事件在javascript中会向其他元素传播，基本上有两种传播方式，一种是冒泡，传说这是I
复制链接

扫一扫

专栏目录