JS DOM屬性+JS事件_ZenDei技術網路在線

DOM屬性 console.log(ele.attributes) 獲取ele元素的屬性集合 ele.attributes.getNamesItem(attr).nodeValue 獲取指定屬性值 ele.attributes[attr].nodeValue 獲取指定屬性值 ele.attribut ...

DOM屬性

console.log(ele.attributes) 獲取ele元素的屬性集合

ele.attributes.getNamesItem(attr).nodeValue 獲取指定屬性值

ele.attributes[attr].nodeValue 獲取指定屬性值

ele.attributes.removeNamedItem(attr) 刪除指定屬性

創建屬性並賦值：

var attr=document.createAttribute(attr); 創建屬性對象

attr.value=value; 給屬性賦值

ele.attributes. setNamedItem (attr) 設置屬性值

getAttribute()能獲取元素的固有屬性，也能獲取元素的自定義屬性

只能獲取單個元素節點的屬性值，且不屬於document對象，屬於單個元素節點對象

ele.getAttribute(attr)

ele.setAttribute(attr,value) 設置屬性

ele.removeAttribute(attr) 移除屬性

布爾值屬性-案例：

inputs[i].checked = 1/true/’checked’; 選中

inputs[i].checked = 0/false/null; 沒被選中

inputs[i].removeAttribute('checked');

options[i].selected=true;

input[i].readonly=true;

select.multiple=true;

div.hidden=true;

字元串屬性：

獲取data屬性

elem.dataset.toggle 獲取data-toggle屬性

elem.dataset.xxxYyy 獲取data-xxx-yyy屬性

獲取class屬性

elem.className 獲取所有class屬性

自定義class操作方法：

首先貼出domReady.js，後面常常會用到，這裡只貼出一次！！！

function myReady(fn){

    //對於現代瀏覽器，對DOMContentLoaded事件的處理採用標準的事件綁定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE模擬DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;

        //只執行一次用戶的回調函數init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM樹未創建完之前調用doScroll會拋出錯誤
                d.documentElement.doScroll('left');
            } catch (e) {
                //延遲再試一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 沒有錯誤就表示DOM樹創建完畢，然後立馬執行用戶回調
            init();
        })();

        //監聽document的載入狀態
        d.onreadystatechange = function() {
            // 如果用戶是在domReady之後綁定的函數，就立馬執行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>class attributes</title>
    <script src="domReady.js"></script>
    <script>
      var CC = {
        // 獲取class，返回數組
        getClass: function(ele) {
          // 將多個空格正則匹配成一個空格
          // 然後將字元串按照空格來分割成數組
          return ele.className.replace(/\s+/, " ").split(" ");
        },

        // 判斷是否含有某個class
        hasClass: function(ele, cls) {
          // 查詢某個類名是否出現在所有類名集合中
          return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");
        },

        // 給元素添加某個類
        addClass: function(ele, cls) {
          // 判斷類名是否已經存在
          if (!this.hasClass(ele, cls))
            ele.className += " " + cls;
        },

        // 移除某個類
        removeClass: function(ele, cls) {
          if (this.hasClass(ele, cls)) {
            // 正則：開頭可以有空格或者沒有空格
            //       結尾可以有空格或者沒有空格
            //       gi表示查找整個字元串，並且忽略大小寫
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi");
            // 將匹配到的類名用一個空格來代替
            ele.className = ele.className.replace(reg, " ");
          }
        },

        // 某個類：不存在就添加；存在就移除
        toggleClass: function(ele, cls) {
          if (this.hasClass(ele, cls)) {
            this.removeClass(ele, cls);
          } else {
            this.addClass(ele, cls);
          }
        }
      };

      myReady(function() {
        var body = document.body;
        console.log(CC.getClass(body));
        console.log(CC.hasClass(body, 'bbb'));
        CC.addClass(body, 'ccc');
        CC.removeClass(body, 'aaa');
        CC.toggleClass(body, 'bbb');
      });
    </script>
  </head>
  <body class="aaa bbb aaa">
      TEST
  </body>
</html>

elem.classList.add(cls) 添加class

elem.classList.remove(cls) 移除class

elem.classList.contains(cls) 是否存在某個class

elem.classList.toggle(cls) 切換某個class

elem.classList.toString() 字元串形式輸出所有class

JS事件

事件監聽函數三種方式：

1、直接在html中定義，不建議使用

<button onclick=”function(){alert(‘clicked’);}”>按鈕</button>
<body onload=”init()”></body>

2、DOM 0級事件：元素只能綁定一個監聽函數

先獲取DOM元素，再綁定事件

var btn = document.getElementById("btn");
btn.onclick = function() {
    alert("DOM0級事件綁定方式 ");
}

3、DOM 2級事件：可以綁定多個監聽函數，還有捕獲和冒泡控制

var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
    alert("DOM2級事件綁定方式")
}, false);

移除事件：

btn.removeEventListener('click', Dom);

IE事件流：

IE8及以下不支持DOM 2級

沒有事件捕獲，預設就是冒泡

var btn = document.getElementById("myBtn");
var clickme = function() {alert("Clicked");}
btn.attachEvent("onclick", clickme); /*綁定事件*/
btn.detachEvent("onclick", clickme); /*移除事件*/
//補充：IE中this指向window
btn.attachEvent("onclick",function(){alert(this === window); })

跨瀏覽器事件處理程式：相容IE

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>跨瀏覽器事件處理程式</title>
    </head>
    <body>
        <button id="myBtn">點擊我</button>
        <script type="text/javascript">
            var EventUtil = {
                //綁定事件
                addHandler:function(element,type,handler){
                    if(element.addEventListener){
                        //Chrome Firefox IE9等     addEventListener 
                        element.addEventListener(type,handler,false);
                    }else if (element.attachEvent) {
                        //IE8及IE8以下的瀏覽器     attachEvent 
                        element.attachEvent("on"+ type,handler);
                    } else{
                        // 這種情況幾乎不存在
                        element["on"+type] = handler 
                    }
                },
                //移除事件
                removeHandler: function(element,type,handler){
                    if(element.removeEventListener){
                        //Chrome Firefox IE9等 
                        element.removeEventListener(type,handler,false);
                    }else if (element.detachEvent) {
                        //IE8及IE8以下的瀏覽器     
                        element.detachEvent("on"+type,handler);
                    } else{
                        // 這種情況幾乎不存在
                        element["on"+type] = handler
                    }
                }
            }
            var btn = document.getElementById("myBtn");
            var handler = function(){
                alert("Clicked");
            }
            EventUtil.addHandler(btn,"click",handler);
            EventUtil.removeHandler(btn,"click",handler);
        </script>
    </body>
</html>

事件委托與事件冒泡

事件周期：

1、事件捕獲：沿著DOM樹（直系親屬）向下

2、事件執行

3、事件冒泡：沿著DOM樹（直系親屬）向上

addEventListener()最後一個參數：false事件冒泡 true事件捕獲

事件委托：原理就是事件冒泡

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件冒泡和事件捕獲</title>
    </head>

    <body>

        <div id="parent">
            <div id="child" class="child">點擊兒子</div>
        </div>
        <ul id="ul">
            <li id="one">item1</li>
            <li id="two">item2</li>
            <li id="thr">item3</li>
            <li id="four">item4</li>
            <li id="fiv">item5</li>
            <li id="six">item6</li>
        </ul>
        <script type="text/javascript">
            //事件委托，利用了冒泡機制
            var ul = document.getElementById("ul");
            ul.addEventListener("click", function(event) {
                
                if(event.target.id == "one") {
                    alert(1)
                } else if(event.target.id == "two") {
                    alert(2)
                } else if(event.target.id == "thr") {
                    alert(3)
                } else if(event.target.id == "four") {
                    alert(4)
                } else if(event.target.id == "fiv") {
                    alert(5)
                } else {
                    alert(6)
                }
            }, false);
        </script>
    </body>

</html>

Event對象屬性與方法

event.type 事件類型：比如click

event.target 事件目標對象（如果事件綁定在父元素上，點擊了子元素，那麼目標對象是子元素）

event.currentTarget 事件綁定的對象（如果事件綁定在父元素上，點擊了子元素，那麼綁定對象是父元素）

event.preventDefault 阻止預設行為

<a href="http://baidu.com" id="a">跳轉鏈接</a>
var a = document.getElementById("a");
a.addEventListener("click",function(event){
                event.preventDefault();
                alert(11)
            });

event.stopPropagation 阻止事件冒泡或者捕獲

var parent = document.getElementById("parent");
            var child = document.getElementById("child");
            parent.addEventListener("click",function(){
                alert("parent")
            })
            child.addEventListener("click",function(event ){
                alert("child");
                //阻止冒泡
                event.stopPropagation();
            })

event.clientY 瀏覽器頂部底邊到滑鼠的位置，不計算滾動軸的距離

event.pageY 瀏覽器頂部底邊到滑鼠位置，但是它計算滾動軸的距離

event.screenY 屏幕頂部到滑鼠位置（比如把瀏覽器縮小，但仍然計算的是電腦屏幕）

IE中的Event對象及方法

event.type 事件類型

event.returnValue = false; 阻止預設事件

event.cancelBubble = true; 阻止事件冒泡

event.srcElement 觸發對象（點擊誰就是誰）

Event對象跨瀏覽器相容寫法：相容IE

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Event對象跨瀏覽器相容寫法</title>
    </head>

    <body>
        <div id="parent">
            <div id="child">點擊我</div>
        </div>
        <a href="http://www.baidu.com" id="a">跳轉鏈接</a>
        <script type="text/javascript">
            //Event addEventListener chrome firefox  IE9  event.target   preventDefault    stopPropagation
            //Event attachEvent  IE8系列的     event.srcElement     returnValue    cancelBubble 
            var EventUtil = {
                //綁定事件
                addHandler: function(element, type, handler) {
                    if(element.addEventListener) {
                        //Chrome Firefox IE9等     addEventListener 
                        element.addEventListener(type, handler, false);
                    } else if(element.attachEvent) {
                        //IE8及IE8以下的瀏覽器     attachEvent 
                        element.attachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = handler
                    }
                },
                //移除事件
                removeHandler: function(element, type, handler) {          
                    if(element.removeEventListener) {
                        //Chrome Firefox IE9等 
                        element.removeEventListener(type, handler, false);
                    } else if(element.detachEvent) {
                        //IE8及IE8以下的瀏覽器   
                        element.detachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = handler
                    }
                },
                // 獲取被點擊的元素
                getTarget: function(event) {
                    return event.target || event.srcElement;
                },
                // 阻止預設事件
                preventDefault: function(event) {
                    if(event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },
                // 阻止冒泡或者捕獲
                stopPropagation: function(event) {
                    if(event.stopPropagation) {
                        event.stopPropagation()
                    } else {
                        event.cancelBubble = true;
                    }
                }
            }
            
            var parent = document.getElementById("parent");
            EventUtil.addHandler(parent, "click", function(event) {
                alert("parent被觸發了")    
            })
            
            var child = document.getElementById("child");
            EventUtil.addHandler(child, "click", function(event) {
                alert("child被觸發了")    
                var target = EventUtil.getTarget(event);
                console.log(target);
                //阻止事件冒泡
                EventUtil.stopPropagation(event)
            })
            var a = document.getElementById("a");
            EventUtil.addHandler(a, "click", function(event) {
                EventUtil.preventDefault(event);    
            })
        </script>
    </body>

</html>

JS事件類型：

【UI事件類型】

1、load事件

當頁面完全載入後在window上面觸發

        EventUtil.addHandler(window, "load", function(e) {
            alert("Loaded!");
        });

圖片預載入(將圖片緩存到記憶體中

            var image = new Image();
            EventUtil.addHandler(image, "load", function(event){
                alert("Image loaded!");
            });
            image.src = "smile.png";

js動態載入完畢

            var script = document.createElement("script");
            EventUtil.addHandler(script, "load", function(event){
            alert("js Loaded");
            });
            script.src = "jquery.js";
            document.body.appendChild(script);

css動態載入完畢

            var link = document.createElement("link");
            link.type = "text/css";
            link.rel = "stylesheet";
            EventUtil.addHandler(link, "load", function(event){
            alert("css Loaded");
            });
            link.href = "example.css";
            document.getElementsByTagName("head")[0].appendChild(link);

2、unload事件用戶從一個頁面切換到另一個頁面

            EventUtil.addHandler(window, "unload", function(event){
                alert("Unloaded");
            });

3、resize事件

            EventUtil.addHandler(window, "resize", function(event){
                alert("Resized");
            });

4、 scroll事件. 主要針對新舊瀏覽器

        EventUtil.addHandler(window, "scroll", function(event){
            alert(111)
            });

【焦點事件類型】

1、 blur 失去焦點

2、 focus 不支持冒泡，獲取焦點

3、 focusin 同focus一樣，支持冒泡

4、 focuout 同blur一樣

【滑鼠事件】

1、 click 點擊

2、 dblclick 雙擊

3、 mousedown 滑鼠按下

4、 mouseup 滑鼠鬆開

mousedown+mouseup=click

5、 mousemove 滑鼠移動

6、 mouseout 離開目標元素或子元素

7、 mouseover 進入目標元素或子元素

8、 mouseenter 進入目標元素

9、 mouseleave 離開目標元素

滑鼠單擊+鍵盤按鍵

            var div = document.getElementById("myDiv");
            EventUtil.addHandler(div, "click", function(event) {
                var keys = new Array();
                if(event.shiftKey) {
                    keys.push("shift");
                }
                if(event.ctrlKey) {
                    keys.push("ctrl");
                }
                if(event.altKey) {
                    keys.push("alt");
                }
                if(event.metaKey) {
                    keys.push("meta");
                }
                console.log("keys:" + keys.join(","));
            });

mousedown滑鼠點擊細分：

event.button == 0 滑鼠左鍵

event.button == 1 滑鼠中鍵

event.button == 2 滑鼠右鍵

IE8派系

event.button == 0 沒有按下按鈕

event.button == 1 按下主滑鼠按鈕

event.button == 2 按下次滑鼠按鈕

event.button == 3 按下同時按下主、次滑鼠按鈕

event.button == 4 按下中間滑鼠按鈕

            EventUtil.addHandler(myBtn, "mousedown", function(event) {
                console.log("mousedown");
                console.log(event.button) 
            })

【鍵盤事件】

event.keyCode 鍵碼

event.charCode ASCII碼（適用於keypress）

1、 keydown 任意鍵觸發

2、 keyup 釋放某鍵

3、 keypress 字元鍵觸發

4、 textInput 鍵盤輸入（event.data獲取）

【DOM改變相關】

1、 DOMNodeRemoved document中任意元素被刪除

2、 DOMNodeInserted document中任意元素被添加

3、 DOMSubtreeModified document結構中發生任何變化

4、 DOMNodeRemovedFromDocument 從文檔中移除之前

5、 DOMNodeInsertedIntoDocument 從文檔中添加之前

重點：

1、 DOMContentLoaded

與load區別：在DOM樹結構完成之後就會觸發，不理會圖像。javascript文件、css文件或其他資源是否已經下載，所以比load快

2、 readstatechange （不太好用）

支持IE、firfox、opera，提供文檔或者元素載入過程，但是很難預料與load事件一起使用時候

（1）document.readState == uninitialized 尚未初始化

（2）loading 對象正在載入數據

（3）interactive 可以操作對象，但還沒有完全載入

（4）對象已經載入完畢

3、hashchange #後面的值變化，只能給window添加

            EventUtil.addHandler(window, "hashchange", function(event) {
                console.log(event.oldURL + ":"+event.newURL);
            })

【移動端常用】

1、 touchstart

            EventUtil.addHandler(mybtn, "touchstart", function(event) {
                console.log("當前觸摸屏幕的觸摸點數組："+event.touches)
                console.log("數組中只包含引起事件的觸摸點信息："+event.changedTouches)
                console.log("只包含放在元素上的觸摸信息："+event.targetTouches)
            });

2、 touchmove 手指在屏幕上滑動

3、 touchend 手指在屏幕上移開

4、 touchcancel 當系統停止跟蹤觸摸的時候觸發