JS DOM屬性+JS事件-有解無憂

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=https://www.cnblogs.com/moon3/p/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="https://www.cnblogs.com/moon3/p/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 >
      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 onl oad=”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" >點擊兒子</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 = https://www.cnblogs.com/moon3/p/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 當系統停止跟蹤觸摸的時候觸發

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2150.html

標籤：其他

上一篇：一篇長文說 git 基礎

下一篇：JS高級---把亂數物件暴露給window成為全域物件