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=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 当系统停止跟踪触摸的时候触发

猜你喜欢