JS DOM屬性+JS事件

時間 2020-01-02

標籤 dom 屬性事件欄目 JavaScript 简体版

原文原文鏈接

DOM屬性javascript

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

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

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

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

建立屬性並賦值：jquery

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

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

事件監聽函數三種方式：

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

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

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

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

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

三、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>

事件委託與事件冒泡

事件週期：

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

二、事件執行

三、事件冒泡：沿着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事件類型】

一、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);

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

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

三、resize事件

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

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

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

【焦點事件類型】

一、 blur 失去焦點

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

三、 focusin 同focus同樣，支持冒泡

四、 focuout 同blur同樣

【鼠標事件】

一、 click 點擊

二、 dblclick 雙擊

三、 mousedown 鼠標按下

四、 mouseup 鼠標鬆開

mousedown+mouseup=click

五、 mousemove 鼠標移動

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

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

八、 mouseenter 進入目標元素

九、 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）

一、 keydown 任意鍵觸發

二、 keyup 釋放某鍵

三、 keypress 字符鍵觸發

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

【DOM改變相關】

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

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

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

四、 DOMNodeRemovedFromDocument 從文檔中移除以前

五、 DOMNodeInsertedIntoDocument 從文檔中添加以前

重點：

一、 DOMContentLoaded

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

二、 readstatechange （不太好用）

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

（1）document.readState == uninitialized 還沒有初始化

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

（3）interactive 能夠操做對象，但尚未徹底加載

（4）對象已經加載完畢

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

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

【移動端經常使用】

一、 touchstart

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

二、 touchmove 手指在屏幕上滑動

三、 touchend 手指在屏幕上移開

四、 touchcancel 當系統中止跟蹤觸摸的時候觸發