JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
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;
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------
来个例子吧,如果要单独点击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的更多相关文章
- 事件绑定的快捷方式 利on进行事件绑定的几种情况
[事件绑定快捷方式]$("button:first").click(function(){ alert(1); }); [使用on绑定事件] ① 使用on进行单事件绑定 $(&qu ...
- js中的前绑定和后绑定详解
这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)
有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script ...
- jQuery使用(七):事件绑定与取消,及自定事件的实现原理
实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...
- js中this的绑定规则及优先级
一. this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...
- js中同一个onclick绑定了两个js方法出现的问题
问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...
- angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.searchFiles = { n ...
- js中this的绑定
人们对于this的绑定常常有两个误解,一:指向函数本身,二:指向函数作用域.这两种想法都是错的,this并不指向函数本身,也不指向函数作用域. function foo(){ this.count++ ...
- js:捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
随机推荐
- 【技术贴】解决支付宝充值信用卡还款跳转到网上银行报错Error 404 - Not Found
声明 : 本文在 GFDL 1.2 下发布,本文出处光大银行信用卡 http://bbs.090989.com/forum-186-1.html http://androidgao.blogspot ...
- 使用Aspose.Word的基础知识整理
var doc = new Document(path); doc.AcceptAllRevisions();//接受所有修订
- 【HDOJ】1728 逃离迷宫
题目大坑,注意行列顺序式反的,另外注意起点和终点相同. #include <iostream> #include <cstdio> #include <cstring&g ...
- ECC内存
ECC内存,即应用了能够实现错误检查和纠正技术(ECC)的内存条.一般多应用在服务器及图形工作站上,这将使整个电脑系统在工作时更趋于安全稳定.ECC是“Error Checking and Corre ...
- bzoj3208: 花神的秒题计划Ⅰ
3208: 花神的秒题计划Ⅰ Time Limit: 16 Sec Memory Limit: 128 MBSubmit: 323 Solved: 211[Submit][Status] Desc ...
- java 学习连接
@Repository.@Service.@Controller 和 @Component 注解:http://blog.csdn.net/ye1992/article/details/19971 ...
- 【转】MongoDB资料汇总专题
1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 MongoDB GridFS MongoDB GridFS 介绍 一个NoSQL与MongoD ...
- 窥探Unity5渲染内部之解析UnityShaderVariables.cginc
unity5的UnityShaderVariables.cginc比unity4大了1kb这里装着unity shader 大部分内部参数,写这个方便以后自己查询 Camera参数 uniform f ...
- idea安装Scala插件
最近在学习研究kafka,当我们进行debug跟踪时,就需要研究源码了.kafka的源码是Scala语言,在此就需要Scala环境来运行kafka源码了. 接下来记录的是我在IDEA中安装Scala插 ...
- HDOJ1021题 Fibonacci Again 应用求模公式
Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...