事件

Q:1.什么是事件?

A:事件分为两部分:⬇️⬇️
事件是异步执行的 (定时器,回调函数,绑定的事件,ajax)

①.行为本身:浏览器天生就赋予其行为

onclick , onmouseover(onmouserenter) , onmouseout(onmouseleave) , 鼠标移入移出
,onmousemove , onmousedown , onmouseup , onmousewheel(鼠标滚动行为)
,onscroll(滚动条滚动行为) , onresize(window.onresize浏览器的窗口大小改变事件)
, onload , onunload , onfoucus(文本框获取焦点行为) ,
onblur(文本框失去焦点行为) ,
onkeydown , onkeyup(键盘的按下和抬起行为)....

哪怕我没有给上述行为绑定方法,事件也是存在的,当我们点击这个盒子的时候,同样会触发它的onclick行为,只是什么事情都没做而已

---

②.事件绑定:给元素绑定某一个行为绑定方法有两种:⬇️

DOM零级事件绑定:⬇️

oDiv.onclick=function(){
当我们触发oDiv的click行为的时候,会把绑定的这个函数执行
}
onclick这个行为定义在当前元素的私有属性上

DOM二级事件绑定:⬇️

oDiv.addEventlistener("click",function(){
console.log("ok")
},false)
addEvrntListener这个属性定义在当前元素所属EventTarget这个类的原型上的

---

知识点1.

我们是吧匿名函数定义部分当做一个值赋给oDiv的点击行为(这叫函数表达式) , 我们触发#div1的点击行为的时候,会执行对应绑定上的方法

---

重要!不仅仅把绑定的方法执行了,而且浏览器还默认的给这个方法传递了一个参数值-->MouseEvent:鼠标事件对象

1. 他是一个对象数据类型的值,里面包含了很多的属性名和属性值,这些都是记录鼠标的行为信息的.
2. MouseEvent-->UIEvent-->Object
3. MouseEvent-->记录的是页面中唯一一个鼠标每一次触发时候的相关信息,和到底是在哪个元素上触发的没有关系

知识点2

关于事件对象MouseEvent的兼容问题

1. 事件对象本身的获取存在兼容性问题:标准浏览器中是浏览器给方法传递参数,我们只需要定义形参e就可以获取到:在IE6~8中浏览器不会给方法传递参数,我们如果需要的话,需要window.event中获取查找;

oDiv.onclick=function(){
console.dir(arguments);
};
document.body.onclick=function(e){
console.dir(e);
};

兼容写法:
oDiv.onclick=function(e){
e=e||window.event;
}

信息记录里面的各种属性
e.type:存储的是当前鼠标触发的行为类型"click"

e.clientX / clientY :当前鼠标触发点距离当前屏
幕左上角的x/y轴的坐标值

e.taget:事件源,表示当前鼠标触发的是哪个元素,那么他存储的就是哪元素,但是在ie6~8中不存在这个属性(值是Undefined),我们使用e.srcElement

e.target=e.target||e.srcElement;
⬇️
document.body.onclick=function(e){e=e||window.event;
e.target=e.target||e.srcElement;
console.log(e.target);
}

e.pageX / e.pageY:当前鼠标出发点距离body左上角(页面第一屏最左上端)的X/Y坐标,但是在ie6~8中没有这个属性,我们通过过使用clientY+滚动条卷去的高度来获取也可以⬇️

e.pageX=e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
e.pageY=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop))

e.preventDafault:阻止浏览器的默认行为

例如a标签默认行为就是跳转页面,但是我们有时候使用a标签,只是想用的特殊性,并不想点击时跳转
var linkeList=document.getELementsByYagName("a");
for(var i=0;i<linkList.length;i++){
linkList[i].onclick=function(e){
e=e||window.event;
e.prevrntDefault?e.preventDefault():e.returnValue=false;⬇️
或者 return false; 在a标签中和上述代码效果一样,都是在阻止默认的行为
再或者直接在行内写"javascript:;"或者javascript:void=0
}
}

e.stopPropagation:阻止事件的冒泡传播,在ie6~8下不兼容,可以使用e.cancelBubble=true来代替

e.stopPropaggation?e.stopPropagation():e.cancelBubble=true;

KeyboardEvent键盘事件属性
e.keyCode: 当前键盘上每一个键对应的值
空格键(space)->32
退格键(Backspace)->8
回车键(Enter)->13
删除键(Del)->46
四个方向键->左37 上38 右39 下40
......

var input1=docuemnt.getElementById("input1");
input1.onkeyup=function(e){
e=e||window.event;
console.log(e.keyCode)
}