前端JavaScript之DOM事件操作

DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

1.DOM（Document Object Moduel）:文档对象模型

　定义了访问和操作HTML文档的标准法，把HTML文档呈现为带有元素，属性和文本的树结构，由节点组成

　解析过程：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

　　具体介绍见链接

2.事件（JS是以事件为核心的一门语言）

三要素：

事件源，引发后续事件的HTML标签

事件，JS已经定义好了

事件驱动程序，对样式和HTML的操作，也就是DOM

书写步骤：

　　获取事件源：document.getElementById(“box”）

　　绑定事件：事件源box.事件onclick = function(){事件驱动程序}

　　书写事件驱动程序：关于DOM的操作

代码：

<body>

<div id="box1"></div>

<script type="text/javascript">

    // 1、获取事件源

    var div = document.getElementById("box1");

    // 2、绑定事件

    div.onclick = function () {

        // 3、书写事件驱动程序

        alert("我是弹出的内容");

    }

</script>

</body>

常用事件：

onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseleave   鼠标从元素离开

onselect       文本被选中。

onsubmit       确认按钮被点击

3.DOM节点的获取（事件源）

 　　　　//通过id获取单个标签

        var div1  = document.getElementById("box1");

        //通过标签名获取标签数组

        var arr1 = document.getElementsByTagName("div2");

        //通过类名获取标签数组

        var arr2 = document.getElementByClassName('');

4.绑定事件

　　直接绑定你匿名函数

    <div id="box1"> </div>

    <script type="text/javascript">

        //通过id获取单个标签

        var div1  = document.getElementById("box1");

        div1.onclick = function(){

            alert(66666666);

        }

    </script>

　　先单独定义函数，再绑定

    <div id="box1"> </div>

    <script type="text/javascript">

        //通过id获取单个标签

        var div1  = document.getElementById("box1");

        //注意这里是fn，没有括号啊,它代表的是整个函数。fn()代表的是返回值

        div1.onclick = fn;

        div1.onclick = fn(){

            alert(66666666);

        }

    </script>

　　行内绑定

 <!-- 这里是fn()，因为绑定的这段代码不是写在js代码里面的，而是被识别成了字符串 -->

    <div id="box1" onclick="fn()"></div>

    <script type="text/javascript" >

        function fn() {

            alert(66666)

        }

    </script>

5.事件驱动程序

例：我们通过鼠标点击使的图片改变大小和颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box{

            width: 100px;

            height: 100px;

            background-color: red;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script type="text/javascript">

        var div1 = document.getElementById("box");

    //点击鼠标时，原本粉色的div变大了，背景变红了

        div1.onclick = function () {

        div1.style.width = "200px";   //属性值要写引号

        div1.style.height = "200px";

        div1.style.backgroundColor = "blue";   //属性名是backgroundColor，不是background-Color

    }

    </script>

</body>

</html>

onload事件：页面加载文本图片完毕的时候会触发该事件

使用场景：如果希望页面加载完立刻执行，则可以使用该事件属性

例

window.onload = function(){

        console.log('6666666');

    }

//等页面加载完毕打印该字符串

window.onload的使用方法：

　　js的加载和html是同步加载的，因此使用元素在定义元素之前就很容易报错。这个时候我们可以把使用元素的代码放在onload里面，这样就能保证这段代码最后执行

例：京东顶部广告栏关闭

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        .top-banner{

            /*position: relative;*/

            background-color: rgb(230, 15, 82);

        }

        .top-banner .w{

            width: 1190px;

            position: relative;

            margin: 0 auto;

        }

        .top-banner .banner{

            display: block;

            width: 100%;

            height: 80px;

            background: url('./close.jpg') no-repeat center 0;

        }

        /*定义右上角的x*/

        .top-banner .close{

            position: absolute;

            right: 0;

            top:0;

            text-decoration: none;

            color: white;

            width: 20px;

            height: 20px;

            line-height: 20px;

            text-align: center;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="top-banner" id="topBanner">

        <div class="w">

            <a href="#" class="banner"></a>

            <a href="#" class="close" id="closeBanner">x</a>

        </div>

    </div>

    <script type="text/javascript">

        // /需求：点击案例，隐藏盒子。

            //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。

        window.onload  = function(){

            // /1.获取事件源和相关元素

            var closeBanner = document.getElementById('closeBanner');

            var topBanner = document.getElementById('topBanner');

            //2.绑定事件

            closeBanner.onclick = function(){

                //3.书写事件驱动程序

                        //类控制

                //topBanner.className += ' hide';//保留原类名，添加新类名

                // topBanner.className = 'hide';

                //替换旧类名

                topBanner.style.display = 'none';

            }

        }

    </script>

</body>

</html>

最后效果：

鼠标悬停在img时，更换成另一张图片，移开鼠标，恢复原来图片

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        //window.onload页面加载完毕以后再执行此代码

        window.onload = function () {

            //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。

            //步骤：

            //1.获取事件源

            //2.绑定事件

            //3.书写事件驱动程序

            //1.获取事件源

            var img = document.getElementById("box");

            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)

            img.onmouseover = function () {

                //3.书写事件驱动程序(修改src)

                img.src = "image/jd2.png";

//                this.src = "image/jd2.png";

            }

            //1.获取事件源

            var img = document.getElementById("box");

            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)

            img.onmouseout = function () {

                //3.书写事件驱动程序(修改src)

                img.src = "image/jd1.png";

            }

        }

    </script>

</head>

<body>

　　　　//这里cursor：pointer表示鼠标放图片那里，会出现一个小手

    <img id="box" src="data:image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>

</html>