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插件集合
Jan 12 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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新手上路(十)
2006/10/09 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
浅谈Python中数据解析
2015/05/05 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python列表推导式入门学习解析
2019/12/02 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
房屋租赁协议书范本
2014/04/10 职场文书
手机销售员岗位职责
2015/04/11 职场文书
公司2015年终工作总结
2015/05/26 职场文书
紧急迫降观后感
2015/06/15 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Redis批量生成数据的实现
2022/06/05 Redis