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