event(1)

event
event(事件流)是 window对象的一个属性
在JS中事件有2种类型 一种是冒泡类型 一种是捕获类型
冒泡类型最先是在IE中出现,而捕获类型最先在标准的DOM中出现,不过最终IE得胜 从而在标准的DOM中有捕获和冒泡两种
冒泡的顺序是从下到上p>div>body>document,捕获恰恰相反

事件监听的方法
事件监听的方法分为两种,传统事件监听和非传统事件监听

传统的事件监听如下
1. <div onclick=test1()>111</div>
<script>
function test1(){
alert("11")
}
</script>
2.<div id ="div1">222</div>
<script>
document.getelementById("div1")
div1.onclick=function(){
alert("222")
}
</script>

非传统的事件监听 非传统事件也分为2种,一种是IE事件监听,一种是标准的DOM事件监听
IE事件监听
在IE事件监听中有2个函数,一个是添加事件处理函数,一个时删除事件处理函数
[obj].attachEvent('event_style',event_name);//添加事件处理函数
[obj].detachEvent('event_style',event_name);//删除事件处理函数
<body>
<div id="div1">IE事件监听</div>
<script>
window.onload=function(){//页面加载
var div1=document.getelementById("div1");//得到对象
div1.attachEvent('onclick',test1)//添加IE事件函数
}
function test1(){
//调用添加的事件函数
alert("333")//打印测试
div1.detachEvent('onclick',test1)//删除这个事件处理函数
}
</script>
</body>
标准的DOM事件监听
在标准的DOM事件监听中也有2个函数,一个是添加事件处理函数,一个是删除事件处理函数,这两个函数和IE的不行同,而且参数也不相同,有3个参数,第一个参数是事件类型,第二个参数是函数名,第三个参数有两个值,true值代表是捕获事件,false是冒泡事件,例子如下
[obj].addEventListener("event_style",event_name,event_modle)//添加事件处理函数
[obj].removeEventListener("event_style",event_name,event_modle)//删除事件处理函数

<body>
<div id="div2">444</div>
</body>
<script>
window.onload=function(){
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
//在添加事件函数这行代码,大家可能发现和IE有所不同,不同点2点,第一点就是事件类型和IE不同,缺少了'on'这单词,不过大家不要惊讶,这本身就是存在的,所有大家在使用的时候一定要切记,onmouseover变成mouseover等等,还有第三个参数代表,事件模型,在这里是冒泡类型,因此用false
}
</script>
function test2(){
alert("444");
div2.removeEventListener('click',test2,false)
//删除这个事件处理函数
}

到底我们何时用传统事件何时用非传统事件呢?

大家可能体会到,传统的事件只能处理一个对象,而如果我们要处理多个时呢,用非传统的话,这样大大的会提高我们代码的可阅读性,在非传统的事件处理函数中,可以存在多个事件函数

window.onload=function(){
var div1=document.getelementById("div1");
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
div1.addEventListener("click",test1,false)
//从上面的代码看,是不是我们的代码可阅读性提高了不少呢?
}

原文地址:https://www.cnblogs.com/limit1/p/4012275.html