JS DOM2事件绑定中this指向问题的兼容处理方案
作者:像素猫时间:2026-10-22 06:27:17浏览:409
本文针对DOM2级事件绑定在不同浏览器中的兼容性问题,重点解析this指向错误的解决方法。通过封装bind函数,利用addEventListener处理标准浏览器,对IE低版本采用attachEvent,并通过临时函数包装及自定义属性存储,确保事件回调中this正确指向目标元素。
DOM2事件绑定中this指向的兼容处理
针对前文提及的DOM2级事件绑定所存在的兼容性问题,本节首先阐述关于this指向的处理方式。
/*
bind:处理DOM2级事件绑定的兼容性问题(绑定方法)
@parameter:
curEle->要绑定事件的元素
evenType->要绑定的事件类型("click","mouseover")
evenFn->要绑定的方法
*/
function bind(curEle,evenType,evenFn){
if('addEventListener' in document){
curEle.addEventListener(evenType,evenFn,false);
return;
}
//给evenFn化妆 并且把化妆前的照片贴在自己对应的脑门上
var tempFn = function(){
evenFn.call(curEle)
}
tempFn.photo = evenFn;
//首先判断自定义属性之前是否存在,不存在的话创建一个,由于要存储多个化妆后的结果,所以我们让其值是一个数组
if(!curEle["mybind"+evenType]){//根据不同的事件类型是不同的数组
curEle["mybind"+evenType] = [];
}
curEle["mybind"+evenType].push(tempFn);
curEle.attachEvent("on"+evenType,tempFn);
//这里的开始想法是改变this的指向,把this不指向window
/*
box.attachEvent("onclick",function(){
fn1.call(box)
})
这样虽然解决了this的问题,但是又抛出了一个新的问题,不知道该如何删除了(我们不知道匿名函数是谁)
var tempFn = function(){
fn1.call(box)
}
box.attachEvent("onclick",tempFn);
box.detachEvent("onclick",tempFn);
*/
}
function unbind(curEle,evenType,evenFn){
if('removeEventListener' in document){
curEle.removeEventListener(evenType,evenFn,false);
return;
}
//拿evenFn到curEle["myBind"]这里找化妆后的结果,找到之后再事件池中把化妆后的结果移除事件池
var ary = curEle['myBind'+evenType];
for(var i = 0;i<ary.length;i++){
if(ary[i].photo===evenFn){
curEle.detachEvent("on"+evenType,ary[i]);
break;
}
}
}
以上内容即为本文的全部要点,期望对读者的学习有所助益,同时也欢迎持续关注本站以获取更多技术支持。
作者最新文章
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
