[jQuery原理] jQuery事件操作相关方法

事件操作相关方法

on(type, callback)

注册事件

1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的

on: function (name, callBack) {// 1.遍历取出所有元素this.each(function (key, ele) {// 2.判断当前元素中是否有保存所有事件的对象if(!ele.eventsCache){ele.eventsCache = {};}// 3.判断对象中有没有对应类型的数组if(!ele.eventsCache[name]){ele.eventsCache[name] = [];// 4.将回调函数添加到数据中ele.eventsCache[name].push(callBack);// 5.添加对应类型的事件njQuery.addEvent(ele, name, function () {njQuery.each(ele.eventsCache[name], function (k, method) {method.call(ele);});});}else{// 6.将回调函数添加到数据中ele.eventsCache[name].push(callBack);}});return this;
},

off(type, callback)

移出事件

1.不传参, 会移除所有事件
2.传递一个参数, 会移除对应类型所有事件
3.传递两个参数, 会移除对应类型对应事件

off: function (name, callBack) {// 1.判断是否没有传入参数if(arguments.length === 0){this.each(function (key, ele) {ele.eventsCache = {};});}// 2.判断是否传入了一个参数else if(arguments.length === 1){this.each(function (key, ele) {ele.eventsCache[name] = [];});}// 3.判断是否传入了两个参数else if(arguments.length === 2){this.each(function (key, ele) {njQuery.each(ele.eventsCache[name], function (index, method) {// 判断当前遍历到的方法和传入的方法是否相同if(method === callBack){ele.eventsCache[name].splice(index,  1);}});});}return this;
}

[jQuery原理] jQuery事件操作相关方法相关推荐

[jQuery原理] jQuery属性操作相关方法
属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...
[jQuery原理] jQuery入口函数
入口函数测试传入 '' null undefined NaN 0 false 会返回一个空的jQuery对象给我们 console.log($()); console.log($('')); con ...
[jQuery原理] jQuery基本结构
1.jQuery的本质是一个闭包 2.jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 3.jQuery如何让外界访问内部定义的局部变量 window.xxx = xxx; 4.jQuer ...
jQuery原理第五天
addClass <!--* @Author: 码小余* @Date: 2020-06-27 08:23:36* @LastEditTime: 2020-06-27 08:26:43* @Fil ...
jQuery原理第四天
insertAfter 实现insertAfter需要用到原生JavaScript的nextSibling属性元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面 in ...
jQuery原理第一天
jQuery原理 jQuery的基本结构 jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 jQuery如何让外界访问内部定义的局部变量 window ...
[jQuery原理] jQueryDOM操作相关方法
DOM操作相关方法 empty empty ==> 清空指定元素中的所有内容 empty: function () {// 1.遍历指定的元素this.each(function (key, v ...
jQuery 1.6 源码学习（六）——core.js[6]之jQuery对象/数组操作相关方法
本文将分析jQuery对象操作相关方法(包括静态和实例方法): merge方法,代码如下: //此方法用于合并两个jQuery对象(因为jQuery对象中有length属性)或者数组,//这个方法非常 ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

[jQuery原理] jQuery事件操作相关方法

事件操作相关方法

[jQuery原理] jQuery事件操作相关方法相关推荐

最新文章

热门文章