JavaScript 事件高级

标题事件高级

标题一、事件对象event

1、事件处理函数：
事件发生时调用的函数，document.onclick = function(){}
2、事件对象event：
特殊的内置对象，当事件发生的时候，浏览器会将所有和事件相关的信息（事件类型，鼠标位置，操作对象）存储在事件对象中
<1>、 chrome，ie获取事件对象：window.event ,window可以省略

<2>、低版本火狐：火狐的事件对象，事件发生的时候，浏览器会将事件对象 ， 通过事件处理函数的第一个参数传入
eg： document.onclick = function(ev){
console.log(window.event); //事件对象，
console.log(ev); //ff
//兼容
var oEvent = window.event || ev; 但现在一般不需要传参了，火狐可以自动更新，直接在事件中用event。
console.log();
}
<3>、事件对象属性：

• type：获取事件的类型
• target：事件目标，事件真正发生的元素 eg:console.log(event.target || event.srcElement)兼容ie8-
• clientX，clientY：鼠标的位置，相对屏幕（一般用这个）
• pageX，pageY：鼠标的位置，相对于页面
• ctrlKey，shiftKey，altKey：功能键， 事件发生的时候，有没有按住这个功能键，若 按了——true，没按——-false。

二、事件绑定与取消
1、事件绑定
<1>、 为什么需要使用事件绑定 多个 同名的事件重名会覆盖
//员工1
oDiv.onclick = function(){
console.log(“1”);
}
//员工2
oDiv.onclick = function(){
console.log(“2”);
}
//运行完以后，只打印2，给同一个标签添加同一个事件，后面的会覆盖前面
<2>、 事件绑定的语法

• 标准浏览器：标签.addEventListener（事件类型(不加on），事件处理函数，是否捕获）
• ie浏览器：标签.attachEvent(事件类型（加on），事件处理函数）

标准浏览器：标签.addEventListener(事件类型[不加on],事件处理函数,是否捕获)
oDiv.addEventListener(“click”,fun1);
oDiv.addEventListener(“click”,fun2);

ie浏览器：标签.attachEvent（事件类型[加on],事件处理函数）
oDiv.attachEvent("onclick",fun1);
oDiv.attachEvent("onclick",fun2);

标准浏览器和ie浏览器事件绑定的区别：
标准：
有捕获
不加on
顺序执行
this–触发事件的对象
ie：
没有捕获
加on
倒序执行
this–window

兼容
if(oDiv.addEventListener){
oDiv.addEventListener(“click”,fun1);
}else{
oDiv.attachEvent(“onclick”,fun1);
}

事件绑定函数的封装
function bind(elem,type,fun){
if(elem.addEventListener){
elem.addEventListener(type,fun);
}else{
elem.attachEvent(“on”+type,fun);
}
}

2、事件取消
比如：一天只能抽一次奖的事件，有些事件只让它发生一次

事件添加 事件取消
标签.事件 标签.事件 = null;
标签.addEventListener 标签.removeEventListener(事件类型，事件处理函数，是否捕获)
标签.attachEvent 标签.detachEvent(事件类型，事件处理函数)

点击抽奖，只让这个点击事件发生一次

封装取消绑定事件函数

三、事件流（事件冒泡与事件捕获）

<1>、 事件捕获机制：（从父到子）window ——确定的事件目标

<2>、 事件冒泡机制：（从子到父） 具体发生的事件——window

ie没有捕获，js就是在冒泡环境下处理事件
阻止事件冒泡的语法：如出现对代码造成影响，不能正常显示的，就要阻止事件冒泡

• 标准：event.stopPropagation()
• ie:event.cancelBubble = true;

若要阻止的事件冒泡在绑定事件中，则将要阻止的事件冒泡写在fun处理函数中。
四、事件默认行为
<1>、标签.事件 return false
<2>、事件绑定阻止：

• 标准浏览器阻止默认行为：event.preventDefault()
• ie浏览器阻止默认行为：event.returnValue = false;

js中元素要移动，就得用定位，在css中用定位，在js中调整top，left的值

五、键盘事件

<1>、 键盘事件 onkeydown——按下 onkeyup——抬起 onkeypress——按下，区分大小写

• 注意：键盘事件不能加给window，ie不识别，最多只能加给document，若有具体的事件目标就加给事件目标，没有就加给document。
• 属性：
  • keyCode：按键编码，不区分大小写，统一用大写编码
  • ctrlKey，altKey，shiftKey：有没有按住这个键，按了true 没有false

键盘控制div移动的事件

六、滚轮事件
1.添加事件
chrome，ie： 标签.onmousewheel
ff：必须使用事件绑定添加 标签.addEventListener(“DOMMouseScroll”,事件处理函数)

2.滚动方向
chrome，ie： ev.wheelDelta : 120：上 -120：下
ff（火狐）: ev.detail -3:上 3：下

封装的滚轮事件函数

滚轮事件的例子：图片的放大缩小

七、事件委托（事件代理）
事件委托(事件代理)
将事件添加给父元素，当事件发生的时候，通过target找到具体的子元素去处理事件
eg：
var oUl = document.getElementsByTagName(“ul”)[0];
oUl.onclick = function(ev){
var ev = window.event || ev;
//找子元素
var target = ev.target || ev.srcElement; //ie
console.log(target.nodeName); //“LI”
if(target.nodeName == “LI”){
target.style.background = “red”;
}
例子：作业2