js基础篇–事件总结

发布于 2018-11-21  180 次阅读


事件流:IE是事件冒泡流,往上,Netscape事件捕获流,往下
DOM0:所有浏览器都支持
DOM2:ie9,Firefox,Opera,Safari,Chrome支持
DOM1与DOM2区别:解耦合
DOM2事件:事件捕获阶段,处于目标阶段,事件冒泡阶段
事件:click,load
事件处理程序:onclick,onload
表单元素作用域 this-this.form-document,this可取得该Input任何特性,可通过name访问其他表单元素,可通过事件event对象访问事件类型等
<form method='post'>
<input type='text' name='username' value='' onclick="alert(event.type)">
<input type='button' value='Echo' onclick="alert(username.value)">
</form>
DOM0事件处理程序:在元素作用域内,this可取得任何特性,通过事件event对象访问事件类型等,不能通过name访问其他表单元素,冒泡时处理
var btn = document.getElementById('myBtn')
btn.onclick = function(){
alert(this.id);
}
删除:btn.onclick = null;
DOM2级事件处理程序:addEventListener() ,removeEventListener(),可通过true:捕获,false:冒泡处理事件,也是在元素作用域内
var btn = document.getElementById('myBtn');
var handler = function(){
alert(this.id)
}
btn.addEventListener('click',handler,false);//添加事件监听
btn.removeEventListener('click',handler,false)//移除事件监听,一定要把handler单独写,不然写匿名函数,无法移除
冒泡:键盘,鼠标事件 捕获:表单事件
IE事件处理程序:IE8及以下,attachEvent(),detachEvent(),接受事件处理程序名称,比如onclick,处理程序函数,其中事件处理程序函数作用域是全局,冒泡时处理
var btn = document.getElementById('myBtn');
var handler = function(e){
alert(this === window)//true
}
btn.attachEvent('onclick',handler);
btn.detachEvent('onclick',handler);
DOM事件对象:event
btn.onclick = function(event){}//事件处理程序传入
属性与方法:
  • currentTarget: 当前处理事件的元素 ==this
  • target: 事件的目标<=currentTarget,可能是内部某个具体元素
  • preventDefault(): 取消事件默认行为
  • stopPropagation(): 取消事件冒泡
  • type: 触发事件的类型,click
  • eventPhase: 调用事件处理程序阶段:1:捕获,2:处于目标,3:冒泡
IE事件对象:event:浏览器IE9以下
btn.onclick = function(){
var event = window.event;
}//window对象一个属性
btn.attachEvent ('onclick',function(event){
alert(event.type)//click
}//event也可以与window来取
属性与方法
  • type:触发事件类型
  • srcElement: ==target
  • returnValue:true/false,设为false可取消事件默认行为
  • cancelBubble:true/false ,设为true可取消事件冒泡
事件类型:HTML事件
1 UI事件:用户与页面的元素交互触发事件
  • load事件:页面完全加载后在window上触发,所有框架加载完再框架集上触发,图像加载完再<img>上触发,嵌入内容加载完在<object>上触发
  • unload,卸载触发,与load相同
  • abort ,停止下载时,嵌入内容没有加载完,在<object>上触发
  • error,发生错误时触发,场景与load相同
  • select,选择文本框<input>/<textarea>字符触发,
  • resize,框口或框架大小变化时在window或框架上重复触发
  • scroll,用户滚动带滚动条内容时,在该元素上重复触发,
2 焦点事件:页面元素获得或失去焦点时触发
  • blur:元素失去焦点触发,不冒泡
  • focus :元素获得焦点触发,不冒泡
  • focusin:元素获得焦点触发,冒泡
  • focusout:元素失去焦点触发,冒泡
3 鼠标与滚轮事件
  • click,左键单击或按下回车,一次mousedown,mouseup
  • dbclick,双击左键,DOM3,两次click
  • mousedown,按下鼠标
  • mouseup,释放鼠标
  • mouseenter,鼠标从元素外部移入元素范围内(移到子元素不触发),不冒泡,DOM3
  • mouseleave,鼠标从元素内移入元素范围外(移到子元素不触发),不冒泡,DOM3
  • mousemove,鼠标在元素内部移动时重复触发
  • mouseout: 鼠标从元素内移入元素范围外(移到子元素触发),
  • mouseover:鼠标从元素外部首次移到元素内触发,
4 坐标,修改建 -鼠标与触摸属性
  • 1浏览器视口中客户区坐标 :clientX,clientY
  • 2 页面坐标:pageX,pageY 页面没有滚动,与clientX,clientY相等
页面有滚动,,e.pageX=e.clientX+document.body.scrollLeft || document.documentElement.scrollLeft
e.pageY=e.clientY+document.body.scrollTop || document.documentElement.scrollTop
  • 3 屏幕坐标:screenX,screenY,鼠标指针相对于屏幕的位置
  • 1 shiftKey :true/false,是否按下shift键
  • 2 ctrlKey
  • 3 altKey
  • 4 metaKey:是否按下meta键
5 键盘与文本事件,DOM3,IE9及以上
  • keydown :按下键盘任意键,按住不放,重复触发
  • keypress 按下键盘字符键
  • keyup 释放键盘键
keydown,keyup事件,event对象的keyCode属性是对应键的ASCII码,
e.keyode == 13,回车,
6 触摸与手势事件 ,触摸设备
  • touchstart:手指触摸屏幕时发生
  • touchmove:手指在屏幕上滑动连续触发
  • touchend,手指从屏幕上移开触发
  • touchcancel,系统停止跟踪触摸
事件对象Touch,有三个跟踪属性
  1. touches,当前跟踪触摸操作的Touch对象数组
  2. targetTouches,特定与事件目标的Touch对象的数组
  3. changeTouches,上次触摸以来发生了什么改变的Touch对象的数组
其数组属性
  • clientX:触摸目标在视口中x坐标
  • clientY
  • identifier:标识触摸的唯一ID
  • pageX:触摸目标在页面中的x坐标
  • pageY
  • screenX:触摸目标在屏幕中的X坐标
  • screenY
  • target 触摸的DOM节点目标
  • 1 shiftKey :true/false
  • 2 ctrlKey
  • 3 altKey
  • 4 metaKey
用法:e.touches[0].clientX
7模拟事件
模拟鼠标事件:
var btn = document.getElementById('myBtn');
var event = document.createEvent('MouseEvents');//创建鼠标事件
event.initMouseEvent()//传入事件参数,
btn.dispatchEvent(event);//触发事件,绑定event


凡心所向,素履所往