js之基础篇三

js之事件

**1.      childNodes 只读 子列表集合
        标准下：包含了所有的文本节点和元素节点
        非标准(ie)：只包含元素节点，并且不包含非法嵌套的元素。

        元素节点：1
        属性节点：2
        文本节点；3
        12种类型nodeType
        获取所有的子节点包括空格

        aLi[i].style.background = 'red';
        包含了文本节点，文本节点没有style所以将会报错

2.
console.log(oUl.attributes[0].name + ' ' + oUl.attributes[0].value);
属性值和名称

3.

只包含元素节点
oUl.children

4.

firstChild:第一个子节点   只读
标准下:会包含所有的所有节点，文本·元素
非标准下：只包含元素节点
firstElementChild:标准下第一个元素节点，非标准没有此属性.

5.
        var oFirst = oUl.firstElementChild || oUl.firstChild;
        //当没有子节点时将会出错
        if(oUl.children[0]) {
            oUl.children[0].style.background = 'aqua';
        }

        var oLast = oUl.lastElementChild || oUl.lastChild;
        oLast.style.background = 'red';

        var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
        oNext.style.background = 'green';

        var oPrevious = oLast.previousElementSibling || oLast.previousChild;
        oPrevious.style.background = 'blue';

6.
     parentNode:父节点
     offsetParent
     (第一个有定位的父元素，没有则默认为body,IE6默认为html.)

7.
        offsetLeft[Top]:当前元素到定位父级元素的距离
        也就是到offsetParent的距离
        没有定位父级:
        offsetParent:body
        offsetLeft:html

        有定位父级:
        自己有定位：到父级的距离

        IE 6,7自己没有定位 到body

8.
    width:样式宽
    clientWidth: width + padding 可视区域的宽，，比如有滚动条则其他区域看不见
    offsetWidth:占位宽 width + padding + border
    offsetLeft/Top
    scrollLeft/Top
    两个距离两个宽度
9.
            div1.style.width只可以获得内嵌样式，写入的也是内嵌样式，不改变css里面的值
            console.log(getComputedStyle(oDiv).width);//100
            console.log(oDiv.clientWidth);            //120
            console.log(oDiv.offsetWidth);            //122

10.
            var pos = {
                'left' : 0,
                'top' : 0
            };
            while (obj) {
                pos.left += obj.offsetLeft;
                pos.top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            每次都找到与父元素的距离并且相加，最终得到与页面的最终距离。

11.
    createElement('tagName');appendChild(obj);insertBefore(obj,beforeObj)
    relaceChild(obj,beforeObj)
    createTextNode;
    insertBefore  IE省略第二个参数报错
    其他标准，当做appendChild()

    appendChild，insertBefore，replaceChild，removeChild;
    操作原有的节点，所有的方法将使原来的节点删除；将原来的第一个替换最后一个
    那么第一个将变为最后一个，第一个删除；相当于剪切，粘贴





**

DOM事件

1.    open(url,target...)     返回新打开窗口的window对象
    第一个默认为空白窗口
    第二个默认为新窗口

    window.close(): 1.火狐下面无法关闭
            chrome: 2.关闭
             IE   : 3.询问用户
    obj.close()可以关闭

2.
window.navigator.userAgent
window.location

3.getElementsByClassName    有可能name是复合类名 class=box box1 则找出来的不是这个

4.
addClass{
    1.没有class直接加
    2.有，查看有没有存在要加入的class       没有再加入
}
removeClass{
    判断有class才进行删除,查找到classname的index不是-1则删除。
}

5.
    不写tbody浏览器也会自动增加，所以最好每次写上，避免出现不必要错误（导致table.firstChild每次都是tobody）
    tHead
    tBodies
    tFoot
    rows
    cells
        var newOtd = oTab.tBodies[0].rows[1].cells[2].innerHTML;

6.
处理表单：
用name属性调用更加方便    form[0].name;

        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
        <!-- name必须一致才可以当做同一组单选来操作，否则看做是多组每组一个可以同时选择-->
        <!-- select的value值就是选中的选项的value值相当于selected -->
    <select name="city" value="">
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai" selected="selected">上海</option>
    </select>

   onchange
    text:标准下光标离开了才会触发
    radio/checkbox:标准下值改变了就触发
        非标准下改变了光标离开了才触发

7.
    onsubmit: 事件
    submit(): 提交的方法
    reset(): 重置不是清空默认的还在

            oForm.onsubmit = function () {
                if(oForm.text1.value == '') {
                    alert('请输入内容');
                    return false;
                }
             oForm.onsubmit = false;//阻止提交
            };

            oForm.onreset = function () {
                return confirm('你确定要重置？');
            }

             setTimeout(function () {
                 oForm.submit();
             },2000);
             //定时提交

8.
    可视尺寸
    document.documentElement.clientWidth
    滚动条的距离：
    document.documentElement.scrollTop/left
    document.body.scrollTop/left
    内容的宽高度：
    document.documentElement.scrollWidth/height
    document.body.scrollWidth/height
    文档宽高：
    document.documentElement.offsetWidth/height
    document.body.offsetWidth/height

    width:样式宽
    clientWidth: width + padding 可视区域的宽，，比如有滚动条则其他区域看不见
    offsetWidth:占位宽 width + padding + border

    onscroll,resize都是按时间算的，时间越长那么数字越大
9.
        window.onscroll = function () {
            document.title = i++;
        };
        window.onresize = function () {
            document.body.innerHTML = count++;
        };
        document.documentElement.scrollTop || document.body.scrollTop

Event事件

1.
        通过一些方式给元素设置焦点
        1.点击
        2.tab
        3.js
        onfocus:当元素获取焦点时触发
        几个方法：
        focus(),blur(),select();
        可以使元素开始获得焦点使用户有个好的体验
        select()全选

2.
    一个函数是不是事件函数取决于调用，而不是定义
    event:   全局下：chrome:undefined,IE:null。ff:报错
             ff，chrome，IE标准下：事件对象通过第一个函数参数传入，非标准IEundefined
    event = event || window.event;
    onmousemove:触发频率不是像素而是间隔时间，(很短)

3.
    事件冒泡：从最底层一直到window
    没有加事件的情况下，发生了事件但是没有给它加动作。发生了click但是没有做事情。
    cancelBubble = true;取消冒泡机制.

    利用这个机制，只需要在父级加事件函数即可，少写很多代码！
    不需要冒泡的特例：只有取消了冒泡机制不会影响到父级。

4.
    利用事件冒泡机制只要对父元素进行操作，则子元素执行动作时父元素也会察觉到

5.
                if(obj.addEventListener) {
                    obj.addEventListener(eventName,fn,false);
                } else {
                    obj.attachEvent('on' + eventName,function () {
                        fn.call(obj);
                        //兼容IE问题
                    });
                }

Event事件二

1.
点击事件触发的顺序是先从外层进入到里层，再从里层到外层一共是一个来回；
而addEventListener(eventName,fn,boolean);true(捕获--进来时触发)false(冒泡--出去时触发)

2.
解除事件：
DOM0级事件
obj.onclick = null;  ----  on
ie:obj.detachEvent(事件名称('onclick')，函数名称)，
其他obj.removeEventListener(事件名称('click')，函数名称,boolean)参数要一致

3.
onkeydown:键盘按下触发事件
onkeyup:键盘松开触发事件
event.keyCode: 数字类型 键盘按下的键
shiftKey,ctrlKey,altKey ---- 16 17 18 返回boolean值Enter 13

document.onkeydown = function (ev) {
ev = ev || event;
alert(ev.ctrlKey + ev.keyCode);
};

4.
           事件默认行为：当一个事件发生时浏览器默认发生的事情！
            滚动条，a标签......
            阻止默认行为在当前事件发生的处理函数return false。(只阻止默认行为)
            onclick  ----   return false;
            addEventListener  ----  ev.preventDefalut();
                if(event.preventDefault) {
                    event.preventDefault();
                }
                return false;

            oncontextmenu右键菜单事件，当右键菜单(环境菜单)显示出来再触发

           document.oncontextmenu = function (ev) {
                return false;
            };
5.
利用按键进行移动，根据方向键的判断让div的left进行变化。

6.
            document.onclick = function (ev) {
                ev = ev || event;
                alert(ev.ctrlKey);

            };
            判断点击时同时按下的键。