事件:
事件的三要素:
1. 事件源
2. 事件类型
3. 事件处理函数
事件绑定:
1.DOM0级事件
1.1 语法: 事件源.on事件类型 = 事件处理函数
特点: 不可以给同一个对象的同一个事件进行多次绑定
2.DOM2级事件(事件监听器)
2.1 标准浏览器
语法:事件源.addEventListener('事件类型',事件处理函数)
特点:可以给同一个对象的同一个事件进行多次绑定
2.2 IE低版本
语法:事件源.attachEvent('on事件类型',事件处理函数)
特点:可以给同一个对象的同一个事件进行多次绑定
事件解绑:
1. DOM0级事件解绑
语法:事件源.on事件类型 = null
特点:由于赋值的特殊性,将原来的事件覆盖了
2. DOM2级事件解绑
2.1 标准浏览器的解绑
语法:事件源.removeEventListener('事件类型',事件处理函数)
注意:需要将事件单独写在外面
function fn(){}
div.addEventListener('click',fn)
div.removeEventListener('click',fn)
2.2 IE低版本的事件解绑
语法:事件源.detachEvent('on事件类型',事件处理函数)
function fn(){}
div.attachEvent('click',fn)
div.detachEvent('click',fn)
事件类型:
JS给我们提供了可以直接使用的事件
JS内事件大致分为几类:
鼠标事件
1. click: 鼠标左键单击
2. dblclick: 鼠标左键双击
3. contextmenu: 鼠标右键单击
4. mousedown: 鼠标按下(任何一个按键按下)
5. mouseup: 鼠标抬起
6. mousemove: 鼠标移动(光标只要位置变换就会触发)
7. mouseover: 鼠标移入(光标从外面进入事件源范围内)
8. mouseout: 鼠标移出(光标从事件源内部离开)
9. mousenter: 鼠标移入
10. mouseleave: 鼠标移出
键盘事件
依赖键盘触发的事件
注意:不是谁都可以可以触发键盘事件的,一般window,document,表单元素可以触发
执行顺序:keydown-->keypress-->keyup
1. keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件
2. keypress:按下某个键盘键并按住时触发(一般之监听数字和字母,不能监听特殊按键)
3. keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次
浏览器事件
onscroll:滚轮滑动时触发
onresize:窗口大小改变时触发
onload:当文档和资源加载完成后调用
表单事件
onfocus:获得焦点时触发
onblur:失去焦点时触发
onchange:内容发生改变的时候触发
oninput:输入时触发
onreset:重置时触发
onsubmit:提交时触发
其他事件
事件对象:
概念:记录本次事件的所有信息
获取事件对象:
1. 标准浏览器下
1.1 直接在事件处理函数位置书写一个形参, 会在事件触发的时候
1.2 由浏览器自动传递实参
1.3 传递的实参就是 事件对象
2. IE 低版本
2.1 直接使用 window.event 来获取事件对象
兼容:
在事件处理函数的时候, 正常接受形参
书写: e = e || window.event
鼠标事件对象的相关信息(坐标点)
1.1 clientX和clientY:光标相对于浏览器可视窗口左上角的坐标位置
1.2 pageX和pageY:光标相对于文档流左上角的坐标位置
1.3 offsetX和offsetY:光标相对于触发事件的元素左上角的坐标点
键盘事件对象的相关信息
1.1 按下哪个键 ev.keyCode || ev.which
1.2 组合按钮
shiftKey
altKey
ctrlKey
都是返回布尔值