一、HTML DOM - 事件

DOM - 事件 链接

1、onload 和 onunload 事件

当用户进入或离开页面时，会触发 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）

当用户改变输入字段的内容时

<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 事件

可用于在鼠标指针移动到或离开元素时

<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 事件

鼠标按钮被点击时，触发 onmousedown 事件，当鼠标按钮被松开时，触发 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函数

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){
//                得到目标元素的父节点
        var parent = targetElement.parentNode;
//                如果目标元素是 parent 最后一个就在直接添加新元素
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);
//                 否则，就在 parent 前面的兄弟之后添加新元素
        }else{
            parent.insertBefore(newElement,targetElement.nextElementSibling);
        }
    }

</script>