JavaScript--DOM事件

作者: 我可能是个假开发 | 来源:发表于2018-01-07 11:32 被阅读63次

JavaScript--DOM事件

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

一、HTML事件

语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            width: 140px;
            height: 30px;
            line-height:30px;
            background:#00f;
            color:#fff;
            font-size: 14px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <input type="button" value="弹出" onclick="alert('我是按钮')">

    <!--鼠标划过按钮时调用mouseoverFn的函数-->
    <!--this为该dom对象div的引用：该事件绑在div这个元素上，该this就代表div-->
    <div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
    <!--或者直接把颜色也传递过去-->
    <div id="btn2" class="btn" onmouseover="mouseoverFn1(this,'#0f0')" onmouseout="mouseoutFn1(this,'#333')">结束</div>
    <script>
        function mouseoverFn(btn) {
            //鼠标划过按钮时，按钮的背景变为红色
            //console.log(btn);//<div id="btn" class="btn" onmouseover="mouseoverFn(this)">开始</div>
            btn.style.background="#f00";
        }
        function mouseoutFn(btn) {
            btn.style.background="#00f";
        }

        function mouseoverFn1(btn,bgColor) {
            btn.style.background=bgColor;
        }
        function mouseoutFn1(btn,bgColor) {
            btn.style.background=bgColor;
        }
    </script>
</body>

二、DOM0级事件

语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lock{
            width: 140px;
            height: 30px;
            line-height:30px;
            background:#00f;
            color:#fff;
            font-size: 14px;
            text-align: center;
            border-radius: 10px;
            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: 10px;
            cursor: pointer;
            margin-top: 30px;
        }

    </style>
</head>
<body>

    <div id="btn" class="lock" >锁定</div>

    <script>
        //获取按钮
        var btn=document.getElementById("btn");
        //给按钮绑定事件
        btn.onclick=function(){
            //console.log(this);//<div id="btn" class="lock" >锁定</div>
            // this.className="unlock";
            // this.innerHTML="解锁";
            //判断如果按钮时锁定，则显示为解锁，变为灰色
            //否则显示为锁定，变为蓝色
           /* 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="锁定";
            }
        }


        //注意：自定义函数时的调用
        function clickBtn(){
            alert("我是按钮");
        }
        btn.onclick=clickBtn;//此处调用不能写()
    </script>
</body>

三、常用的鼠标事件与键盘事件

1.鼠标事件
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生
onsubmit：表单中的确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发

①onload：页面加载时触发

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       // 页面加载时执行，unload页面卸载 把页面中的所有元素加载完毕再触发
       window.onload=function(){
         // 获取box
         var box=document.getElementById("box");
         var clicked=function(){
              alert('我被点击了');
         }
         box.onclick=clicked;
       }
    </script>
</head>
<body>
    <div id="box">这是一个DIV</div>
</body>

②onfoucs:获得焦点时触发用于input标签type为text、password、textarea
③onblur:失去焦点时触发

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box{
          padding:50px;
       }
       .left,.tip{
          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 src="img/right.png">';
             }else{
                tip.innerHTML='<img src="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>

④onchange：域的内容改变时发生

<head>
    <meta charset="UTF-8">
    <title>Document</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;
             // 如果bgcolor为空，则下面的脚本将不执行
             // if(bgcolor=="")return;
             // 设置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>

⑤onsubmit：表单中的确认按钮被点击时发生
⑥onmousedown：鼠标按钮在元素上按下时触发
⑦onmousemove：在鼠标指针移动时发生
⑧onmouseup：在元素上松开鼠标按钮时触发
⑨onresize：当调整浏览器窗口的大小时触发
⑩onscroll：拖动滚动条滚动时触发

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
    </style>
</head>
<body>
    <div class="box" id="box">
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
        <p>拖动</p>
    </div>
    <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>
</body>

2.键盘事件与keyCode属性
onkeydown ：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown 或 onkeyup
事件触发的键的值的字符代码，或者的键的代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text span{
            font-weight: bold;
            color: #f00;
        }
        em{
            font-style: normal;
        }
    </style>
</head>
<body>
    <p class="text">您还可以输入
        <span>
            <em id="count">30</em>/30
        </span>
    </p>
    <div class="input">
        <textarea name="" id="text" cols="70" rows="4"></textarea>
    </div>
    <script>
        //获取文本框的值
        var text=document.getElementById("text");
        //在事件触发的function里，用一个参数接受事件对象
        // document.onkeydown=function (ev) {
        //     console.log(ev.keyCode);
        // }
        var total=30;
        //绑定键盘事件
        var count=document.getElementById("count");
        document.onkeyup=function (ev) {
            //获取文本框的值的长度
            var len=text.value.length;
            var allow=total-len;
            count.innerHTML=allow;
        }
    </script>
</body>

四、this的指向

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

JavaScript--DOM事件