javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,
1
2 3 4 5 |
yx.bind(item, "click", function (e) {
//console.log("Div Click 1 !"); alert("Div Click 1 !"); e.stopPropagation(); }); |
但是这样用起来有些不顺手,添加方法还要加个标签元素对象,能不能去掉第一个参数呢,答案是肯定的。
我们只需要将DOM元素对象转换成Yx对象,就可以了。但是要如何将dom变成Yx对象呢,如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var Yx = function (ele) {//dom元素对象
var self = this; if ( (ele instanceof Array) || (NodeList || (ele instanceof NodeList))) { ; i < ele.length; i++) { self[i] = ele[i]; } self.length = ele.length; } else { self[] = ele; self.length = ; } return self; } |
我们将dom元素对象挂在Yx对象的下面,像数组一样,使用下标获取,设置值,同时还保留了DOM节点自带的方法,属性。这时,我们使用的时候如下:
1
2 3 |
var item = document.getElementById("test");//获取dom对象
var yxItem = new Yx(item);//新建Yx对象 yxItem.bind( "click", function (e) { ... });//绑定事件 |
但,这样写也有点不爽,每次还要new一下,能省掉new吗,当然可以。
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Yx.prototype.init = function(ele){
var self = this; if( (ele instanceof Array) || (NodeList || (ele instanceof NodeList))){ ;i<ele.length;i++){ self[i] = ele[i]; } self.length = ele.length; }else{ self[] = ele; self.length = ; } return self; } |
我们新建一个方法为init用来新建Yx对象使用,同时,我们在构造方法中,这样写:
1
2 3 4 5 6 7 8 |
var Yx = function(ele){
Yx.fn = Yx.prototype;//将Yx原型链赋值给Yx.fn //这种方法因为在使用的时候去掉了new,被称为无new的构造方法,在源码中,我介绍了两种无new方法,写法不同,其实原理一样。
|
这时候我们使用方法如下:
1
2 3 4 5 6 7 8 9 |
var item = document.getElementById("test");
var yxItem = yx(item);//直接调用yx方法,该方法中new Yx.fn对象 yxItem.bind("click",function(e){ console.log("Div Click 1 !"); e.stopPropagation(); }); window.$ = window.yx = Yx;//当然得有这么一句话才能直接使用yx(...)方法了, |
完整代码如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
(function (window) {
var Yx = function (ele) { //第一种无new实现方法 //第二种无new实现方法 //Yx.fn = Yx.prototype; var test = document.getElementById("test"); testItem.bind("click", function (e) { var funcTest1 = function (e) { testItem.bind("click", funcTest1); var pArr = document.getElementsByTagName("p"); pArrItem.bind("click", function (e, item) { var link = document.getElementById("a_link"); |
第一种无new方法与第二种无new方法原理一样,只是第一种方法看的明白些,第二种看起来NB一些,哈哈!
javascript - 工作笔记 (事件四)的更多相关文章
- How Javascript works (Javascript工作原理) (十四) 解析,语法抽象树及最小化解析时间的 5 条小技巧
个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...
- javascript - 工作笔记 (事件绑定)
背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...
- javascript - 工作笔记 (事件绑定二)
在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下: JavaScript ...
- javascript - 工作笔记 (事件三)
有关定义就不多说了,事件分两种 一,冒泡型事件 这是IE浏览器中事件模型的实现,顾名思义,就像水中的泡一样,自底而上,其经过的父元素都会触发对应的事件. 即:触发元素的父元素先于触发元素触发,看dem ...
- JavaScript学习笔记——事件
javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...
- javascript学习笔记(四):事件处理函数和动态创建html标记。
1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...
- JavaScript基础笔记(四) JS式面向对象
JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- iOS工作笔记(十四)
1.scrollview的frame指的是其可视范围,contentSize指的是其滚动范围,分别是在水平方向和竖直方向上的 所以要让scrollview在水平方向不能滚动,那么需要如下设置 _scr ...
随机推荐
- 调试 JavaScript 脚本
随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...
- lol.py
#!/usr/bin/env python # -*- coding: utf-8 -*- import os from twisted.application import service from ...
- Nginx的HTTP模块
1.HTTP的核心模块.这些HTTP模块会在编译Nginx时自动编译进来,除非使用configure命令禁止编译这些模块.(1)alias指令.该指令用于在URL和文件系统路径之间实现映射.它与roo ...
- PHP设计模式之装饰器模式
装饰器模式:如果已有对象的部分内容或功能性发生改变,但是不需要修改原始对象的结构或不使用继承,动态的扩展一个对象的功能,则应该使用装饰器模式.简单点说:就是我们不应该去修改已有的类,而是通过创建另外一 ...
- 关于网络协议和socket编程基本概念
TCP协议可以说已经是IT人耳熟能详的协议,最近在学习socket网络编程时后重新温习一下这个协议,针对一些问题做了一些总结,很多理解可能还不是很准确. 1. 协议是什么?所谓的各种网络协议无非是一种 ...
- Qt creator error: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏(vs2010的嵌入式清单文件)
下面是vs2010导入别人文件时出现的问题的解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属 ...
- 在Servlet中使用JSON
在Servlet中使用JSON,和上篇的使用相同,只不过多了配置web.xml的内容 servlet代码如下: import java.io.IOException; import java.io.P ...
- 并发(Concurrency)和并行(Parallelism)的区别
最近在读<real world haskell>里关于并行的一章时,看到作者首先对并发(Concurrency)和并行(Parallelism)的区别进行了定义和解释.以前我对这个问题也是 ...
- spring 定时任务(3)--配置多个定时任务
<!-- 定义调用对象和调用对象的方法 --> <!-- 定时任务 A start --> <bean id="jobtask" class=&quo ...
- UVA - 11882 Biggest Number(dfs+bfs+强剪枝)
题目大意:给出一个方格矩阵,矩阵中有数字0~9,任选一个格子为起点,将走过的数字连起来构成一个数,找出最大的那个数,每个格子只能走一次. 题目分析:DFS.剪枝方案:在当前的处境下,找出所有还能到达的 ...