首页 > 代码库 > JS里面的DOME
JS里面的DOME
一、JS中的DOM0事件模型
1、内容模型:直接将函数名作为HTML标签的某个事件属性的属性值;
例 rg:<button onlick="func()">按钮</button>
2、脚本模型:在JS脚本中通过事件属性进行绑定 ;
例 eg:window.onlead = function(){}
但是它也有局限性即:同一个节点只能绑定一个同类型事件
二、JS中的DOM2事件模型
1、添加事件绑定:btn1.addEvent("onlick"函数)
其他浏览器:btn1btn1.addEventListener("click"函数 ,true/false);
参数三:false(默认);表示事件冒泡,true:表示事件捕获
兼容写法:if(btn1btn1.addchEvent){
btn1.btn1.addchEvent
}else{
btn1.btn1.addEventListener()
}
优点:同意节点,可以添加多个同类型事件的监听器
2、取消事件绑定:
注: 如果取消事件绑定,那么在绑定事件时,回调函数必须使用有名函数,二不能使用匿名函数,
因为在取消事件绑定时,需传入函数名
removeEventListener(“click,函数名) detachEvent("onclick"函数名)
3、阻断事件冒泡 :
(1) IE浏览器中将e.canceBubble属性设为true
其他浏览器:调用e.stopPropagetion();方法
兼容写法:function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
(2) 阻止默认事件:
IE浏览器中:将e.returnValue属性设为false;
其他浏览器:调用e.preventDefault();方法
兼容写法:function eventHandler(e) {
e = e || window.event;
防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = http://www.mamicode.com/false; //IE
}
}
三、JS中的事件流
1、元素冒泡:当某DOM元素触发 某事件是时 会从当前DOM元素开始,逐个触发其祖先元素的同类事件,指导DOM根节点
DOM模型 均为冒泡事件
IE中使用,attachEvent()添加的事件 均为冒泡;
其他浏览器,.addEventListener添加事件 ,当三个事件参数为false时 为冒泡
2、事件捕获 :当某DOM元素触发某事件时,会从DOM根节点开始,逐个触发其祖先元素的同类型事件,知道触发到当前元素为止
只能使用.addEventListener添加事件,并设置四三个参数为ture时,才能进行捕获当前元素
注:冒泡事件:当前元素--->根节点 捕获事件:根节点--->当前元素
JS里面的DOME