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 性能优化指南(2)
May 21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
php中的时间显示
2007/01/18 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Angular排序实例详解
2017/06/28 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Python获取文件ssdeep值的方法
2014/10/05 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python网络编程之五子棋游戏
2020/05/14 Python
哪些是python中web开发框架
2020/06/17 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
高中生物教学反思
2014/02/05 职场文书
见习报告格式范文
2014/11/08 职场文书
办公经费申请报告
2015/05/15 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
安全教育日主题班会
2015/08/13 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
《小小的船》教学反思
2016/02/18 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python