这篇文章是我自己在学习js过程中做的笔记,如果有错误或者遗漏的请评论告诉我。希望大家一起学习!
笔记内容主要有:事件的要素、事件分类、事件对象
- 事件三要素:
1.事件源 -- 发生在哪里
2.事件句柄 -- 发生事件的类型
3.事件处理函数 - 事件发生时执行的函数
- 事件分类:
鼠标事件:
onclick:点击事件
oncontextmenu:鼠标右键事件
onmouseover:移入事件
onmouseout:移出事件
onmousemove:移动事件
ondbclick:双击事件
onmousedown:鼠标按下
onmouseup:鼠标抬起
键盘事件:
onkeydown:按键按下(未抬起)
onkeyup:按键抬起
表单事件:
oninput:文本框输入
onsubmit:表单提交事件
onfocus:一个表单项获得焦点
onblur:一个表单项失去焦点
onchange:一个表单项内容的改变(通常用于select选项值的改变)
onrest:表单重置事件
窗口事件:
onload:网页加载完毕时发生
注意:后面onload事件的会替代前面的
以上事件我只记录了些比较常用的。
- 事件对象(event):
event代表事件的状态 event对象只在事件发生的过程中才有效。事件发生时产生的一个对象,包含所有事件相关的信息
例:
在触发一个元素的点击事件时,event对象内会记录下一些的属性值
比如:
target:触发此事件的元素
button:那个鼠标被点击
clientX,clientY:距离浏览器的坐标
screenX,screenY:距离屏幕的坐标
offsetX,offsetY:距离事件源的坐标
等...
事件的生命周期:
开始时间:事件发生时产生
结束时间:事件结束时对象停止
事件对象的使用(兼容性):
非IE:当事件发生时,事件对象作为事件处理函数的参数传递到事件中
div.onclick = function(event){
}
IE:当事件发生时,事件对象是作用在window.event属性上
div.onclick = function(){
window.event;
}
兼容:
div.onclick = function a(event){
var e = event || window.event;
//查找事件源 兼容非IE 和 IE
var dom = e.target || e.srcElement;
}