事件
1:事件流
事件流描述的是从页面中接收事件的顺序。IE是事件冒泡( 从下往上一层一层的往上传)，其他的为事件捕获(从
docunment一层一层的往下捕获).事件处理程序,
onclick,onload,onmouseover,每个都会创建一个封装元素属性值的函数，函数中有一个局部变量event，为事件对象.
DOM0级对事件的处理
一:简单 二:具有跨浏览器的优势。
btn.onclick = function(){};被认为是该元素的方法,可以用方法中用this操作元素, 取消btn.onclick=null缺点,后面定义的
onclick()会把前面的覆盖
DOM2级事件处理程序
addEventListener(),removeEventListener(),接收三个参数,1:要处理的事件名,2:作为事件处理程序的函数3: 布尔值.(true为表示事件在捕获阶段调用事件处理程序,false为在事件冒泡阶段调用事件处理程序)好处:可以添加多个事件处理程序,触发顺序按照添加的顺序触发.
通过
addEventListen()添加的事件处理程序只能用removeEventListener()移除,移除时传入的参数必须和处理传入的参数必须一致.这就意味着通过addEventListener()添加的匿名函数将无法移除.必须要var btn = document.getElementById("myBtn"); var handle = function(){alert(this.id)}; btn.addEventListener("click",handle,false); //移除 和添加方法的参数一样 btn.removeEventListener("click",handle,false)
IE事件处理程序
IE实现了和
DOM类似的两个方法,attachEvent()和detachEvent()，这两个方法只接受两个相同的参数,事件处理程序名称和事件处理函数.由于IE8只支持事件冒泡,通过attachEvent添加的事件只会添加到冒泡阶段。注意添加的是onclick不是上面的click.当调用detachEvent()时，必须像removeEventListener()一样传入的参数一样，意味着匿名函数不能被移除。添加多个方法的时候,执行顺序按添加相反的顺序触发var btn =document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert(this === window); //true })
事件对象
在触发
DOM事件时,都会产生一个event阻止特定事件的默认行为.用
preventDefault(). 例如阻止<a></a>的跳转。
var link=document.getElemetById("myLink");
link.onclick=function(event){event.preventDefault()}//只有cancelable属性为true的才能用preventDefault也可以return false;来阻止
event.stopPropagation()用于立即停止事件在DOM层次中的传播,取消进一步的事件捕获或捕获.从而避免触发不相干的的事件绑定.注意cancelBubble属性 也可以阻止事件捕获.IE为事件冒泡.event.stopPropagation()都可以阻止。总的来说
event.preventDefault();event.stopPropagation()来阻止。
