前端学习(二十三）DOM操作，事件（笔记）

javascript 组成部分
    1.ECMAScript
        javascript的核心解释器

2.DOM
        Document Object Modle         文档对象模型
        DOM操作
            获取元素
            改变样式
            改变内容
    3.BOM
        浏览器对象模型
            浏览器操作
            window.navigator.userAgent
            window.open()
            window.close()
============================================================
DOM操作
    获取元素
        document.getElementById()
            通过id获取一个元素
        document.getElementsByTagName()
            通过标签名获取一组元素
        document.getElementsByClassName()
            通过class获取一组元素
        document.querySelector()
            获取第0个
        document.querySelectorAll()
            获取一组
==========================================================
节点===标签===元素
    DOM树     页面结构关系
    获取子节点
        oEle.children
            只能获取一层
    获取父节点
        oEle.parentNode
             获取结构父级
        oEle.offsetParent
             获取定位父级
    获取兄弟节点
        获取上一个兄弟节点
            oEle.previousElementSibling
        获取下一个兄弟节点
            oEle.nextElementSibling
        注意：不兼容低版本IE浏览器
    获取首尾子节点
        首子节点
            aEle[0]
            oPrent.firstElementChild
        尾子节点
            aEle[aEle.length-1]
            oPrent.lastElementChild

获取标签名
        oEle.tagName

=========================================================
获取元素信息
    盒子模型
        width/height+padding+border
    盒子模型的宽高
        盒子模型的宽
            oEle.offsetWidth
        盒子模型的高
            oEle.offsetHeight

获取非行间样式
            function getStyle(obj,sName){
                return (obj.currentStyle||getComputedStyle(obj,false))[sName];
            }

获取元素的定位
        oEle.offsetLeft
        oEle.offsetTop

获取定位父级
        oEle.offsetParent
=========================================================
    创建
        document.createElement('标签名');

插入
        后面添加
        父级.appendChild(要添加的子级)
        某一个子级前面插入
        父级.insertBefore(要插入的元素,插入谁之前);
    删除
        父级.removeChild(要删的元素);
========================================================
事件
    事件对象         触发事件时的详细信息

需求:
            点击页面，弹出鼠标在页面中的位置

获取鼠标在可视区中的位置
            ev.clientX         鼠标X轴可视区中的位置
            ev.clientY         鼠标Y轴可视区中的位置

获取鼠标在页面中的位置
            ev.pageX         鼠标X轴页面中的位置
            ev.pageY         鼠标Y轴页面中的位置

需求:
            页面中有一个div，当鼠标移动的时候，div跟着鼠标动。

新的事件
                onmousemove         当鼠标移动的时候触发
============================================================
    拖拽     drag
        事件
            onmousedown                鼠标按下
                获取鼠标在div中的位置
                var disX = ev.pageX-oDiv.offsetLeft
                var disY = ev.pageY-oDiv.offsetTop
            onmousemove             鼠标移动
                改变div的left和top
                oDiv.style.left = ev.pageX-disX+'px';
                oDiv.style.top = ev.pageY-disY+'px';
            onmouseup                 鼠标抬起
                把onmousemove干掉
                把onmouseup干掉

问题一：
            鼠标没点就懂了
            解决：
                把onmousemove放在onmousedown里面
        问题二:
            鼠标移动过快，就移出div了
            解决:
                1.把div放大         不靠谱，设计和产品会找你拼命
                以下方法靠谱
                把onmousemove事件加给document
        问题三:
            鼠标抬起依然能动
            解决:
                正在onmouseup中把onmousemove干掉
        问题四:
            鼠标拖拽的时候，会选中页面内容
            解决:
                在onmousedown中把默认事件阻止
                return false;     注意一定要放在最后

扩展:
            限制范围拖拽
            得到l和t
            var l = ev.pageX-disX;
            var t = ev.pageY-disY;
            限制l和t的范围
            if(l<0){
                l = 0;
            }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                l = document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            if(t<0){
                t = 0;
            }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                l = document.documentElement.clientHeight-oDiv.offsetHeight;
            }

浏览器默认行为,浏览器默认事件
    return false;

鼠标右键
        oncontextmenu

document.documentElement              html
    document.body                         body

获取可视区宽高
    可视区宽度
        document.documentElement.clientWidth
    可视区高度
        document.documentElement.clientHeight

事件冒泡
    取消冒泡
        ev.cancelBubble = true;

平时没事的情况下不要取消。如果出现问题了才取消
========================================================
事件绑定(事件监听)
    给同一个元素加同一个事件可以加多次。
    解决事件冲突

不兼容低版本浏览器
    oEle.addEventListener('click', function(){

}, false);
    低版本浏览器
        oEle.attachEvent('onclick',function(){});

切记:
        addEventListener中 return false失效了
        ev.preventDefault();
        不兼容低版本浏览器

事件解绑
    oEle.removeEventListener('click',function(){},false);
    切记：不能使用匿名函数
==========================================================
    事件流     事件在程序中的走向
        DOM事件流         高级浏览器的事件流
            事件冒泡     事件捕获
            (冒泡阶段)     (捕获阶段)
            addEventListener第三个参数决定是什么?
                false             冒泡
                true             捕获
                捕获阶段只有addEventListener第三个参数是true才触发

IE事件流         低版本IE的事件流
            事件冒泡
            (冒泡阶段)

============================================================
事件流有几种？
    DOM事件流
    IE事件流
事件流的区别？
    DOM事件流有冒泡阶段和捕获阶段
    IE事件流有冒泡阶段

========================================================
if的简写
    if(条件){
        语句
    }
    简写
    条件&&语句;

true&&alert(1);
    false&&alert(1);

&&并且，两边的条件都是真的才算是真的

true&&alert(1);

true||alert(1);             不能弹
    false||alert(1);             能弹

(obj.currentStyle||getComputedStyle(obj,false))[sName]
===============================================================
onmouseover和onmouseout的bug
    onmouseover             移入
    onmouseout                 移出

换事件
    onmouseenter             移入
    onmouseleave             移出
===========================================================
事件委托(事件委派、事件派生)
    1.动态创建的元素加事件         解决
    2.循环加事件太麻烦             解决

核心：
        1.给父级加事件
        2.获取事件源
            var oSrc = ev.srcElement||ev.target;
==============================================================
window.onload
    当所有资源都加载完成之后触发

DOMReady                     推荐
    当html，css，js加载完毕执行
    给document添加事件
        DOMContentLoaded事件         不兼容低版本浏览器

DOM事件
        特点以DOM开头
        必须用事件绑定

事件
        DOM2事件
            onclick
            onmouseover
        DOM3事件         必须用事件绑定
            DOMContentLoaded

DOMReady另一种玩法
    document.onreadystatechange = function(){
        document.readyState
            interactive         准备
            complete             完成
        需要判断readyState是否是complete
        if(document.readyState=='complete'){
            //执行我们的代码
        }
    };
========================================================
总结:
    javascript的组成部分：
        ECMAScript             核心解释器
        DOM                 文档对象模型
        BOM                 浏览器对象模型
    DOM操作
        DOM树
            document
                html
                    head
                        title
                        made
                        style
                        link
                        script
                    body
                        div
                            p
                                a
                            a
                            ul
                        div
                        div
                        section
        获取子节点
            父级.children         获取第一层子节点     √
            父级.childNodes     不推荐用        ×
        获取父节点
            获取结构父级
                子级.parentNode
            获取定位父级
                子级.offsetParent
        获取兄弟节点
            上一个
                obj.previousElementSibling
            下一个
                obj.nextElementSibling
        获取首尾子节点
            首
                父级.firstElementChild
                父级.children[0];
            尾
                父级.lastElementChild
                父级.children[父级.children.length-1]

获取信息
            盒子模型的宽高
                obj.offsetWidth         盒子模型宽度
                obj.offsetHeight         盒子模型高度
            获取相对位置
                obj.offsetLeft
                obj.offsetTop
            获取可视区宽高
                document.documentElement.clientWidth
                document.documentElement.clientHeight
--------------------------------------------------------------
    事件
        事件对象
            包含了事件的详细信息
            切记：只能获取鼠标和键盘的
        获取鼠标在可视区中的位置
            ev.clientX/clientY
        获取鼠标在页面中的位置
            ev.pageX/ev.pageY
        事件绑定(事件监听)
            防止事件冲突
            obj.addEventListener('sEv',fn,false);
            事件解绑
            obj.removeEventListener('sEv',fn,false);
        阻止默认事件
            return false;
            但是遇到addEventListener不好使.
            用:    ev.preventDefault&&ev.preventDefault();
        事件流:
            DOM事件流
                冒泡阶段        捕获阶段
            IE事件流
                冒泡阶段
        onmosueover和onmouseout的bug
            解决：
                onmouseenter
                onmouseleave
        事件委托(事件派生，事件委派)
            给动态元素加事件
            1.给父级加事件
            2.获取事件源
                var oSrc = ev.srcElement||ev.target;
        DOMReady
            比window.onload快
            第一种         推荐
                document.addEventListener('DOMContentLoaded',function(){
                    //你的代码
                },false);
            第二种
                document.onreadystatechange = function(){
                    if(document.readyState=='complete'){
                        //你的代码
                    }
                };