第一部分: HTML事件处理程序第二部分:
第二部分: DOM0级事件处理程序
var button=document.getElementById("button"); button.onclick=function(){ alert("clicked"); } button.onclick=function(){ alert("again"); } button.onclick=null;上面这段代码是使用了 DOM0级事件处理程序,该方法的缺点是 1 我们不能给一个元素同时添加两个事件。 2 我们不能控制元素的事件流(捕获or冒泡)。
第三部分:DOM2级事件处理程序
var hander=function(){ alert("点我干嘛!") }; var button=document.getElementsByTagName("button")[0]; button.addEventListener("click",hander,false); button.removeEventListener("click",hander,false);上面这段代码是DOM2级事件处理程序,该方法的优点是可以人为的控制冒泡和捕获。需要注意的是该方法在事件处理程序为匿名函数的情况下无法移除。
第四部分:IE事件处理程序
var btn=document.getElementsByTagName("button")[0]; btn.attachEvent("onclick",function(){ alert("nihao") });该方法是IE专用,只支持事件冒泡,匿名函数也不能移除。都会添加到冒泡阶段,使用detachEvent()移除。 第五部分:跨浏览器的事件处理程序
var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//注意:这里默认使用了false(冒泡) }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false);//注意:这里默认使用了false(冒泡) }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } };DOM中的事件对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
阻止默认事件 --表单提交,a标签跳转,右键菜单 1 return false; 2 event.preventDefault(); W3C标注,IE9以下不兼容。 3 event.returnValue=false;兼容IE;
事件源对象
event.target 火狐只有这个 event.srcElement IE只有这个。 这两谷歌都有。事件原对象顾名思义就是源头对象,就是你点击的对象。
事件委托 今天我又重新看了一下事件委托这一块的知识,然后有了一点自己的心得体会。事件委托就是事件冒泡以及事件对象的结合体,利用事件冒泡,然后在利用事件的源对象进行操作。
var olist = document.getElementsByTagName('ul')[0]; var lis = document.getElementsByTagName('li'); olist.addEventListener('click', function(e) { var e = e || window.event; var tar = e.target || e.srcElement; console.log(tar.innerText); }, false); var button = document.getElementsByTagName('button')[0]; button.onclick = function() { var li = document.createElement('li'); li.innerText = lis.length + 1; olist.appendChild(li); }上面这段代码利用了事件冒泡,以及事件源对象进行处理的方式叫做事件委托。 优点: 1 性能 不需要循环所有的元素一个个绑定事件。 2 灵活 当有新的子元素时不需要重新绑定事件。
事件捕获流和事件冒泡流。他们都遵循一个顺序就是 : 事件捕获流>处于目标阶段>事件冒泡流。当元素产生一个事件时,事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。