JS DOM事件基础

作者: 越IT | 来源:发表于2017-02-06 20:39 被阅读48次

【知识点】

1、掌握什么是事件
2、掌握HTML事件
3、掌握DOM0级事件
4、掌握常用的鼠标与键盘事件
5、掌握this的指向

一、什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

二、HTML事件

【语法】：

<tag 事件="执行脚本"></tag>

【功能】：
在HTML元素上绑定事件。

【说明】：
执行脚本可以是一个函数的调用。

为何不建议使用HTML事件？

三、DOM0级事件

【语法】：

ele.事件=执行脚本

【功能】：
在DOM对象上绑定事件

【说明】：
执行脚本可以是一个匿名函数，也可以是一个函数的调用。

案例1：锁定-解锁切换。

锁定解锁切换.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .lock{width: 140px;height: 30px;line-height: 30px;background:#00f;color: #fff;font-size: 14px;text-align: center;border-radius: 5px;cursor: pointer; margin-top: 30px;}
        .unlock{width:140px;height:30px;line-height: 30px;background:#666;
            color:#ccc;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;}
    </style>
</head>
<body>
    <div class="lock" id="btn">锁定</div>
    <script>
        //获取按钮
        var btn= document.getElementById("btn");
        //给按钮绑定事件，this是对该DOM元素的引用
        btn.onclick=function(){
            //判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
            //方法一：
            /*if(this.className=="lock"){
                this.className="unlock";
                this.innerHTML="解锁";
            }else{
                this.className="lock";
                this.innerHTML="锁定";
            }*/
            //方法二：
            if(this.innerHTML=="锁定"){
                this.className="unlock";
                this.innerHTML="解锁";
            }else{
                this.className="lock";
                this.innerHTML="锁定";
            }
        }
    </script>
</body>
</html>

案例2：使用通过DOM获取HTML元素的方式绑定事件实现全选--反选效果

DOMHTML事件·全选-反选案例.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选和反选</title>
</head>
<body>
    <input type="button" value="全选" id="btn">
    <script type="text/javascript">
       //获取按钮
       var btn=document.getElementById("btn");
       btn.onclick=function(){
           if(this.value=="全选"){
               this.value="反选";
           }else{
               this.value="全选";
           }
       }
    </script>
</body>
</html>

四、鼠标事件

- 案例·onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       //页面加载时执行
       window.onload=function(){
        //获取box
        var box= document.getElementById("box");
        var clicked=function(){
            alert("我被点击了");
        }
        box.onclick=clicked;
       }
    </script>
    <script>
        //页面加载是执行
        window.onload=function(){
            var box=document.getElementById("box");
            var clicked=function(){
                alert("dj");
            }
            box.onclick=clicked;
        }
    </script>
</head>
<body>
    <div id="box">这是一个DIV</div>
</body>
</html>

- onfocus事件可用有限：

nfocus事件只用于：
1.input标签type为text、password
2.textarea标签

- 案例：onfocus和onblur事件

案例：onfocus和onblur事件.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            padding: 50px;
        }
        .left,.top{
            float: left;
        }
        .left{margin-right: 10px;}
        .tip{display: none;font-size: 14px;}
    </style>
    <script>
        window.onload=function(){
            //获取文本框和提示框
            var phone=document.getElementById("phone"),
            tip=document.getElementById("tip")
            //给文本框绑定激活的事件
            phone.onfocus=function(){
                //让tip显示出来
                tip.style.display="block";
            }
            //给文本框绑定失去焦点的事件
            phone.onblur=function(){
                //获取文本框的值,value用于获取表单元素的值
                var phoneVal=this.value;
                //判断手机号码是否是11位的数字
                //如果输入正确，则显示对号图标，否则显示错号图标
                if(phoneVal.length==11 && isNaN(phoneVal)==false){
                    tip.innerHTML="![](img/right.png)";
                }else{
                     tip.innerHTML="![](img/error.png)";
                }
            }

        }
    </script>
</head>
<body>
    <div class="box">
        <div class="left">
            <input type="text" id="phone" placeholder="请输入手机号码">
        </div>
        <div class="tip" id="tip">
            请输入有效的手机号码
        </div>
    </div>
</body>
</html>

- onchange事件

onchange：域的内容改变时发生
【说明】：一般用于select表单元素，或者单选按钮radio，复选框checkbox
【案例】

onchange事件案例.gif

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onchange事件案例</title>
    <script>
      //页面加载
      window.onload=init;

      //初始化
      function init(){
         //获取下拉菜单
         var menu=document.getElementById("menu");
         //给菜单绑定change事件,一般作用域select或checkbox或radio
         menu.onchange=function(){
          //获取当前选中的值
          var bgcolor=this.value;
          //如上也可写作：
          //var bgcolor=menu.options[menu.selectedIndex].value;
          
          //设置body的背景色
          //如果bgcolor为空,则将背景色设为白色。否则选择对应颜色
           if(bgcolor==""){
              document.body.style.background="#fff";
           }else{
             document.body.style.background=bgcolor;
           }
        }     
      }
    </script>
</head>
<body>
  <div class="box">
      请选择您喜欢的背景色：
      <select name="" id="menu">
          <option value="">请选择</option>
          <option value="#f00">红色</option>
          <option value="#0f0">绿色</option>
          <option value="#00f">蓝色</option>
          <option value="#ff0">黄色</option>
          <option value="#ccc">灰色</option>
      </select>
  </div>
</body>
</html>

onchange事件案例2：

onchange，this.value案例2.gif

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>onchange()</title>
        <style type="text/css">
            #div{
                width:300px;
                height:300px;
                border:2px solid gray;
                margin:100px  0  0 200px;
            }
        </style>
        <script type="text/javascript">
           window.onload=function(){
               //获取下拉菜单
               var color=document.getElementById("color");
               var div=document.getElementById("div");
               //给菜单绑定onchange事件
               color.onchange=function(){
                   //获取当前选中的背景色
                   var bgcolor=this.value;
                   //获取当前选中的值
                   var txt=this.value;
                   
                   //设置对应div的背景色变化和文字变化
                   if(bgcolor=="0"){
                       div.style.background="#fff";
                       div.innerHTML="我没有任何变化"
                   }else{
                       div.style.background=bgcolor;
                       div.innerHTML="我的背景颜色变成了"+txt+" 色";
                   }
               }
           }
        </script>
    </head>
    <body>
        <div>
            <span>请选择您喜欢的颜色:</span>
            <select id="color">
                <option value="0">请选择</option>
                <option value="yellow">黄色</option>
                <option value="orange">橘色</option>
                <option value="pink">粉色</option>
                <option value="purple">紫色</option>
            </select>
        </div>
        <div id="div">我是div</div>
 </body>
</html>

- 1/ onsubmit表单中的确认按钮点击时发送

【说明】：onsubmit事件不是加在按钮上，而是表单上。

- 2/ onmousedown和onmouseup成就了onclick事件

onmousedown：鼠标按钮在元素上按下时触发
onmouseup：在元素上松开鼠标按钮时触发

<script>
       var box=document.getElementById("box");
       // 绑定按下的事件
       box.onmousedown=function(){
          console.log("我被按下了");
       }
       // 绑定移动的事件
       box.onmousemove=function(){
          console.log("我被移动了");
       }
       // 绑定松开的事件
       box.onmouseup=function(){
          console.log("我被松开了");
       }
       // 绑定点击的事件
       box.onclick=function(){
          console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.onresize=function(){
          console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.onscroll=function(){
          console.log("我被拖动了");
       }
       box.onscroll=function(){
          console.log("我是DIV的滚动条");
       }
    </script>

五、键盘事件与keyCode属性

键盘事件案例：

键盘事件案例.gif

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .text span{font-weight:bold;color:#f00;}
       em{font-style:normal;}
       b{font-weight:normal;}
    </style>
</head>
<body>
    <div>
        <p class="text">
            <b id="showcount">您还可以输入</b>
            <span id="totalbox"><em id="count">30</em>/30</span>
        </p>
        <div class="input">
            <textarea name="" id="text" cols="70" rows="4"></textarea>
        </div>
    </div>
    <script>
       // 获取文本框及其他元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
       // 绑定键盘事件
       document.onkeyup=function(){
          // 获取文本框值的长度
          var len=text.value.length;
          // 计算可输入的剩余字符
          var allow=total-len;
          var overflow=len-total;
          // 如果allow小于0
          if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
          }else{
              showcount.innerHTML='您还可以输入';
              totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
          }
       }
    </script>
</body>
</html>

六、关于this指向

在事件触发的函数中，this是对该DOM对象的引用。

七、包含事件的函数调用无括号

【注意】：

Paste_Image.png

本笔记学习整理自慕课网