1、页面加载事件

基本语法


或
window.onload = function(){
javascript代码
}

功能

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

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body> 
  8. <div id="div1">div1</div>   
  9. <script type="text/javascript"> 
  10.       window.onload = function(){
  11.           alert(document.getElementById("div1").innerHTML);
  12.       }
  13.     </script>
  14. </body>
  15. </html>

代码讲解

window.onload = function(){} html页面加载完成后执行
alert(document.getElementById(“div1”).innerHTML); 弹出id为div1的标签的内容

2、窗口重置事件

基本语法


或
window.onresize = function(){
代码
}

功能

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

代码

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
</head>
<body>
<div id="div1">div1</div>
<script type="text/javascript">
      window.onresize = function(){
          document.getElementById("div1").innerHTML = document.getElementById("div1").offsetWidth;
      }
    </script>
</body>
</html>

代码讲解

window.onresize = function(){} 当窗口大小发生改变时执行
document.getElementById(“div1”).innerHTML = document.getElementById(“div1”).offsetWidth;
把id为div1的标签的宽度在其标签中输出

3、鼠标滚轮事件

基本语法

火狐浏览器

document.addEventListener(“DOMMouseScroll”,函数名，布尔值);
说明：布尔值是可选值
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行

谷歌浏览器

window.onwheel = 函数名;

功能

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

代码

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
</head>
<body>  
<div id="div1">div1</div>
<script type="text/javascript">
  //添加滚轮事件
      document.addEventListener("DOMMouseScroll",fun1);
      window.onwheel = fun1;
  //fun1(当前事件的事件对象)
      function fun1(e){
        //e.wheelDelta适用于谷歌内核浏览器；e.detail适用于火狐内核浏览器

        //如果页面有很多内容，鼠标滚动事件执行，页面也随之滚动
        e.preventDefault();//不执行默认的行为操作
        //当滚动滚轮时页面不会滚动，只执行鼠标的滚轮事件

        if(e.wheelDelta){
            //滚轮向前滚，数值为正；滚轮向后滚，数值为负
          document.getElementById("div1").innerText = e.wheelDelta;
        }
        else if(e.detail){
            //滚轮向前滚，数值为负；滚轮向后滚，数值为正
          document.getElementById("div1").innerText = e.wheelDelta;
        }
          document.getElementById("div1").style.backgroundColor = "green";
      }
    </script>
</body>
</html>

4、触屏事件

（1）触屏开始

基本语法

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

功能

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

（2）触屏结束

基本语法

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

功能

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

（3）触屏滑动

基本语法

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

功能

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

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

代码

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
</head>
  //在手机端浏览器也会有一些默认的操作,写上已下代码，一旦发生触屏事件返回词一个false给禁用了
<body ontouchmove="return false"> 
<div id="div1">div1</div> 
<script type="text/javascript">
      document.addEventListener("touchstart",fun1,false);
      document.addEventListener("touchend",fun2,false);
      document.addEventListener("touchmove",fun3,false)；

      var x1;
          var y1;
      //fun1(当前事件的事件对象)
      function fun1(e){
        //获得手指触屏幕时的x、y坐标
        x1 = e.changedTouches[0].pageX;    //这个数组里第一个值就是对应的x坐标
        y1 = e.changedTouches[0].pageY;    //这个数组里第一个值就是对应的y坐标
      }
      function fun2(){
        //获得手指离开屏幕时的x、y坐标
        var x2 = e.changedTouches[0].pageX;    //这个数组里第一个值就是对应的x坐标
        var y2 = e.changedTouches[0].pageY;    //这个数组里第一个值就是对应的y坐标
        if(x2<x1){
            document.getElementById("div1").innerHTML = "向左“;
        }
        else{
            document.getElementById("div1").innerHTML = "向右";
        }
        if(y2<y1){
            document.getElementById("div1").innerHTML = "向上“;
        else{
            document.getElementById("div1").innerHTML = "向下";
        }
      }
      var num = 0;
      function fun3(){
        num++;
        document.getElementById("div1").innerHTML = num;
          document.getElementById("div1").style.backgroundColor = "red";
      }
    </script>
</body>
</html>

代码讲解

1、touchstart

document.getElementById(“div1”).style.backgroundColor = “green”;
当手指触摸屏幕时候id为div1的标签背景色为绿色

2、touchend

document.getElementById(“div1”).style.backgroundColor = “orange”;
当手指从屏幕上离开的时候id为div1的标签背景色为桔色

3、touchmove

document.getElementById("div1").innerHTML = num;<br />     当手指在屏幕上滑动的时候将数字num在id为div1的标签中输出<br />    document.getElementById("div1").style.backgroundColor = "red";<br />当手指在屏幕上滑动的时候 id为div1的标签背景色为红色