JavaScript -- DOM事件

什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。比如你在网页上见到的鼠标点击一个按钮，按钮的颜色发生了变化，就是因为这个标签绑定了点击事件

鼠标事件

onload：页面加载时触发

onclick：鼠标点击时触发

onmouseover：鼠标滑过时触发

onmouseout：鼠标离开时触发

onfoucs：获得焦点时触发

onblur：失去焦点时触发

onchange：域的内容改变时发生

onsubmit：表单中的确认按钮被点击时发生

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

onmousemove：在鼠标指针移动时发生

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

onresize：当调整浏览器窗口的大小时触发

onscroll：拖动滚动条滚动时触发

键盘事件与keyCode属性

onkeydown ：在用户按下一个键盘按键时发生

onkeypress：在键盘按键被按下并释放一个键时发生

onkeyup：在键盘按键被松开时发生

keyCode：返回onkeypress、onkeydown 或 onkeyup事件触发的键的值的字符代码，或者的键的代码。

HTML事件

语法：<tag 事件=“执行脚本”></tag>

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

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

看一个简单的点击事件

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    </head>

    <body>

        <input type="button" value="按钮" onclick="alert('我是点击事件')">

    </body>

</html>

代码解释：

我们给input绑定了一个onclick事件，在前面说过onclick是点击事件，所以当我们鼠标点击时会触发。

onmouseover事件

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <style>

            .btn{height: 30px;width: 60px;background: burlywood;border-radius: 5px;

            text-align: center;line-height: 30px;}

        </style>

    </head>

    <body>

        <div id="btn" class="btn" onmouseover="mouseoverFn(this,'red')">开始</div>

        <script>

            function mouseoverFn(btn,col) {

                btn.style.backgroundColor=col;

            }

        </script>

    </body>

</html>

代码解释：

this：在事件触发的函数中，this是对该DOM对象的引用，大家可以理解为是这个标签，当鼠标划过的时候，this就代表这个标签。所以

上面代码鼠标划过的时候背景成了红色，但是离开之后还是红色，这样肯定不行，我们可以在给绑定一个onmouseout事件

onmouseout事件

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <style>

            .btn{height: 30px;width: 60px;background: burlywood;border-radius: 5px;

            text-align: center;line-height: 30px;}

        </style>

    </head>

    <body>

        <div id="btn" class="btn" onmouseover="mouseoverFn(this,'red')" onmouseout="mouseoutFn(this,'blue')">开始</div>

        <script>

            //鼠标经过时，背景变成红色

            function mouseoverFn(btn,col) {

                btn.style.backgroundColor=col;

            }

            //鼠标离开时，背景变成蓝色

            function mouseoutFn(btn,col) {

                btn.style.backgroundColor=col;

            }

        </script>

    </body>

</html>

上面的代码我们把需要发生的事件写在了函数里，这样可以大大的方便我们，以后只要调用这个函数就实现了

DOM0级事件

语法：ele.事件=执行脚本

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

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

前面说了HTML事件，但是我们不推荐使用HTML事件，推荐使用DOM0级事件，DOM0级事件是在js中找到这个标签，然后给这个标签绑定一个事件，看个栗子

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <style>

            .lock{height: 30px;width: 60px;background: blue;border-radius: 5px;

            text-align: center;line-height: 30px;}

            .unlock{height: 30px;width: 60px;background: gray;border-radius: 5px;

            text-align: center;line-height: 30px;}

        </style>

    </head>

    <body>

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

        <script>

            var btn = document.getElementById('d1');

            btn.onclick = function () {

                this.className="unlock";

                this.innerHTML='解锁';

            }

        </script>

    </body>

</html>

如果我们想点击一下为解锁，在点击一下为锁定，怎么办呢？我们可以通过if判断来实现

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <style>

            .lock{height: 30px;width: 60px;background: blue;border-radius: 5px;

            text-align: center;line-height: 30px;}

            .unlock{height: 30px;width: 60px;background: gray;border-radius: 5px;

            text-align: center;line-height: 30px;}

        </style>

    </head>

    <body>

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

        <script>

            var btn = document.getElementById('d1');

            btn.onclick = function () {

                //判断按钮如果是锁定，则点击之后为 解锁

                if (this.className =='lock'){

                    this.className="unlock";

                    this.innerHTML='解锁';

                }else{

                     this.className='lock';

                     this.innerHTML='锁定'

                    }

            }

        </script>

    </body>

</html>

onload事件

onload：页面加载时触发，先来看下面的代码

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <script>

            var btn = document.getElementById('d1');

            var clicked=function () {

                alert('我被点击了。。。')

            };

            btn.onclick=clicked;

        </script>

    </head>

    <body>

        <div id="d1" class="lock">我是div</div>

    </body>

</html>

当我们执行的时候会发现报错了：Uncaught TypeError: Cannot set property 'onclick' of null

这是因为代码是从上往下执行的，在执行到var btn = document.getElementById('d1');这里时，还没有这个元素，所以为空，如果我们把js代码放到body标签的最下面就不会报错了，但是我们就想放在header标签里，这时就要用到onload事件了

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <script>

            //页面加载完执行

            window.onload=function () {

                var btn = document.getElementById('d1');

            var clicked=function () {

                alert('我被点击了。。。')

            };

            btn.onclick=clicked;

            }

        </script>

    </head>

    <body>

        <div id="d1" class="lock">我是div</div>

    </body>

</html>

代码解释：

在浏览器执行到window.onload=function ()这里时，就不会执行js里面的代码了，而是等到body标签里的代码执行完成之后再去执行

onfoucs和onblur

onfoucs：获得焦点时触发

onblur：失去焦点时触发

这两个事件只能用于input标签的type为text，password和 textarea标签

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <style>

            .left,.tip{

                float: left;}

            .left{padding-left: 30px;

            margin-top: 50px;}

            .tip{

                margin-top: 50px;

                display: none;

            }

        </style>

        <script>

            window.onload=function () {

                //获取文本框和提示框

                var phone = document.getElementById('phone'),

                    tip = document.getElementById('tip');

                //给文本框绑定激活的事件

                phone.onfocus=function () {

                    tip.style.display='block';

                };

                //给文本框绑定失去焦点的事件

                phone.onblur=function () {

                    //获取文本框的值,value用于获取表单元素的值

                    var phoneVal = this.value;

                    //判断手机号是否是11位的数字，

                    //如果输入正确，提示正确，错误，提示输入错误

                    if (phoneVal.length==11 && isNaN(phoneVal)==false){

                        tip.innerHTML='<div >正确</div>';

                        tip.style.color='green'

                    }else{

                        tip.innerHTML='<div >输入错误</div>';

                        tip.style.color='red'

                    }

                }

            }

        </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：域的内容改变时发生，可以用作更换背景色

<!doctype html>

<html lang="en">

<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>

</html>