JavaScript標籤註冊事件

1)第一種方式註冊

代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    window.οnlοad=function(){
        //定位到一批li
        var list=document.getElementsByTagName("li");
        alert(list);//可以忽略
        //給每個li註冊onmousover懸浮事件
        for(var i=0;i<list.length;i++)
        {
            list[i].οnmοuseοver=function()
            {
                //js設置樣式
                this.style.backgroundColor="pink"
            };
        }
        //懸浮離開事件
        for(var i=0;i<list.length;i++) {
            list[i].onmouseout = function () {
                //js設置樣式
                this.style.backgroundColor = "";
            };
        }
    }
</script>
<body>
<ul>
    <li>櫻桃小丸子</li>
    <li>缺心眼子</li>
    <li>摳腳丫子</li>
    <li>小鱉犢子</li>
</ul>
</body>
</html>

解析:

首先獲取所有 li 標籤元素的集合。利用循環給每個標籤註冊事件。

可以直接用標籤對象 . 想要的事件,並且設置事件值。

2)第二種方式註冊

 var img=document.createElement("img");//創建一個標籤
            img.setAttribute("src","img//xxx.jpg");//給標籤設置屬性
            img.setAttribute("onclick","cotyNode()")//給標籤添加事件
            domDiv.appendChild(img);//將新創建的標籤添加到div的下的最後位置

function cotyNode()
    {
        var domDiv=document.getElementsByTagName("div")[0];
        var newDom=domDiv.lastChild.cloneNode(false);
        domDiv.insertBefore(newDom,domDiv.firstChild);
    }


















發佈了65 篇原創文章 · 獲贊 20 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章