10-關於DOM的事件操做

時間 2019-11-13

標籤關於 dom 事件欄目 HTML 简体版

原文原文鏈接

1、JavaScript的組成

JavaScript基礎分爲三個部分：javascript

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。css
DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。html
BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。java

2、事件

JS是以事件驅動爲核心的一門語言。

事件的三要素

事件的三要素：事件源、事件、事件驅動程序。ios

好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。數組

再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。瀏覽器

因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。dom

總結以下：ide

事件源：引起後續事件的html標籤。函數
事件：js已經定義好了（見下圖）。
事件驅動程序：對樣式和html的操做。也就是DOM。

代碼書寫步驟以下：（重要）

（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）綁定事件：事件源box.事件onclick = function(){ 事件驅動程序 };
（3）書寫事件驅動程序：關於DOM的操做

代碼舉例：

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

<script type="text/javascript">
    // 一、獲取事件源
    var div = document.getElementById("box1");
    // 二、綁定事件
    div.onclick = function () {
        // 三、書寫事件驅動程序
        alert("我是彈出的內容");
    }
</script>

</body>

常見事件以下：

下面針對這事件的三要素，進行分別介紹。

一、獲取事件源的方式（DOM節點的獲取）

獲取事件源的常見方式以下：

    var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

    var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

二、綁定事件的方式

方式一：直接綁定匿名函數

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

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //綁定事件的第一種方式
    div1.onclick = function () {
        alert("我是彈出的內容");
    }
</script>

方式二：先單獨定義函數，再綁定

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

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //綁定事件的第二種方式
    div1.onclick = fn;   //注意，這裏是fn，不是fn()。fn()指的是返回值。
    //單獨定義函數
    function fn() {
        alert("我是彈出的內容");
    }
</script>

注意上方代碼的註釋。綁定的時候，是寫fn，不是寫fn()。fn表明的是整個函數，而fn()表明的是返回值。

方式三：行內綁定

<!--行內綁定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是彈出的內容");
    }

</script>

注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。

三、事件驅動程序

咱們在上面是拿alert舉例，不只如此，咱們還能夠操做標籤的屬性和樣式。舉例以下：

  <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

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

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //點擊鼠標時，本來粉色的div變大了，背景變紅了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //屬性值要寫引號
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //屬性名是backgroundColor，不是background-Color
    }
</script>

上方代碼的注意事項：

在js裏寫屬性值時，要用引號
在js裏寫屬性名時，是backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯

onload事件

當頁面加載（文本和圖片）完畢的時候，觸發onload事件。

舉例：

<script type="text/javascript">
    window.onload = function () {
        console.log("小馬哥");  //等頁面加載完畢時，打印字符串
    }
</script>

有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。

建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.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;
        }
        .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>

2.要求實現效果：當鼠標懸停在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>

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

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。