Javascript事件处理详解
Javascript处理事件详解
一.处理窗口事件
- 1.onload事件
当用户进入页面而且所有页面元素都完成加载时， 就会触发,即一张页面或一幅图像完成加载时候触发
代码示例
window.onload=执行函数名注意不带括号关于函数何时带括号或只写函数名后面会有详解任何HTML页面都可以调用多个外部JavaScript文件，这些文件都可以设置事件处理程序。 如果其中一个文件直接设置了window.onload之后，但是每次你都在此之后调用addOnload(),那么不会有问题。 如果在设置window.onload之后（无论是直接设置,还是通过addOnload() ），再设置window.onload，原来设置的函数就会丢失。
可以在一个页面的js文件开头使用onload函数，表示当页面加载完全后，首先执行的函数
- 2.onunload事件
-
当用户离开网页（离开body或frameset标签后）时，就会触发这个事件
onunload发生于当用户离开页面时发生的事件（通过点击一个链接，提交表单，关闭浏览器窗口等等）
onunload事件同样触发了页面载入事件（+onload事件）
- HTML中 <body onunload="SomJavaScriptCode">
- JavaScript中 window.onunload=function(){SomeScriptCode};
- 3.onbeforeunload事件
-
在用户开始离开页面之前触发（还没有离开）。
onbeforeunload在用户开始离开页面之前触发，而onunload在用户离开页面之后触发。
例： window.onbeforeload=function(){ return "你将要离开这个页面"； }
- 4.onresize
-
窗口或框架被重新调整大小的时候，会触发
- HTML:
<element onresize="SomeJavaScriptCode"> - JavaScript 中: window.onresize=function(){SomeJavaScriptCode};
SomeJavaScriptCode 必需参数。规定该事件发生时执行的 JavaScript。
- HTML:
- 5.onmove事件
-
当窗口移动时，会触发
- 6.onabort事件
-
当用户取消网页上的图像加载时，会触发，这种事件不太常用， 而且并非所有浏览器都支持它
- 7.onerror事件
-
当页面上发生JavaScript错误时，可能会触发
在Web上的复杂页面中，设置onerror=null会比较好，如果页面上有某些错误，将不会向用户显示，这样用户就会少受干扰
- 8.onfocus和onblur事件
- onfocus和onblur事件处理程序互为镜像。
- 当一个页面成为最前面的活动窗口时，会触发onfocus处理程序；
- 而当一个页面退回后台的时候，会触发onblur事件处理程序 由于这两个事件处理程序老是被滥用，大多数现代浏览器已经不支持他们了。
- 9.onscroll事件
-
当用户向上或向下滚动页面的时候，就会触发
提示： 使用 CSS overflow 样式属性来创建元素的滚动条。
- HTML 中:
<element onscroll="myScript"> - JavaScript 中:
object.onscroll=function(){myScript}; - JavaScript 中, 使用 addEventListener() 方法: object.addEventListener("scroll", myScript);
- 注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
- HTML 中:
- 10.onDOMContentLoaded事件
-
onDOMContentLoaded和onload类似，只是它在页面自身完成加载时被触发，而不是一些相关文件（如图片）完成加载时被触发
