事件

• JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。
• 事件一般是用于浏览器和用户操作进行交互。
• JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。 

内联模型 ：事件处理函数是HTML标签的一个属性，用于处理指定事件。

<input type="button" value="按钮" οnclick="alert('Lee');"  />

<input type="button" value="按钮" οnclick="box();"  />

 脚本模型：js与HTML分离

var input = document.getElementsByTagName('input')[0];//得到input对象
input.onclick = function () {						//匿名函数执行
		alert('Lee');
	};

 事件处理函数的类型有：鼠标事件、键盘事件、HTML事件

事件处理函数	影响的元素	何时发生
onkeydown	文档、图像、链接、表单	当按键被按下时
onkeypress	文档、图像、链接、表单	当按键被按下然后松开时
onkeyup	文档、图像、链接、表单	当按键被松开时
onload	主题、框架集、图像	文档或图像加载后
onunload	主体、框架集	文档或框架集卸载后
onmouseout	链接	当图标移除链接时
onmouseover	链接	当鼠标移到链接时
onmove	窗口	当浏览器窗口移动时

事件处理函数	影响的元素	何时发生
onreset	表单复位按钮	单击表单的reset按钮reset按钮
onresize	窗口	当选择一个表单对象时
onselect	表单元素	当选择一个表单对象时
onsubmit	表单	当发送表格到服务器时

事件处理函数	影响的元素	何时发生
onabort	图像	当图像加载被中断时
onblur	窗口、框架、所有表单对象	当焦点从对象上移开时
onchange	输入框，选择框和文本区域	当改变一个元素的值且失去焦点时
onclick	链接、按钮、表单对象、图像映射区域	当用户单击对象时
ondblclick	链接、按钮、表单对象	当用户双击对象时
ondragdrop	窗口	当用户将一个对象拖放到浏览器窗口时
onError	脚本	当脚本中发生语法错误时
onfocus	窗口、框架、所有表单对象	当单击鼠标或者将鼠标移动聚焦到窗口或框架时

 鼠标事件：页面所有元素都可触发

click：当用户单击鼠标按钮。
	input.onclick = function () {
		alert('Lee');
	};

dblclick：当用户双击主鼠标按钮时触发。
	input.ondblclick = function () {
		alert('Lee');
	};

mousedown：当用户按下了鼠标还未弹起时触发。
	input.onmousedown = function () {
		alert('Lee');
	};

mouseup：当用户释放鼠标按钮时触发。
	input.onmouseup = function () {
		alert('Lee');
	};

mouseover：当鼠标移到某个元素上方时触发。 mouseenter
	input.onmouseover = function () {
		alert('Lee');
	};

mouseout：当鼠标移出某个元素上方时触发。  mouseleave
	input.onmouseout = function () {
		alert('Lee');
	};

mousemove：当鼠标指针在元素上移动时触发。
	input.onmousemove = function () {
		alert('Lee');
	};

 键盘事件

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。
	document.onkeydown = function (e) {
		alert('Lee');
	};

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。
	document.onkeypress = function () {
		alert('Lee');
	};

keyup：当用户释放键盘上的键触发。
	document.onkeyup = function () {
		alert('Lee');
	};

HTML事件 

select：当用户选择文本框(input或textarea)中的一个或多个字符触发。
	input.onselect = function () {
		alert('Lee');
	};

change：当文本框(input或textarea)内容改变且失去焦点后触发。
	input.onchange = function () {
		alert('Lee');
	};

focus：当页面或者元素获得焦点时在window及相关元素上面触发。
	input.onfocus = function () {
		alert('Lee');
	};

blur：当页面或元素失去焦点时在window及相关元素上触发。
	input.onblur = function () {
		alert('Lee');
	};
submit：当用户点击提交按钮在<form>元素上触发。
	form.onsubmit = function () {
		alert('Lee');
	};

reset：当用户点击重置按钮在<form>元素上触发。
form.onreset= function () {
		alert('Lee');
	};

resize：当窗口或框架的大小变化时在window或框架上触发。
	window.onresize = function () {
		alert('Lee');
	};

scroll：当用户滚动带滚动条的元素时触发。
	window.onscroll = function () {
		alert('Lee');
	};

load：页面重新加载

事件绑定 

事件流类型： 事件冒泡流、事件捕获流

添加监听事件

             dom对象.addEventListener(参数1，参数2，参数3)
             参数1：事件名  不带on
             参数2：函数  事件触发后调用函数
             参数3：布尔值   事件流类型  默认false（事件冒泡流）  true（事件捕获流）

删除监听事件

             dom对象.removeEventListener(参数1，参数2，参数3)
             参数1：事件名  不带on
             参数2：函数  事件触发后调用函数
             参数3：布尔值   事件流类型  默认false（事件冒泡流） true（事件捕获流）

 IE事件处理函数

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()

区别：

• 1.IE不支持捕获，只支持冒泡；
• 2.IE中的this指向的是window而不是DOM对象。
• 3.在传统事件上，IE是无法接受到event对象的，但使用了attachEvent()却可以，但有些区别。

window.attachEvent('onload', function () {
	var box = document.getElementById('box');
	box.attachEvent('onclick', toBlue);
});

function toRed() {
	var that = window.event.srcElement;
	that.className = 'red';
	that.detachEvent('onclick', toRed);
	that.attachEvent('onclick', toBlue);
}

function toBlue() {
	var that = window.event.srcElement;
	that.className = 'blue';
	that.detachEvent('onclick', toBlue);
	that.attachEvent('onclick', toRed);
}

IE 事件里面的this==window

window.attachEvent('onload', function () {
	var box = document.getElementById('box');
	box.attachEvent('onclick', function () {
		alert(this === window);	   //this指向的window
	});
});

 IE 事件里面的传递dom元素

window.attachEvent('onload', function () {
	var box = document.getElementById('box');
	box.attachEvent('onclick', function () {		
		fn1.call(box);		//把this直接call过去
	});
});

function  fn1() {
	alert(this.tagName);
}

 IE 无法通过传参接受event对象

在传统绑定上，IE是无法像W3C那样通过传参接受event对象，但如果使用了attachEvent()却可以

box.onclick = function (evt) {
		alert(evt);     //
}
box.attachEvent('onclick', function (evt) {
	alert(evt);		//object
    alert(evt.type);	//click	
});
box.onclick = function (evt) {
	alert(evt);     //undefined
}
box.attachEvent('onclick', function (evt) {
	alert(evt);		//object
    alert(evt.type);		//click	
});
box.attachEvent('onclick', function (evt) {
	alert(evt.srcElement === box);		源目标	//true
	alert(window.event.srcElement === box);	//true
});

 IE&W3C事件兼容

function addEvent(obj, type, fn) {				//添加事件兼容
	if (obj.addEventListener) {
		obj.addEventListener(type, fn);
	} else if (obj.attachEvent) {
		obj.attachEvent('on' + type, fn);
	}
}

function removeEvent(obj, type, fn) {			//移除事件兼容
	if (obj.removeEventListener) {
		obj.removeEventListener(type, fn);
	} else if (obj.detachEvent) {
		obj.detachEvent('on' + type, fn);
	}
}

 IE&W3C事件兼容--得到事件目标

function getTarget(evt) {						//得到事件目标
	if (evt.target) {
		return evt.target;
	} else if (window.event.srcElement) {
		return window.event.srcElement;
	}
}

注意：调用忽略，IE兼容的事件，如果要传递this，改成call即可。

注意：IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用，有几个原因：

• 1.IE9就将全面支持W3C中的事件绑定函数；
• 2.IE的事件绑定函数无法传递this；
• 3.IE的事件绑定函数不支持捕获；
• 4.同一个函数注册绑定后，没有屏蔽掉；
• 5.有内存泄漏的问题。

IE：fromElement     &W3C：relatedTarget

在W3C提供了一个属性：relatedTarget；这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移出的DOM对象。

• relatedTarget 事件属性返回与事件的目标节点相关的节点。
• 对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
• 对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
• 对于其他类型的事件来说，这个属性没有用。

box.onmouseover = function (evt) {		//鼠标移入box
	alert(evt.relatedTarget);		/获取移入box最近的那个元素对象
	}										//span

box.onmouseout = function (evt) {		//鼠标移出box
	alert(evt.relatedTarget);		//获取移出box最近的那个元素对象
	}										//span
box.onmouseover = function (evt) {			/	/鼠标移入box
	alert(window.event.fromElement.tagName);		//获取移入box最近的那个元素对象span
}

box.onmouseout = function (evt) {				//鼠标移入box
	alert(window.event.toElement.tagName);		//获取移入box最近的那个元素对象span
}

浏览器兼容

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的。

function getRelatedTarget(evt) {
	var e = evt || window.event;				//得到事件对象
	if (e.srcElement) {						//如果支持srcElement，表示IE
		if (e.type == 'mouseover') {				//如果是over
			return e.fromElement;			//就使用from
		} else if (e.type == 'mouseout') {			//如果是out
			return e.toElement;			/就使用to
		}
	} else if (e.relatedTarget) {				//如果支持relatedTarget，表示W3C
		return e.relatedTarget;
	}

 阻止事件的默认行为

有时我们需要阻止事件对象的默认行为，比如：一个超链接的默认行为就点击然后跳转到指定的页面。那么阻止默认行为就可以屏蔽跳转的这种操作，而实现自定义操作。
方法一：
link.onclick = function () {
	alert('Lee');
	return false;	//直接给个假，就不会跳转了。
	};

方法二：
W3C:evt.preventDefault();	
IE:evt.returnValue = false
returnValue是javascript中html的window对象的属性,目的是返回窗口值

function prevDefault(evt) {
	var e = evt || window.event;
	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;//ie
	}
};

拖放案例：抓取对象以后拖到另一个位置

思路：

1,把要拖放的元素变成可拖动的元素，加属性draggable=true（是否能拖动）

2,要拖动的元素要有事件 ondragstart，开始拖动（怎么拖动）

3,拖动后，要找目标放到哪，目标要有事件   ondragover（拖动到目标上方）

  ondrop（鼠标松开放下）（拖动后放到哪）

所用知识点：

1，属性：draggable

2，事件：ondragstart,ondragover,ondrop

3,   ev.dataTransfer.setData(“Text”,元素id)    //数据传递属性，以文本的形式存放起来

4，ev.dataTransfer.getData("Text")

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

鼠标滚轮 

鼠标滚轮(mousewheel)和DOMMouseScroll，用于获取鼠标上下滚轮的距离。判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

addEvent(document, 'mousewheel', function (evt) {		//非火狐
	alert(getWD(evt));//往上滚动120，往下滚动-120
});
addEvent(document, 'DOMMouseScroll', function (evt) {	//火狐
	alert(getWD(evt));
});
function getWD(evt) {
	var e = evt || window.event;
	if (e.wheelDelta) {
		return e.wheelDelta;
	} else if (e.detail) {
		return -e.detail * 40;				//保持计算的统一
	}
}

 阻止事件的默认行为---阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

取消事件冒泡，在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事 件；event.cancelBubble=true;可以停止事件继续上传补充一点，IE的事件传递是从下到上的：

事件来源对象->上级对象->上上级对象->.....->body->document->window

兼容写法
function cBuble(evt){
	var e=window.event||evt;
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble=true;
	}
}

上下文菜单事件 

当我们右击网页的时候，会自动出现windows自带的菜单。那么我们可以使用contextmenu事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉。

var text = document.getElementById('text');
	addEvent(text, 'contextmenu', function (evt) {
		var e = evt || window.event;
		preDef(e);
		var menu = document.getElementById('menu');
		menu.style.left = e.clientX + 'px';
		menu.style.top = e.clientY + 'px';
		menu.style.visibility = 'visible';
		
		addEvent(document, 'click', function () {
			document.getElementById('myMenu').style.visibility = 'hidden';
		});

卸载前事件

这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。

addEvent(window, 'beforeunload', function (evt) {

     preDef(evt);

});

手机事件 

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控)

事件属性

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

clientX/ clientY：// 触摸点相对于浏览器窗口viewport的位置

pageX / pageY：// 触摸点相对于页面的位置

screenX/screenY ://触摸点相对于屏幕的位置     

上面三者表示动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）

e.targetTouches[0].pageX 获取到 触摸点相对页面的x坐标