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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
js重写方法的简单实现
Jul 10 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
详解Vue router路由
Nov 20 Vue.js
$.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
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
js数组去重的方法总结
2019/01/18 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python实现在线音乐播放器
2017/03/03 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
高考备战决心书
2014/03/11 职场文书
论文诚信承诺书
2014/05/23 职场文书
2015年大学生实习评语
2015/03/25 职场文书
网络销售员岗位职责
2015/04/11 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
python实现双链表
2022/05/25 Python