JS事件监听总结

最新推荐文章于 2024-09-20 16:06:21 发布

hi_beijing

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量172

点赞数

分类专栏： JavaScript 文章标签： xhtml

本文链接：https://blog.csdn.net/hi_beijing/article/details/84320802

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body style="height:2000px;">
定义:
事件类型：是一个用来说明发生什么类型事件的字符串；
事件目标：是发生的事件或与之相关的对象，常见的事件目标有window Document Element等；
事件处理程序或事件监听程序是处理或响应事件函数；
当对象上注册的事件处理程序被调用时，我们会说浏览器"触发"和"派生"了事件；
事件对象：是与特定事件相关且包含有关该事件详细信息的对象；如（this 或触发这个事件的对象）
事件传播：是浏览器决定哪个对象触发其事件处理程序的过程；

Winow事件：
window.load;
window.unload;
window.focus;
window.blur;
window.scroll;
window.resize;

<img id="img"/>有load error事件;



如果一个对象上注册了多个事件处理程序，调用它们的顺序如下：
1.通过设置对象属性
2.通过HTML标签属性
3.注册的事件处理程序按照他们的注册程序调用

<div id="div" style="width:100px; height:30px; background-color:red;" ></div>
<input id="add" type="button" value="添加监听"/>
<input id="del" type="button" value="取消监听"/>
<script>
	var div = document.getElementById("div");
	//创建监听器
	function bind(o,type,callback)
	{
		if(o.addEventListener)
		{
			o.addEventListener(type,callback,false);
		}else if(o.attachEvent)
		{
			o.attachEvent("on"+type,callback);
			/*
			下面的这种方式不能删除注册的监听器
			*/
			//o.attachEvent("on"+type,function(event){
			//		return callback.call(o,event);
			//	});
		}else
		{
			o["on"+type] = callback;	
		}
	}
	//取消监听器
	function unbind(o,type,callback)
	{
		if(o.removeEventListener)
		{
			o.removeEventListener(type,callback,false);
		}else if(o.detachEvent)
		{
			o.detachEvent("on"+type,callback);
		}else
		{
			delete o["on"+type];	
		}
	}
	//事件处理程序
	/*
	事件处理程序分为三类：
		一：设置通过JS对象属性为事件处理程序  如：target.οnclick=function(){}
		二：设置HTML标签属性为事件处理程序   如：<p onclic="alert()"></p>
		三：是通过注册监听器为事件处理程序    如：target.addEventListener()
	*/
	var c = function(){
		alert(this.id);
		//这里的this是事件目标
	}
	function adds()
	{
 		
		bind(div,"click",c);
	}
	function dels()
	{
		unbind(div,"click",c);

	}
	window.οnlοad=function()
	{		
		var add = document.getElementById("add");
		var del = document.getElementById("del");	
		bind(add,"click",adds);	
		bind(del,"click",dels);	
		
	}
 
	function loads()
	{
		
	}
	bind(window,"load",loads);
	//获取鼠标移动事件
	//return event.target || event.srcElement;
	document.body.onmousemove = function(event)
	{
		
		var event = event || window.event;
		div.innerHTML = event.clientX + " == "+event.clientY;
	}
	//window.οnblur= function(){alert("失去");}
	//window.οnfοcus= function(){alert("获得");}
	
	//加载图片
	var img = new Image();
	img.src = "http://i2.letvimg.com/img/201204/24/ListLogo.png";
	img.οnlοad=function(){
		//alert("图片加载完成");
		document.getElementById("img").src = this.src;
	}
	
	//键盘事件按下时
	document.body.onkeydown = function(event)
	{
		var event = event || window.event;
		//event.altKey && event.shiftKey;
		div.innerHTML = event.keyCode;
	}
	
	//添加文本节点
	var text = document.createTextNode("asdfasdf");
	document.body.appendChild(text);
	
	//给style添加属性
	div.style.cssText = "margin:0px;";
	var padding = "padding:0px;";
	div.style.cssText += padding;
</script>

</body>
</html>