js模仿jquery的写法示例代码


Posted in Javascript onJune 16, 2013

测试代码:

(function(){ 
var p=new PEvent(document); 
p.click(function() { 
//alert("单击"); 
//alert(p.style); 
var html=""; 
for ( var item in document) { 
html+=item+':'+document[item]+"\r\n"; 
} 
//alert(html); 
}); 
p.dblclick(function() { 
alert("双击"); 
}); 
p.contextmenu(function(event) { 
try{ 
var x=event.clientX; 
var y=event.clientY; 
var menu=g("menu"); //判断坐标 
var width=document.body.clientWidth; 
var height=document.body.clientHeight; 
x=(x+menu.clientWidth)>=width?width-menu.clientWidth:x; 
y=(y+menu.clientHeight)>=height?height-menu.clientHeight:y; 
//alert("可视高度:"+height+",鼠标高度:"+y); 
menu.style.top=y+"px"; 
menu.style.left=x+"px"; 
menu.style.display="block"; 
}catch(e){ 
alert(e); 
} 
return false; 
}); 
function PEvent(dom){ 
this.x=function() { 
this.style.css=dom.style; 
} 
this.click=function(fn){ 
dom.onclick=fn; 
this.x(); 
} 
this.dblclick=function(fn){ 
dom.ondblclick=fn; 
} 
this.contextmenu=function(fn){ 
dom.oncontextmenu=fn; 
} 
this.style=new Po(); 
}; 
function Po() { 
this.name=new Object(); 
this.id=new Object(); 
this.css=new Object(); 
} 
})(); 
function g(id){ 
return document.getElementById(id); 
}

在jquery中,处理事件的时候,都可以匿名方法来写,例如:
obj.click(function(){ 
alert("hello"); 
});

上诉这种形式。
在方法传递参数的时候,可以传递fun 方法。
调用呢,就可以这样调用:
this.dblclick=function(fn){ 
dom.ondblclick=fn; 
}
Javascript 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 #Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 #Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 #Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 #Javascript
JavaScript实现表格排序方法
Jun 14 #Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 #Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python中decorator使用实例
2015/04/14 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python多继承原理与用法示例
2018/08/23 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python实现各种插值法(数值分析)
2019/07/30 Python
详解django中Template语言
2020/02/22 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
房屋继承公证书
2014/04/10 职场文书
学习演讲稿范文
2014/05/10 职场文书
保护动物的标语
2014/06/11 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
企业计划生育责任书
2015/05/09 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
粗暴解决CUDA out of memory的问题
2021/05/22 Python