1. 鼠标事件
事件： 系统中提供给我们的函数，这个函数会在某个动作发生的时候出发
函数中要做的内容是由我们决定的。
1.1 鼠标事件：
-
onclick鼠标点击事件 -
ondbclick鼠标双击事件 -
onmousedown鼠标按下事件 -
onmouseup鼠标抬起事件 -
onmousemove鼠标移动事件 -
onmouseover鼠标移入事件 -
onmouseout鼠标移出事件 -
onmouseenter鼠标进入事件 -
onmouseleave鼠标离开事件、
onmousemove事件是只要鼠标移动就会触发，这个触发的频率与浏览器和BIOS有关
1.2 onmouseover/onmouseout与onmouseenter/onmouseleave的区别
onmouseover和onmouseout事件中如果触发元素下面有子元素的话，会发生事件传递，也就是会把自己的事件传递个子级。
onmouseenter/onmouseleave 事件里如果有子级元素的话，事件不会被传递。
2.焦点事件
2.1 onfocus
onfocus 当有焦点元素获取到焦点的时候会出发，使用tab键也会出发这个事件
支持onfocus事件的对象有：button, checkbox, fileUpload, layer , frame , password , radio , reset , select , submit , text , textarea , window
2.2 onblur
onblur 当有焦点的元素失去焦点的时候会出发
tabindex属性可以设置tab键点击时焦点切换的顺序
2.3 设置焦点
-
focus()
元素有焦点时可以使用这个方法
作用： 让这个元素获取到焦点 -
blur()
元素有焦点的时候可以使用跟这个方法
作用:让这个元素失去焦点
3. 键盘事件
键盘事件是当键盘按下的时候会出发的事件
3.1 onkeydown
onkeydown事件会在键盘按下的时候出发，如果键盘没有抬起，那么会一直触发。
如果键盘按下没有抬起，那么onkeydown事件会一直触发，但是第一次事件出发后与第二次事件触发前有一个微小的间隔，这个间隔是由于主板设定导致的（类似在输入法里长按一个字母键的效果）
3.2 onkeyup
onkeyup事件会在键盘抬起的时候触发。如果需要使用键盘事件但是又不希望事件连续触发，那么可以使用onkeyup。
3.3 onkeypress
onkeypress事件会在键盘按下非功能键时触发（数字和字母键），如果摁下的是上下左右、ctrl、alt、shift之类的功能键，这个事件是不会被触发的。
4. select()
选中表单里的内容
如果挺尸出现多个select()，那么只会只会选中最后一个
window.onload=function(){
var text=document.getElementById("text");
var textArea=document.getElementById("textArea");
var btn=document.getElementById("btn");
btn.onclick=function(){
text.select();
textArea.select(); //这里点击按钮的时候，textarea会被选中。
};
};
5.event 事件对象
event对象记录了在事件触发时的一些详细信息，例如鼠标位置，键盘按键，触发事件的元素等。
一个事件发生的时候，这个事件可能会是鼠标事件也可能是键盘事件，所以说，事件对象是不同的。
事件对象是事件处理函数中的第一个参数
注意：event有兼容性问题，在IE和chrome下可以直接使用event，在firefox下需要使用参数
document.onclick = function(ev){
var ev = ev || event ; //可以使用这种方法来做兼容处理
}
6. event.cilentX / event.clientY
6.1 event.cilentX
鼠标在X轴上的位置，相对于可视区域左侧的距离
6.2 event.clientY
鼠标在Y轴上的位置，相对于可视区域顶部的距离
document.onmousemove = function(ev){
var ev = ev || event;
console.log(ev.clientX,ev.clientY);
}
7.target 事件源对象
在鼠标事件出发时，指向出发该事件的目标。
它找到的是触发这个事件的最里层的元素，它会一层一层往里面找，直到找到最里层的元素，但是鼠标点击的时候，鼠标的位置必需在这个最里层元素身上
target可以用在事件代理/事件委托
window.onload = function () {
var list = document.getElementById("list");
var lis = list.getElementsByTagName("li");
//一般我们需要给所有的li加上事件会使用for循环
for(var i=0; i<lis.length; i++){
lis[i].onclick = function () {
this.style.background = "red";
}
}
//但是用for循环的时候，如果再使用innerHTML添加了新内容，那么所有事件都会被清空
//list.innerHTML+= "<li>Glod</li>";
//因为innerHTLM会首先清空所有的内容，然后在重新添加。
// 当我们使用事件委托的时候，就不存在这种顾虑了
list.onclick = function (ev) {
ev = ev || event;
ev.target.style.background = "red";
};
//这时，事件是给list添加的，list里面添加内容与list本身无关，所以无论list的子级做什么改动，都能继续触发这个事件
//触发事件的是点击的最里层的元素
list.innerHTML+= "<li>Glod</li>";
}
8. 键盘事件对象
当键盘事件被出发的时候，会产生一个键盘事件相关信息的对象。
8.1 event.keyCode
返回键盘摁下的那个键对应的unicode码
鼠标点击时，也有这个事件
8.2 event.ctrlKey
事件触发时，判断ctrl是否被摁下，返回true和false
8.3 event.shiftKey
事件触发时，判断shift是否被摁下，返回true和false
8.4 event.altKey
事件触发时，判断alt是否被摁下，返回true和false
网友评论