DOM

2016-08-19  本文已影响12人  菲龍探雲
Paste_Image.png Paste_Image.png Paste_Image.png

2:getELementsByTagName(string)
得到一个类似数组的对象

Paste_Image.png

3:getELementsByClassName(string)
得到一个类似数组的对象

Paste_Image.png

4:querySelector(string)
只能得到一个对象


Paste_Image.png

5:querySelectorAll(string)
找到全部 得到一个类似数组的对象

Paste_Image.png Paste_Image.png Paste_Image.png

DOM2
同一个事件可以绑定多个函数


Paste_Image.png

1.attachEvent适用于IE9以下 addEventListener用于现代浏览器

2.参数不同
element.addEventListener(type,listener,useCapture);有三个参数
type:事件名称 (前面需要去掉如“on”)
listener:监听的函数
useCapture:监听的方式 true:捕获方式 false:冒泡方式 默认冒泡方式

element.attachEvent(type,listener);有两个参数
type:事件名称(前面有如“on”)
lsetener:监听的函数

3.事件的作用域不同

!function addEventListenerVSattachEvent (){
    window.innerText="this is window";
    var oA=document.getElementsByTagName('a')[0];
    if (!oA) return false;
    if (oA.addEventListener){oA.addEventListener("click",function(){
        alert(this.innerText)
    })}
        else if(oA.attachEvent){
            oA.attachEvent("onclick",function(){
                alert(this.innerText)
            })
        }
        else{
            return false;
        }
    }()
Paste_Image.png Paste_Image.png
<div><button>click me<button>
</div>  

ie事件冒泡
由目标往上级标签传播 点击button button-->div-->body-->html-->document-->window

DOM2
先由最上级来捕获知道目标再由目标往上级标签传递 window-->document-->html-->body-->div-->(事件捕获)button(事件冒泡)-->div-->body-->html-->document-->window

阻止事件冒泡
标准 e.stopPropagation() IE e.cancelBubble = true

阻止默认事件
标准e.preventDefault() IE e..returnValue = false

本教程版权归菲龍探雲和饥人谷所有,转载须说明来源

上一篇下一篇

猜你喜欢

热点阅读