事件
- 1.事件驱动要素
- 1.1.事件源:触发事件的元素
- 1.2.事件:被JavaScript侦测到的行为
- 2.事件分类:鼠标事件,键盘事件,表单事件,页面事件
- onclick:鼠标点击操作
- ondbiclick:鼠标双击事件
- onmousedown:按下鼠标按键
- onmouseup:抬起鼠标按键
- onmousemove:鼠标指针在元素上方移动
- onmouseover:鼠标指针进入元素
- onmouseout:鼠标指针移出元素
- Dommousescroll:鼠标滚轮事件(FF)
- onmousewheel:鼠标滚轮事件(IE,CHROM)
- onkeyup:抬起键盘按键
- onkeydown:按下键盘按键
- onkeypress:按下或按住键盘按键
- onsubmit:按下表单的提交按钮
- onblur:input失去焦点
- onfoucs:input获得焦点
- onchange:更改input元素的内容
- onload:页面加载完成
- onunload:文档的载入被撤销(页面跳转等情况时)
- onbeforeunload:页面刷新或关闭时
- 3.事件绑定:
- 在标签中绑定
<input type = "button" id = "btn" , valuo = "点击" , onclick = "test()" />
-监听器:如果绑定多个条件,那么先执行后面的,反过来执行
btn.attchEvenr("onclick","fn")
- 4.条件对象:
- 4.1.什么是事件源对象:事件源对象event对象,其封锁了与事件相关的信息
- 4.2.获取EVENT对象
btn.onclick = function(e){
var ev = e || window.event
- 4.3.鼠标事件:
var wrap = document.getElementById("wrap")
wrap.onclick = function(e){
var ev = e|| window.event
//距离浏览器
this.innerText = ev.clientX+""+ev.clientY
//距离屏幕
this.innerHTML = ev.screenX+""ev.screenY
//相对于div(元素)本身距离(距离事件源)
this.innerHTML = ev.offsetX+""ev.pffsetY
- 键盘事件
- 键盘码:
- 回车:13
- Ctrl:17
- Shift:16
- 上:38
- 左:37
- 右:39
- 下:40
- 空格:32
//获取键盘码
wrap.innerHTML = ev.keycode
- type属性:用来检测事件类型
console.log(e.type)