事件绑定中的this指向有关问题
日期：2014-05-16 浏览次数：20440 次
事件绑定中的this指向问题
我在模拟jquery库，想实现的效果是鼠标移入DIV的时候改变DIV的背景。但是实现不了，不知道是那里出了问题，请教下大神帮忙解决下，小弟万分感激！
封装的JS代码：
// JavaScript Document
我在模拟jquery库，想实现的效果是鼠标移入DIV的时候改变DIV的背景。但是实现不了，不知道是那里出了问题，请教下大神帮忙解决下，小弟万分感激！
封装的JS代码：
// JavaScript Document
function addEvent(obj,type,fn){
if(obj.attachEvent){
obj.attachEvent('on'+type,function(){
fn.call(obj);
});
}else{
obj.addEventListener(type,fn,false) ;
}
}
function getByClass(oParent, sClass) //class选择器
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b', 'i');
var i=0;
for(i=0;i<aEle.length;i++)
{
//if(aEle[i].className==sClass)
//if(aEle[i].className.search(sClass)!=-1)
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
function getStyle(obj,attr){ //获取非行间样式
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,false)[attr];
}
}
function ZQuery(vArg){
this.elements=[];
switch (typeof vArg){
case 'function':
addEvent(window,'load',vArg);
break;
case 'string':
switch (vArg.charAt(0)){
case '#':
var obj=document.getElementById(vArg.substring(1));
this.elements.push(obj);
break;
case '.':
this.elements=getByClass(document,vArg.substring(1));
break;
default:
this.elements=document.getElementsByTagName(vArg);
}
break;
}
}
ZQuery.prototype.css=function(attr,value){
if(arguments.length==2){
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
}else{
return getStyle(this.elements[0],attr);
}
}
ZQuery.prototype.hover=function(fnover,fnout){
var i=0;
for(i=0;i<this.elements.length;i++){
addEvent(this.elements[i],'mouseover',fnover);
addEvent(this.elements[i],'mouseout',fnout);
}
}
function $(vArg){
return new ZQuery(vArg);
}
前台调用的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js.js"></script>
<script>
$(function(){
$('div').hover(function(){
//$(this).css('background','#2A3F00');无效
$('div').css('background','#2A3F00');//正常
},function(){
//$(this).css('background','#F0F');无效
$('div').css('background','#F0F');//正常
})
})
</script>
<style>
div{ width:100px; height:100px; background:#F0F;}
</style>
</head>
<body>
<div></div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
