一、HTML DOM - 事件

DOM - 事件 鏈接

1、onload 和 onunload 事件

當(dāng)用戶進(jìn)入或離開頁面時，會觸發(fā) onload 和 onunload 事件。

<p id="p">hello world</p>

<script>
    var p = document.getElementById("p");
    window.onload=function(){
        p.style.color="red";
    }
</script>

2、onchange 事件（input）

當(dāng)用戶改變輸入字段的內(nèi)容時

<input type="text" id="input"/>

<script>
    var input = document.getElementById("input");
    input.onchange = function(){
        this.style.color="red";
    }
</script>

3、onfocus 獲取焦點 和 onblur 移除焦點

<input type="text" id="input"/>

<script>
    var input = document.getElementById("input");
    /*onfocus獲取焦點*/
    input.onfocus=function(){
        this.style.backgroundColor="pink";
    };
    /*onblur移除焦點*/
    input.onblur=function(){
        this.style.backgroundColor="red";
    }
</script>

4、onmouseover 和 onmouseout 事件

可用于在鼠標(biāo)指針移動到或離開元素時

<style>
        div{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>

<div id="div">是</div>

<script>
    var div = document.getElementById("div");
    div.onmouseover=function(){
        this.innerHTML="否";
    };
    div.onmouseout=function(){
        this.innerHTML="是";
    }
</script>

5、onmousedown 和 onmouseup 事件

鼠標(biāo)按鈕被點擊時，觸發(fā) onmousedown 事件，當(dāng)鼠標(biāo)按鈕被松開時，觸發(fā) onmouseup 事件

<style>
        div{
            width:100px;
            height:100px;
            background-color: red;
        }
 </style>

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

<script>
    var div = document.getElementById("div");
    div.onmousedown=function(){
        this.style.backgroundColor="pink";
    };
    div.onmouseup=function(){
        this.style.backgroundColor="red";
    }
</script>

二、圖片庫demo

<h1>圖片庫</h1>
<ul id="imageGallery">
    <li>
        <a href="images/image_1.png" title="01">第一張</a>
    </li>
    <li>
        <a href="images/image_2.png" title="02">第二張</a>
    </li>
    <li>
        <a href="images/image_3.png" title="03">第三張</a>
    </li>
    <li>
        <a href="images/image_4.png" title="04">第四張</a>
    </li>
</ul>
<!--![](images/dizhi_1.png)-->
<!--<p id="p">換掉我</p>-->

<script>
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/dizhi_1.png");
    placeholder.setAttribute("alt","占位符");
    var p = document.createElement("p");
    p.setAttribute("id","p");
    var text = document.createTextNode("換掉我");
    p.appendChild(text);

    var body = document.getElementsByTagName("body")[0];
    body.appendChild(placeholder);
    body.appendChild(p);

    function prepareGallery(){
        var imageGallery = document.getElementById("imageGallery");
        var li = imageGallery.getElementsByTagName("a");
        for(var i=0;i<li.length;i++){
            li[i].onclick = function(){
                show(this);
                return false;
            }
        }
    }
    prepareGallery();

    function show(pic){
        var href = pic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",href);
        var title = pic.getAttribute("title");
        var p = document.getElementById("p");
        p.firstChild.nodeValue=title;
    }
</script>

insertAfter函數(shù)

nextElementSibling：兄弟元素

<ul>
    <li id="one">1</li>
    <li id="two">2</li>
    <li>3</li>
</ul>

<script>
    var one = document.getElementById("one");
    var p = document.createElement("p");
    var text = document.createTextNode("hello");
    p.appendChild(text);

    insertAfter(p,two);

    function insertAfter(newElement,targetElement){
//                得到目標(biāo)元素的父節(jié)點
        var parent = targetElement.parentNode;
//                如果目標(biāo)元素是 parent 最后一個就在直接添加新元素
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);
//                 否則，就在 parent 前面的兄弟之后添加新元素
        }else{
            parent.insertBefore(newElement,targetElement.nextElementSibling);
        }
    }

</script>