第一话:IE中用DOM方法绑定事件
工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值。下面进入主题:
IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重的去思考和记录一下。
一、浏览器中不同的事件监听/绑定(个人感觉用监听比较通俗易懂):
//IE element.attachEvent("event",functionname); //参数:1,表示监听的事件,需要在事件前加on(onclick,onfocus,onkeyevent……)2,响应事件时候所要执行的方法。 //Chrome and FireFox element.addEventListener("event",functionname,false); //参数:1和2同上(事件前不加on),3,是一个boolean,表示事件处理器是否启用事件捕捉。
二、既然不同的浏览器中的监听事件都清楚了,那我们有必要整合一种兼容性的方法出来。
//封装可重用的代码 functioin addListener(element,event,listener){ if(element.addEventListener){ //通过去区别该浏览器是否支持该方法,而执行不同的监听事件 element.addEventListener(event,listener,false); }else if(element.attachEvent){ element.attachEvent("on"+event,listener); } } //这样就可以监听事件了在ie和webkit等内核浏览器下都ok addListener(window,"keydown",HandleKeyDown); addListener(window,"load",init); addListener(document.getElementById("link"),"click",onclick);
三,通用的方法,写好了,但是如果想用this的话,会遇到一点麻烦。思考如下代码:
addListener(document.getElementById("mylink"),"click",foo(){ alert(this.href); })
我们预期的效果是输出mylink元素的href,但在IE下事实是这样么?
重点:当执行某个方法的时候,this所指向函数的拥有者。
例如:
//方法1 function myFuc(){ alert(this); //这时候this指向window对象 } //方法2 var el = function(){ alert(this); //this-->window对象 } //方法2 var el.method = function(){ alert(this); //this-->el对象 }
//方法2 var el = function(){ alert(this); //this-->window对象 } //方法2 var el.method = function(){ alert(this); //this-->el对象 }
这样比较容易理解,但将一个对象的方法传递给另外的函数时候,那结果就匪夷所思了:
function myFunc(func){ func() } var el.method = function(){ alert(this); } myFunc(el.method); //参数只是el.method的一个引用,并非整个el对象,所以这个时候this是window,因为myFunc属于window //这样有歧义的用法,最好了解透彻,然后根据需求设计。我们的本意其实可以用另外的一种方式实现。 function myFunc(func){ func.call(el) //call方法:允许一个方法在另一个对象中执行(抽象),简单的说,其实是,func是在el对象的基础上执行。等价el.method(); }
所以调用call方法之后,此刻this又指向了el对象。
四,修改addListener方法
functioin addListener(element,event,listener){ if(element.addEventListener){ element.addEventListener(event,listener,false); }else if(element.attachEvent){ element.attachEvent("on"+event,function(){listener.call(element)}); } }
五,事件既然可以监听,那就可以取消监听
//webkit var bKeyEvent = false; function HandleKeydown(evt){ if(bKeyEvent){ //todo } else { evt.preventDefault() } } addListener(window,"keydown",HandleKeydown); //IE var bKeyEvent = false; function HandleKeydown(evt){ if(bKeyEvent){ //todo } else { evt.returnValue = false } } addListener(window,"keydown",HandleKeydown);
另外一种方法(更简洁直观):
//webkit window.removeEventListener("keydown",HandleKeyDown,false); //IE window.detachEvent(("keydown",HandleKeyDown);
第一话:IE中用DOM方法绑定事件的更多相关文章
- Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
- mui-当使用addeleventlisener()方法绑定事件时选择器无法绑定事件
在mui中绑定事件不能用jQuery或mui(“#XX”)的形式选取某个元素,而是document.getelementbyid()的形式 mui(“#XX”)可以使用on方法绑定事件
- attachEvent方法绑定事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- AngularJS如何给动态添加的DOM中绑定事件
正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- jQuery之方法绑定(事件注册)代码小结
1.最直接的模式,直接将一个function对象传入方法函数,如下面的click(),好处坏处一看便知 $("#btnComfirmChooseCompany").click(fu ...
- jQuery clone()方法绑定事件
先看如下代码: (function ($) { var div = $("<div></div>").css({width: "100px&quo ...
随机推荐
- easyui datagrid 基础方法和事件
数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...
- 从C++Primer某习题出发,谈谈C语言标准I/O的缓存问题
刚看完信号那章,觉得处理信号时的sigsetjmp/siglongjmp似乎跟异常的跳出很像,于是想去复习C++异常,然后发现了对I/O没有充分理解的问题. 题目是C++ Primer 5.6.3节的 ...
- Java文件的写入
写文件与读文件类似,可以是以字节为单位写入,可以是以字符为单位写入. 对应读操作FileOutputStream是以字节为单位进行写入的: FileOutputStream fileOutputStr ...
- bootstrap的折叠组件1
官网的例子: http://v3.bootcss.com/javascript/#collapse <div class="panel-group" id="acc ...
- ROS的ovpn设置
转摘至www.80uncle.com 先下载Win下的openvpn客户端http://openvpn.se/download.html 我的证书是用这个客户端做的openvpn-2.0.9-gui- ...
- 第三方登录之微信登录,基于ThinkSDK
本文基于ThinkSDK,为其补充微信登录demo 增加ThinkSDK的微信第三方登录 阅读本文之前请先了解ThinkSDK的文档 http://www.echomod.com/nexstep/fo ...
- JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- Python实践练习:口令保管箱
缘由 做中学才是最好的方法,通过这些项目来加强自己的Python掌握程度. 所有练习目录地址 题目描述: 一个字典中存在着账户和密码,通过命令行参数直接执行,查看是否有这个账户. 若有,则复制账户的密 ...
- Memcached的过期数据的过期机制及删除机制(LRU)
Memcached的过期数据的过期机制及删除机制1.当某个值过期后,并没有从内存删除,因此,使用stats命令统计时,curr_item参数有信息(不为0)2.当某个新值去占用他的位置时,当成空chu ...
- tornado 自定义session (二)
有了上一步的基础,我们将session改造成一个模块,这样我们就可以通过配置,来使用不同方式(redis,数据库等)的session. 添加一个新目录:TornadoSession conf.py是配 ...