● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡
 
● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body、……最后到达目的节点(即事件目标)。
● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反
 
1、onlick -->事件冒泡,重写onlick会覆盖之前属性,没有兼容性问题
ele.onclik = null;   //解绑单击事件,将onlick属性设为null即可

2、addEventListener(event.type, handle, boolean); IE8及以下不支持,属于DOM2级的方法,可添加多个方法不被覆盖

//事件类型没有on,false 表示在事件第三阶段(冒泡)触发,true表示在事件第一阶段(捕获)触发。 如果handle是同一个方法,只执行一次。
ele.addEventListener('click', function(){ }, false);
//解绑事件,参数和绑定一样
ele.removeEventListener(event.type, handle, boolean);

3、attachEvent(event.type, handle ); IE特有,兼容IE8及以下,可添加多个事件处理程序,只支持冒泡阶段

//如果handle是同一个方法,绑定几次执行几次,这点和addEventListener不同,事件类型要加on,例如onclick而不是click
ele.attachEvent('onclick', function(){ });
//解绑事件,参数和绑定一样
ele.detachEvent("onclick", function(){ });

4、默认事件行为:href=""链接,submit表单提交等

  ● 阻止默认事件:

(1)return false; 阻止独享属性(通过on这种方式)绑定的事件的默认事件

ele.onclick = function() {
…… //你的代码
return false; //通过返回false值阻止默认事件行为
};

(2)event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件

element.addEventListener("click", function(e){
var event = e || window.event;
……
event.preventDefault( ); //阻止默认事件
},false);

(3)event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件

element.attachEvent("onclick", function(e){
var event = e || window.event;
……
event.returnValue = false; //阻止默认事件
},false);

5、接下来我们把事件绑定以及事件解绑封装成为一个函数,兼容浏览器,包括IE6及以上

// 事件绑定
function addEvent(element, eType, handle, bol) {
if(element.addEventListener){ //如果支持addEventListener
element.addEventListener(eType, handle, bol);
}else if(element.attachEvent){ //如果支持attachEvent
element.attachEvent("on"+eType, handle);
}else{ //否则使用兼容的onclick绑定
element["on"+eType] = handle;
}
}
// 事件解绑
function removeEvent(element, eType, handle, bol) {
if(element.addEventListener){
element.removeEventListener(eType, handle, bol);
}else if(element.attachEvent){
element.detachEvent("on"+eType, handle);
}else{
element["on"+eType] = null;
}
}

-----------------------------------------------------------------------------------------------------------------------------------------------

A.● 事件冒泡、事件捕获阻止:
event.stopPropagation( );                // 阻止事件的进一步传播,包括(冒泡,捕获),无参数
event.cancelBubble = true;             // true 为阻止冒泡
 
B.● 事件委托:利用事件冒泡的特性,将里层的事件委托给外层事件,根据event对象的属性进行事件委托,改善性能。
使用事件委托能够避免对特定的每个节点添加事件监听器;事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
 

来个例子吧,如果要单独点击table里面的td,普通做法是for循环给每个td绑定事件,td少的话性能什么差别,td如果多了,就不行了,我们使用事件委托:

 <!-- HTML -->
<table id="out" border="1" style="cursor: pointer;">
<tr>
  <td>table01</td>
  <td>table02</td>
  <td>table03</td>
  <td>table04</td>
  <td>table05</td>
  <td>table06</td>
  <td>table07</td>
  <td>table08</td>
  <td>table09</td>
  <td>table10</td>
</tr>
</table>
     var out = document.getElementById("out");
if(out.addEventListener){
out.addEventListener("click",function(e){
var e = e||window.event;
//IE没有e.target,有e.srcElement
var target = e.target||e.srcElement;
//判断事件目标是否是td,是的话target即为目标节点td
if(target.tagName.toLowerCase()=="td"){
changeStyle(target);
console.log(target.innerHTML);
}
},false);
}else{
out.attachEvent("onclick",function(e){
var e = e||window.event;
//IE没有e.target,有e.srcElement
var target = e.target||e.srcElement;
//判断事件目标是否是td,是的话target即为目标节点td
if(target.tagName.toLowerCase()=="td"){
changeStyle(target);
console.log(target.innerHTML);
}
});
};
};
function changeStyle(ele){
ele.innerHTML = "已点击"
ele.style.background="#900";
ele.style.color = "#fff"; }

关于事件就到这里了。。。

张小窝 -- web前端开发路上    原创。

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE的更多相关文章

  1. 事件绑定的快捷方式 利on进行事件绑定的几种情况

    [事件绑定快捷方式]$("button:first").click(function(){ alert(1); }); [使用on绑定事件] ① 使用on进行单事件绑定 $(&qu ...

  2. js中的前绑定和后绑定详解

    这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开 ...

  3. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  4. jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)

    有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script ...

  5. jQuery使用(七):事件绑定与取消,及自定事件的实现原理

    实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...

  6. js中this的绑定规则及优先级

    一.   this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...

  7. js中同一个onclick绑定了两个js方法出现的问题

    问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...

  8. angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.searchFiles = { n ...

  9. js中this的绑定

    人们对于this的绑定常常有两个误解,一:指向函数本身,二:指向函数作用域.这两种想法都是错的,this并不指向函数本身,也不指向函数作用域. function foo(){ this.count++ ...

  10. js:捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

随机推荐

  1. 【技术贴】解决支付宝充值信用卡还款跳转到网上银行报错Error 404 - Not Found

    声明 : 本文在 GFDL 1.2 下发布,本文出处光大银行信用卡  http://bbs.090989.com/forum-186-1.html http://androidgao.blogspot ...

  2. 使用Aspose.Word的基础知识整理

    var doc = new Document(path);     doc.AcceptAllRevisions();//接受所有修订

  3. 【HDOJ】1728 逃离迷宫

    题目大坑,注意行列顺序式反的,另外注意起点和终点相同. #include <iostream> #include <cstdio> #include <cstring&g ...

  4. ECC内存

    ECC内存,即应用了能够实现错误检查和纠正技术(ECC)的内存条.一般多应用在服务器及图形工作站上,这将使整个电脑系统在工作时更趋于安全稳定.ECC是“Error Checking and Corre ...

  5. bzoj3208: 花神的秒题计划Ⅰ

    3208: 花神的秒题计划Ⅰ Time Limit: 16 Sec  Memory Limit: 128 MBSubmit: 323  Solved: 211[Submit][Status] Desc ...

  6. java 学习连接

    @Repository.@Service.@Controller 和 @Component   注解:http://blog.csdn.net/ye1992/article/details/19971 ...

  7. 【转】MongoDB资料汇总专题

    1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 MongoDB GridFS MongoDB GridFS 介绍 一个NoSQL与MongoD ...

  8. 窥探Unity5渲染内部之解析UnityShaderVariables.cginc

    unity5的UnityShaderVariables.cginc比unity4大了1kb这里装着unity shader 大部分内部参数,写这个方便以后自己查询 Camera参数 uniform f ...

  9. idea安装Scala插件

    最近在学习研究kafka,当我们进行debug跟踪时,就需要研究源码了.kafka的源码是Scala语言,在此就需要Scala环境来运行kafka源码了. 接下来记录的是我在IDEA中安装Scala插 ...

  10. HDOJ1021题 Fibonacci Again 应用求模公式

    Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...