js处理事件
处理窗口事件
1.onload事件
当用户进入页面,而且所用页面元素完成加载时就会触发这个事件(最典型的是广告弹窗)
原生的onload()事件只会触发一次
2.onunload事件
用户关闭窗口时触发这个事件
3.onbeforeunload
onbeforeunload 的作用似乎和 onunload 一样,但两者有个很大的区别:onbeforeunload在用户开始离开页面之前触发,而 onunload 在用户离开页面之后触发。
应用场景
此处,我们想警告用户:如果他们离开表单,之前输入的所有信息都会丢失。如果用 onunload 来实现这个功能,用户之前输入的信息就全没了;但是因为这里使用的是 onbeforeunload,用户就有机会决定是否放弃之前输入的信息。
4.onreSize
当窗口调整大小时,会触发 onresize 事件处理程序
5.onmove
当窗口移动时,会触发 onmove 事件处理程序。
6.onfocus事件和onblur事件
成为焦点或失去焦点时触发
7.onscroll事件
当用户向上或者向下滚动页面时,就会触发 onscroll 事件
处理鼠标事件
onmouseover
onmouseout
onmouseenter
ondbclick
onclick
表单处理事件
onsubmit
当用户单击 Submit 按钮来提交表单时,就会触发 onsubmit 处理程序
onreset事件
当用户单击表单上的 Reset 按钮(如果有这个按钮的话)时,就会触发 onreset 处理程序。
onchange
当用户单击表单上的 Reset 按钮(如果有这个按钮的话)时,就会触发 onreset 处理程序。
onslelect
如果用户选择了一个 input 或 textarea 表单区域中的文本,就会触发 onselect 处理程序。
键盘事件
onkeydown
鼠标按下时触发
onkeyup
onkeyup 事件处理程序与 onkeydown 处理程序相同,唯一的差异是,它在用户已按下并释放键的过程中触发
onkeypress
当用户按下并释放键时触发 onkeypress 事件。
实现一个功能,左右键切换幻灯片
doucument.addEventListener("keydown",keyHit,false)
var thisPic=0
function keyHit(e){
var mypix=new Array("1.jpg","2.jpg","3.jpg")
var imgCt=myPix.length-1
var ltArrow=37
var rtArrow=39
e=e||window.event
var thisKey=e.keyCode
if(thisKey==ltArrow){
chgSlide(-1)
}else(
chgSlide(1)
)
}
function chgSlide(direction){
thisPic=thisPic+direction
if(thisPic>imgCt){
thisPic=0
}
if(thisPic<0){
thisPic=imgCt
}
document.getElementById("myPicture").src=myPic[this.Pic]
}
addEventListener
obj.addEventListener
监听事件,该事件有三个参数:事件本身(目标)、触发事件时调用的函数(监听器),以及用来指定事件被捕获(true)还是冒泡(false)的布尔值(最后一个参数是反映是否进行捕获的)
removeEventListener
该方法允许从它的目标事件移除事件监听器
dispatchEvent
该方法允许从代码中的其他位置触发事件处理程序。它接收一个参数:Event 对象。相当于用js代码触发一个事件
例如,如果要创建、初始化并分派一个事件来点击链接,代码可以这样:
var evt = document.createEvent("Event");
evt.initEvent("click", true, false);
document.getElementById("theLink").dispatchEvent(evt);
stopPropagation()
该方法阻止触发事件流中的其他事件,它没有参数
preventDefault()