一、事件
1.事件对象：
1）事件三要素：
事件源
事件
事件处理程序
2）事件种类：鼠标事件，键盘事件，文本框事件，窗口事件
3） 没有事件触发，就没有事件对象。
事件对象的产生，是随着事件的触发和事件处理程序的执行而产生的。
产生的事件对象，与事件的触发者有关，还与事件的类型有关。
2.事件对象的兼容：
eve:ie8及以下，没有这个隐藏的事件对象参数
window.event:ie8及以下的事件对象
兼容方式：
var e = eve || event;
3.坐标属性：
e.pageX;获取鼠标距离浏览器可视区左边的x坐标位置+滚动条滚走的距离；
e.pageY;获取鼠标距离浏览器可视区上边的y坐标位置+滚动条滚走的距离；
e.cleintX;获取鼠标距离浏览器可视区左边的x坐标位置；
e.cleintY;获取鼠标距离浏览器可视区上边的y坐标位置；
e.offsetX;获取鼠标在元素上操作时的x方向偏移量（鼠标距离盒子的距离）
e.offsetY;获取鼠标在元素上操作时的y方向偏移量
e.layerX;//火狐使用 （x = e.offsetX || e.layerX;）兼容写法，了解，现在不用
e.layerY; //火狐使用 （x = e.offsetY || e.layerY;） 兼容写法，了解，现在不用
4.鼠标事件对象的button属性
onmousedown事件下触发,属性用来鉴别鼠标单击的是左中右键。
button 控制用户操作的按键
document.onmousedown = function(eve){
var e = eve || window.event;
alert(e.button);
}
左键 ： 0
滚轮 ： 1
右键 : 2
ie8及以下：
左键 ：1
滚轮 ：4
右键 : 2
兼容处理：
function getButton(eve){
if(eve){
return eve.button;
}else if(window.event){
var button = window.event.button;
switch(button){
case 1 :
return 0;
case 4 :
return 1;
case 2 :
return 2;
}
}
}
5、键盘事件对象的属性
keyCode：获取键盘对应的ASCII码值
1)onkeydown事件下，获取字母键都是大写字母对应的ASCII码值。也可以获取功能键对应的ASCII码值。
document.onkeydown = function(e){
var e = e || event;
alert(e.keyCode);
}
e.ctrlKey e.shiftKey e.altKey 功能键，当键盘按下对应时返回true布尔值
组合键触发：e.altkey&&e.keyCode==13(enter键的键码为13)
2）onkeypress事件下，可以识别字母键输入的大小状态值。除了空格键和enter键其他功能键都不触发。
document.onkeypress = function(e){
var e = e || event;
alert(e.keyCode);
}
组合键触发：onkeypress事件下e.keyCode为10
e.ctrlkey&&e.keyCode==10(enter键的键码为10)
keyCode的兼容：
e.keyCode在火狐下的onkeypress事件下，所有的字符键返回的都是0
兼容代码：
document.onkeypress = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
}
6.事件流
两种现象：
1）一种是事件冒泡
当父子元素都绑定的同一个事件，
将会从里往外触发同一个事件。
解决：阻止事件冒泡：
e.stopPropagation();//说明是现代浏览器
e.cancelBubble = true;//说明是ie8及以下浏览器
console.log(e.stopPropagation);
输出的是一个函数，（函数输出的值都是true） 
兼容：
function stopPropaG(e){
if(e.stopPropagation){
//说明是现代浏览器
e.stopPropagation();
}else{
//说明是ie8及以下浏览器
e.cancelBubble = true;
}
}
2）另一种是事件捕获:从父元素向子元素触发
（笔记在第9点里面）
执行原理：从父到子（由外到内）。
box2.addEventListener("click",function(){
alert("box2捕获");
},true)
document.addEventListener("click",function(){
alert("document捕获");
},true)(你点击了box2，先弹出box2捕获，再弹出document捕获)
7.阻止事件默认行为
现代浏览器: e.preventDefault();
ie8及以下：returnValue = false;
兼容：e.preventDefault ? e.preventDefault() : e.returnValue = false;
事件执行函数最后加 return false阻止默认行为，所有浏览器都兼容
举例子：
<body>
<a id="btn" href="http://www.baidu.com">百度一下，你就知道</a>
</body>
<script type="text/javascript">
btn.onclick = function(e){
var e = e || event;
//e.preventDefault();
//e.returnValue = false;
//e.preventDefault ? e.preventDefault() : e.returnValue = false;
preventDefautEvent(e);
alert("点击了")；
//return false;
}
</script>
兼容模式：
function preventDefautEvent(e){
return e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
8.事件绑定
1）obj.onclick = function(){};
2） 行内事件 <div 事件= "函数名()"></div>
<div id="box" οnclick="fn()">
function fn(){
alert（this）；//这里的this是window
}
要想this指向指向box则要传一个参数
如：<div id="box" οnclick="fn(this)">//实参
function fn(obj){//形参
alert(obj.innerHTML)
}
3.）事件监听 事件源.addEventListener(没有on的事件，回调函数（事件执行处理程序），true/false); 第三个参数，是捕获或冒泡 true是捕获 false是冒泡（默认）
9..事件监听addEventListener() 高版本浏览器
1）事件监听的好处：
a.可以为一个元素绑定多次同一个事件,先后触发。
b.程序员可以使用事件监听方式 确定 触发的事件过程是冒泡还是捕获
2）事件监听与传统事件绑定的区别
a. 传统事件绑定，不能有多个，后面的会覆盖前面的
document.onclick = function(){
alert(1);
}
document.onclick = function(){
alert(2);
}//2
事件监听可以为一个元素绑定多次同一个事件,，先后触发。
document.onclick = function(){
alert(1);
}
document.onclick = function(){
alert(2);
} // 1,2
b.传统事件绑定，只有冒泡
事件监听，除了能执行冒泡还能执行捕获。
注意：如果同一元素既有捕获监听，又有冒泡监听，优先执行捕获。
捕获和冒泡现象发生的前提条件：父子元素都绑定了同一事件。
兼容：ie8以及下事件监听：document.attachEvent("on+事件",function(){});没有第三个 参数 没有捕获或冒泡的区分
兼容事件监听函数（冒泡） 事件源 事件
function addEvent( obj , type ,callBack ){
if( obj.addEventListener ){
obj.addEventListener( type , callBack );
}else{
obj.attachEvent( "on" + type , callBack );
}
}
扫一扫
2384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
