JS事件绑定的两种形式
第一种:
obj.on*=function(){}
var btn=document.getElementById('myBtn');
btn.onclick=function(){
alert(1);
}
这种方法是很常用,就是将一个函数赋值给一个事件处理程序。
它的优点是简单,然后具有跨浏览器的优势,现代所有浏览器都支持。
如果要取消这种形式绑定的事件,可以将事件处理程序属性的值设为null:
btn.onclick=null; //删除事件处理程序
但是,这种形式的绑定有一个缺点,那就是不能在同一个对象上绑定两个事件,如下:
oDiv1.onclick=function(){
alert(1);
}
oDiv1.onclick=function(){
alert(2);
} //
上面代码在同一对象上分别绑定了两个事件,结果只弹出2,是因为后面绑定的事件会覆盖前面的事件。
要想在一个对象上同时绑定两个事件或多个事件,就需要第二种绑定形式了。
第二种:
这种形式称为“DOM2级事件”,定义了两个方法:addEventListener()和removeEventListener()。
他们都接受3个参数:
第一个参数:要处理的事件类型名称;
第二个参数:处理程序的函数;
第三个参数:布尔值,表示是否捕获,true则为捕获,false则为冒泡。
例:
var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){
alert(1);
},false);
通过addEventListener()添加的事件只能通过removeEventListener()来删除,
尤其注意的是,传入的匿名函数无法被删除,比如要删除上面代码绑定的事件,
btn.removeEventListener('click',function(){
alert(1);
},false)
这样写是没有用的,看似删除的是同一个处理函数,但其实是两个不同的函数了,虽然长的一样。
所以通常这样写:
var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
} btn.addEventListener('click',show,false); //btn.removeEventListener('click',show,false);
同时,它可以在一个对象上绑定多个事件:
var show=function(){
alert(1);
}
var show2=function(){
alert(2);
} btn.addEventListener('click',show,false); //
btn.addEventListener('click',show2,false); //
兼容:
addEventListener() 和 removeEventListener()不支持IE8及其以下版本,对于低版本IE,同样有两个方法:
attachEvent() 和 detachEvent(),他们各自接收两个参数:事件处理程序名称和事件处理函数。
因为IE8和更早版本只支持事件冒泡,所以通过这种方法添加的事件处理程序都会被添加到冒泡阶段。
var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
} btn.attachEvent('onclick',show); //btn.detachEvent('onclick',show);
同样,删除时也必须提供相同参数,即传入匿名函数不能被删除,如上写法正确。
注意事件类型名称,要加上‘on’。
同时,它也可以在一个对象上绑定两个事件,但结果略微不同:
var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
}
var show2=function(){
alert(2);
} btn.attachEvent('onclick',show); //
btn.attachEvent('onclick',show2); //
在IE8及其以下版本,可以执行这段代码,但弹出结果是倒序的,即先弹出2,再弹出1。
我在IE9和IE10下测试,弹出结果又是正序的,先弹出1,再弹出2。
IE11不支持这个方法,同样Chrome和火狐也不支持。
总结!!!
标准浏览器(含ie): obj.addEventListener(事件名称,事件函数,是否捕获)
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this指向触发该事件的对象
ie: obj.attachEvent(事件名称,事件函数)
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序:标准ie正序,非标准ie倒序
4.this指向window
关于this问题,可以通过call()方法修改。
最新文章
- jquery获取ul中的第一个li
- asp.net 短信群发
- ecshop中$user对象
- sql 了解
- 果盟广告SDK
- CSS构造模型
- 基于 canvas 将图片转化成字符画
- 30第二建筑Github Page
- 逆向 Framework.jar
- 20. Valid Parentheses【leetcode】
- 软工+C(2017第1期) 题目设计、点评和评分
- 团队作业4——第一次项目冲刺(Alpha版本)第一天 and 第二天
- Vue.js的从入门到放弃进击录(二)
- MQTT和paho(二)socket
- git cannot lock ref
- pyinstall实现不显示控制窗口
- Python面向对象 三大特性 综合案例+1(视频里的作业)
- windows和linux下如何远程获取操作系统版本和主机名
- Highway Project---zoj3946(最短路SPFA)
- PHP7+Nginx的配置与安装教程详解
热门文章
- 阿里云服务器 CentOS 7.5 64位 docker安装redis集群
- 详细讲解Android中的Message的源码
- Spring Cloud云架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)
- Mongodb副本集集群搭建
- long poll、ajax轮询和WebSocket
- c/c++运算符
- 516D Drazil and Morning Exercise
- C/C++中的 void 和 void*
- saml2协议sp-initial登录过程
- C# App.config 自定义 配置节