前端JavaScript之DOM事件操做

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

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

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

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

　　具体介绍见连接html

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

三要素：java

事件源，引起后续事件的HTML标签数组

事件，JS已经定义好了ide

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

书写步骤：this

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

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

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

代码：

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

<script type="text/javascript">
    // 一、获取事件源
    var div = document.getElementById("box1"); // 二、绑定事件
    div.onclick = function () { // 三、书写事件驱动程序
        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="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>
</html>