偷来的笔记---事件
第十一讲 事件
一、事件个体
二、事件整体
若调用方法，方法里不传参数，在标准浏览器里，会自动指定参数（浏览器的事件对象），
此事件对象e包含：鼠标位置，键盘的按键，此事件发生在哪个HTML元素上，当前的事件是什么事件
没有整体捕获事件，只能单独捕获键盘或鼠标...
e.clientX //鼠标X轴位置
e.target //触发到哪个元素，对于块级元素，js可以识别，如果是行内元素，则判断不出类型(可以用e.target.tagName)
e.type //事件类型（单击，双击...）
e.keyCode //按键值 回车-13；shift-16；ctrl-17；alt-18；左上右下-37 38 39 40；
例：
document.onkeydown = fn; //document.onclick = fn;获得鼠标点击事件 window.onkeydown（ie不支持）
function fn(e){
alert(e.keyCode);
}
三、事件兼容性
FF：e
IE：window.event;
e = e || window.event; //如果两值都有，传e
FF：e.addEventListener('事件',方法,false)
IE：e.attachEvent('事件',方法)
FF：e.removeEventListener('事件',方法,false)
IE：e.detachEvent('事件',方法)
四、事件的处理方法
1、DOM 0级事件绑定方式：
(1)写在HTML事件属性里：
<div id="d" onclick="fn()">fdsa</div>
function fn(){
alert(this);
}
===
document.getElementById('d').onclick = function(){fn()}
//window
PS：用setTimeout调用的方法，this指向window
(2)用js绑定：
document.getElementById('d').onclick = fn; //div
document.getElementById('d').onclick = function(){fn();fn2();fn3()}
缺点：运行成本，会被覆盖，不易移除
2、DOM 2级事件绑定方式：
o.addEventListener('鼠标事件',绑定函数,false) //false 冒泡方式处理事件，true 在捕获阶段处理（IE不支持） ；this会指向当前元素；事件不加on
o.removeEventListener('鼠标事件',绑定事件,false)
例：
function fn(){alert(this)}
o.addEventListener('click',fn,false)
function fnRemove(){removeEventListener('click',fn,false))
o.removeEventListener('click',fnRemove,false)
//先绑定，再移除，则不执行绑定
五、事件的传播：
FF：冒泡（false），捕获（从外向内true）
IE：冒泡
段落里不能套块级元素，可包含行内元素，表单元素（不能为form）
阻止事件传播：
FF：e.stopPropagation();
IE：e.cancelBubble = true;
function fn(e){
e = e || window.event;
if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble=true;
}
注：
写在<body onkeydown="onkey(event)">
必须写为event
==
FF：document.getElementsByTagName('body')[0].onkeydown = function(event){onkey(event)}
并且不用判断event = event || window.event;
六、DOM 2级绑定，this的指向问题
FF：DOM 2级绑定，this会指向当前元素
IE：DOM 2级绑定，this会指向window
IE9：attachEvent及addEventListener都支持
（会有事件传播）
七、apply和call
apply和call，功能一样，参数：
functionName.apply(元素,数组/集合) //fn.apply(ele,arguments)
functionName.call(元素,参数1,参数2,参数3...)
八、arguments
该对象代表正在执行的函数和调用它的函数的参数
方法固有的属性，是当前方法所有参数的集合（arrayLike类数组）
不定义形参也可以传参数
function fn(){...} //原型方法，预解释
var fnn = fn; //fnn变量表达式定义的方法，不预解释 可以用fn.caller看其原型方法
functionName.caller //方法的专有属性，指哪一个方法调用了“functionName”这个方法；顶层调用，则为null
arguments.callee //是arguments的，指方法原型是哪个
如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。
functionName.caller.toString()
arguments.length是实参长度，arguments.callee.length是形参长度
例：
function fn(){
alert(fn.caller)
}
function fnD(){
fn()
}
fnD() //function fnD(){fn()}
九、事件的顶级绑定
顶级绑定：不用阻止事件传播，不用每个元素都绑定，节省性能开销。FF：target；IE：srcElement。绑定后判断事件源
function fn(e){
e = e || window.event;
var target = e.target || e.srcElement;
...
}
