jQuery原生框架-----------------事件
jQuery.extend({
// 绑定事件
addEvent: function( ele, type, fn ) {
// ele不是DOM,type不是字符串,fn不是函数,打包打走
if( !jQuery.isDOM( ele ) || !jQuery.isString( type ) || !jQuery.isFunction( fn ) ) {
return false;
}
// 兼容处理
if( ele.addEventListener ) {
ele.addEventListener( type, fn );
}else {
ele.attachEvent( 'on' + type, fn );
}
},
// 移除事件
removeEvent: function( ele, type, fn ) {
// ele不是DOM,type不是字符串,fn不是函数,打包打走
if( !jQuery.isDOM( ele ) || !jQuery.isString( type ) || !jQuery.isFunction( fn ) ) {
return false;
}
// 兼容处理
if( ele.removeEventListener ) {
ele.removeEventListener( type, fn );
}else {
ele.detachEvent( 'on' + type, fn );
}
}
});
jQuery.fn.extend({
// 绑定事件
on: function( type, fn ) {
/*
* 实现思路:
* 1、第一次给元素绑定某事件时,给元素按照事件类型初始化一个存储对应事件处理函数的数组
* 2、然后把fn存储进去,再给元素调用addEvent静态方法绑定对应的事件,
* 2.1、这个事件触发时,遍历对应事件处理函数的数组,按照顺序执行他们
* 2.2、同时要改变函数执行时内部的this为绑定者
* 2.3、同时还要把event事件对象传给函数供其使用
* 3、以后再给这个元素绑定已经绑过事件,只需把事件处理函数push到对应的数组中即可。
* 4、链式编程返回this
* */
// 遍历所有元素
return this.each( function() {
var self = this;
// 如果元素之间没有event_cache,那么就初始化一下,有了继续使用之前的。
self.event_cache = self.event_cache || {};
// 判断元素有没有对应事件类型的数组,
// 如果有则直接把fn添加进去即可
if( self.event_cache[ type + '_cache' ] ) {
self.event_cache[ type + '_cache' ].push( fn );
}
// 没有就是第一次绑定该事件
else {
// 先给元素初始化对应的事件数组
self.event_cache[ type + '_cache' ] = [];
self.event_cache[ type + '_cache' ].push( fn );
// 绑定事件,事件触发时,遍历对应的事件数组,执行里面存储的每一个函数
jQuery.addEvent( this, type, function( e ) {
// 遍历对应的事件数组
jQuery.each( self.event_cache[ type + '_cache' ], function() {
// 这里的this指向每一个遍历到的事件处理函数
this.call( self, e );
});
});
}
});
},
// 移除事件
off: function( type, fn ) {
/*
* 实现思路:
* 1、遍历所有元素,如果元素有event_cache再进行下一步处理
* 2、如果没有传参,清空event_cache对象中存储的每一个数组
* 3、如果传了一个参数,清空event_cache对象中指定的数组
* 4、如果传了两个参数,清除event_cache对象中指定数组中指定的函数
* 5、链式编程返回this
* */
var argLen = arguments.length;
return this.each( function() {
var arr = null;
var self = this;
// 如果有event_cache这个对象,说明元素帮过事件,
// 进一步根据参数个数做移除处理。
if( this.event_cache ) {
// 清除所有事件数组
if( argLen === 0 ) {
jQuery.each( this.event_cache, function( key, arr ) {
self.event_cache[ key ] = [];
});
}
// 清除指定的事件数组
else if( argLen === 1 ) {
this.event_cache[ type + '_cache' ] = [];
}
// 清除指定的事件数组中指定的函数
else if( argLen === 2 ) {
arr = this.event_cache[ type + '_cache' ];
for( var i = arr.length - 1; i >= 0; i-- ) {
if( arr[ i ] === fn ) {
arr.splice( i, 1 );
}
}
}
}
});
}
});
// 给原型添加一些事件绑定的简写方式
var events = [ 'click', 'change', 'resize', 'mousedown', 'mouseout', 'mouseenter' ];
jQuery.each( events, function( i, eventName ) {
jQuery.fn[ eventName ] = function( fn ) {
return this.on( eventName, fn );
}
});
jQuery原生框架-----------------事件的更多相关文章
- jQuery原生框架-----------------核心框架
// 1.自调防止全局变量污染(function( window ) { var version = '1.0.0'; var document = window.document; var arr ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- jQuery原生框架-----------------属性操作
// 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 i ...
- jQuery原生框架-----------------dom操作
// 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- 原生JavaScript事件详解
JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一 ...
- jQuery验证框架 .
目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查 CSDN社区“三八节”特别活动 开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...
随机推荐
- ROS学习笔记(八)——ROSTOPIC
NEW 1 $ roscore NEW 2 $ rosrun turtlesim turtlesim_node NEW 3 $ rosrun turtlesim turtle_teleop_key N ...
- java/Android 接口调用的几种写法
虽然Handler用的地方比较普遍,但是接口也有他的独特之处,比较直观,然后降低了耦合性 如有一接口,需要将数据传给使用的activity中,接口如下 public interface PushVal ...
- Linux中Screen命令使用方法
一.使用Screen创建一个Session screen -S sessionName 注:sessionName是要删除的session名字 二.结束一个Screen创建的session 1.首先使 ...
- css3 rem的用法
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- Guava------------Cache使用方法
简单从这几个方面描述一下如何使用Cache,对Cache的各种原理介绍此处不涉及. 1.使用场景 2.如何使用Cache 3.创建方式 4. 如何和Spring搭配使用 +-------------- ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- postgres 正则表达式 转
http://blog.csdn.net/wugewuge/article/details/7704996 postgresql中使用正则表达式时需要使用关键字“~”,以表示该关键字之前的内容需匹配之 ...
- ubuntu 下非交互式执行远程shell命令
apt-get install sshpass sshpass -p **your_password** ssh -o StrictHostKeyChecking=no "root@$ip& ...
- Windows Store App Image开发示例
通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...
- qt越来越好了
qml中所有的商业控件都开源了,详见: import QtQuick.Extras 1.4 以前自己实现的时候实现了半天.