JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。
事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。也就是说如果单击了页面的某个按钮，同时也单击了按钮的容器元素，甚至单击了整个页面。不过呢，IE提出的是冒泡流，而网景提出的是捕获流。
事件冒泡：子元素事件向上传播到父元素身上。而事件冒泡则是相反。使用事件冒泡有很多好处，1.子元素太多。2.后插入元素。这两种情况下都可以通过事件代理来解决。那么什么是事件代理呢，利用事件冒泡，把子元素的事件绑定到父元素身上。
在给事件添加事件监听的时候，标准浏览器有 3个参数
addEventListener(事件类型click，事件处理function( e） {
e.stopPropagation(); //阻止事件传播，点击子元素就不会冒泡到父元素上了
}, // 事件冒泡false／ 事件捕获true );
IE：2个参数，不支持第3个参数，只能是事件冒泡 attachEvent(事件类型onclick ， 事件处理函数function(){
window.event.cancelBubble = true; // 阻止事件传播，点击子元素就不会冒泡到父元素上了
} ) ;
移除事件监听：
标准浏览器：removeEventListener(事件类型 , 事件处理函数 , false );
IE：detachEvent(事件类型，事件处理函数);
函数封装:
function addEvent(obj,ev,fn) //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数
{ if(obj.addEventListener){
obj.addEventListener(ev,fn,false);
}else if(obj.attachEvent){
obj[ev+fn] = function(){
fn.call(obj);
}
obj.attachEvent("on" + ev,obj[ev+fn]);
}else {
obj['on'+type]=fn;
}
function removeEvent(obj,ev,fn)
{
if(obj.removeEventListener){
obj.removeEventListener(ev,fn);
}else if(obj.detachEvent){
obj.detachEvent("on" + ev, obj[ev+fn]);
}
}else {
obj['on'+type]=null;
}
}
网友评论