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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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 文件上传全攻略
2010/04/28 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
详解Python3中yield生成器的用法
2015/08/20 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
上课玩手机检讨书
2014/02/08 职场文书
审计专业自荐信范文
2014/04/21 职场文书
法人委托书
2014/07/31 职场文书
十佳青年事迹材料
2014/08/21 职场文书
解除租赁合同协议书
2016/03/21 职场文书