上一篇我们写到了要用到事件兼容属性的写法,可见我们的Vquery 功能太弱,所以首先呢,我们给它添加几个
功能, 1 事件监听的兼容写法, 2 ,获取css 属性的兼容写法! 3, 我们可爱的万能运动框架也给他集成进去!
// 获取属性的兼容写法!
VQuery.prototype.getStyle = function (obj, attr){
if(obj.currentStyle) {
return obj.currentStyle[attr]; //for ie
}else{
return getComputedStyle(obj, false)[attr]; // for ff
}
}
// 添加事件的方法
VQuery.prototype.myAddEvent = function (element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
// 浏览器支持此种方式,可以根据方法名找到方法声明,方法声明会转换为true
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
};
VQuery.prototype.click = function(fn){
// 给元素添加事件处理函数,这里我们要用到一个兼容性的写法!
}
// 万能移动框架也给他拿过来!
VQuery.prototype.Move = function (obj,json,fn){
//停止上一次定时器
clearInterval(obj.timer); //关闭前一个定时器,解决对同个对象同时调用多个Move()时,定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器,防止多个对象同时调用Move()时,同用一个定时器,而导致相关干扰问题。
//保存每一个物体运动的定时器
obj.timer = setInterval(function(){
//判断同时运动标志
var bStop = true;
for(var attr in json){
//取当前值
var iCur = 0; //创建一个变量,用于存储 attr属性每时每刻的值
if(attr == 'opacity'){
//针对在FF中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与IE统一为百分数
iCur = Math.round(parseFloat(getStyle(obj, attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr)); //将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型
}
//计算速度
var iSpeed = (json[attr] - iCur) / 8; //创建 递减的速度speed变量。实现属性值的变速改变
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值Itarget少几个像素的问题
//检测同时到达标志
if(iCur != json[attr]){
bStop = false;
}
//更改属性,获取动画效果
if(attr=='opacity'){
iCur += iSpeed
obj.style.filter='alpha(opacity:' + iCur + ')';
obj.style.opacity=iCur / 100;
}
else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
//检测停止
if(bStop){
clearInterval(obj.timer);
if(fn) fn();
}
},30)
}
这样一来,我们的框架就稍微有点丰满了,现在还不能用,我们继续完整我们的点击事件!
我们测试看看
我去,测试的竟让发现没反应,我们去看看到底咋回事!
丫的,写错了, 我是菜鸟,可以原谅
这样就好了,可是上面我们还是要改正下,改正万能的添加事件的代码
我们再测试下!
测试没有任何问题, 很好,简单的点击事件就搞定了,但是你会发现
JQuery 用的是$ 符号,还没有new 所以我们要包装下!
里面上添加这句话,我们再修改测试下!
测试仍然没有问题,到此,我们就模拟出了,jQuery 的 click 函数,是不是很开心!
不要着急,我们先歇一歇,下次继续模拟jQuery !