js 事件

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()

 

转载于:https://my.oschina.net/u/4004801/blog/3011549