1）页面加载事件

基本语法

  1. <body onload="函数名()">
  2.     或
  3. window.onload = function(){
  4.     javascript代码
  5. }

功能

用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

2）窗口重置事件

基本语法

  1. <body onresize="函数名()">
  2.     或
  3. window.onresize = function(){
  4.         代码
  5. }

功能

用于在窗口或框架被调整大小时执行某个方法。

3）鼠标滚轮事件

基本语法

  1.  火狐浏览器    
  2.        document.addEventListener("DOMMouseScroll",函数名，布尔值);
  3.     说明：布尔值是可选值
  4.        true - 事件句柄在捕获阶段执行
  5.        false- 默认。事件句柄在冒泡阶段执行
  6. 谷歌浏览器
  7.         window.onwheel = 函数名;

功能

当鼠标滚轮在元素上下滚动时执行某个方法。

示例

  1. /滚轮事件调用函数
  2.       function mousewheel(e){
  3.           e.preventDefault();//通知浏览器不执行默认的动作
  5.           if(e.wheelDelta){
  6.               //IE/Opera/Chrome
  7.               if(e.wheelDelta < 0){
  8.                 //下
  9.                 index++;
  10.               }
  11.               else{
  12.                 //上
  13.                 index--;
  14.               }
  15.           }
  16.           else if(e.detail){
  17.               //Firefox
  18.               if(e.detail < 0){
  19.                 //上
  20.                 index--;
  21.               }
  22.               else{
  23.                 //下
  24.                 index++;
  25.               }
  26.           }
  27.           setAnimate();
  28.       }

4）触屏事件

【1】触屏开始

基本语法

document.addEventListener(“touchstart”,函数名,布尔值);

功能

当手指触摸屏幕时候执行某个函数。

【2】触屏结束

基本语法

document.addEventListener(“touchend”,函数名,布尔值);

功能

当手指从屏幕上离开的时候执行某个函数。

【3】触屏滑动

基本语法

document.addEventListener(“touchmove”,函数名,布尔值);

功能

当手指在屏幕上滑动的时候连续地执行某个函数。

说明：布尔值是可选值
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行

示例

  1. 1、touchstart
  3.     function fun1(){
  4.         document.getElementById("div1").style.backgroundColor = "green";
  5.     }
  6.     document.getElementById("div1").style.backgroundColor = "green";  当手指触摸屏幕时候id为div1的标签背景色为绿色
  8. 2、touchend
  10.     function fun2(){
  11.         document.getElementById("div1").style.backgroundColor = "orange";
  12.     }
  13.     document.getElementById("div1").style.backgroundColor = "orange";  当手指从屏幕上离开的时候id为div1的标签背景色为桔色
  15. 3、touchmove
  17.     var num = 0;
  18.     function fun3(){
  19.         num++;
  20.         document.getElementById("div1").innerHTML = num;
  21.         document.getElementById("div1").style.backgroundColor = "red";
  22.     }
  23.     document.getElementById("div1").innerHTML = num;  当手指在屏幕上滑动的时候将数字num在id为div1的标签中输出
  24.     document.getElementById("div1").style.backgroundColor = "red";  当手指在屏幕上滑动的时候 id为div1的标签背景色为红色