Mr.J-- jQuery学习笔记(三十一)--事件操作方法(on&off)

最新推荐文章于 2022-04-18 17:12:19 发布

End_less__

最新推荐文章于 2022-04-18 17:12:19 发布

阅读量256

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/95443861

版权

jQuery学习专栏收录该内容

33 篇文章 3 订阅

订阅专栏

on(type, callback)

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

之前有写过 on() 的相关内容：

页面:

<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
</body>

调用方法

$("button").on("click", function () {
	alert("click1");
});

$("button").on("click", function () {
	alert("click2");
});

$("button").on("mouseenter", function () {
	alert("mouseenter");
});

$("button").on("mouseleave", function () {
	alert("mouseleave");
});

当调用以上方法时，会进行相关事件的触发。由于on的特点：

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

最终的结果会是（根据触发先后顺序）： mouseenter -> click1 -> click2 -> mouseleave

编写函数方法进行调用：

var btn = document.querySelector("button");
 btn.addEventListener("click", function (ev) {
	 alert("click1");
});
//IE8及以下版本：
 btn.attachEvent("onclick", function () {
	 alert("click1");
 });

封装函数

var btn = document.querySelector("button");

function addEvent(dom, name, callBack) {
	if(dom.addEventListener){
		dom.addEventListener(name, callBack);
	}else{
		dom.attachEvent("on"+name, callBack);
	}
}
addEvent(btn, "click", function () {
	alert("click1");
})

同样，运行结果也是上面的。


 $("button").on("click", function () {
	 alert("click1");
 });

 $("button").on("click", function () {
	 alert("click2");
 });

当自己想要进行jQuery源码编辑时。这个button事件的触发可能会有所不同。以上面的例子输出结果应该是click1 -> click2

但是当在低级浏览器时，结果却是：click2 - > click1

这时，可以进行方法的编写进行统一：

在btn事件创建一个数组：btn.eventsCache = {}
通过push()方法进行相关事件的传递
通过循环，进行事件方法的输出
统一高级和低级浏览器的方法

源码如下：

function addEvent(dom, name, callBack) {
    //相关事件调用如下
	// btn, "click", test1
	// btn, "click", test2
	// btn, "mouseenter", test3
	// btn, "mouseleave", test4
	if(!dom.eventsCache){
		dom.eventsCache = {}; //btn.eventsCache = {}   创建空的对象
	}
	if(!dom.eventsCache[name]){
        //如果没有指定的类型，就进行数组的添加
		/* 
        //属性方法，数组内容的添加
		btn.eventsCache = {
			click: [test1, test2],
			mouseenter: [test3],
			mouseleave: [test4]
		}
		*/
		dom.eventsCache[name] = [];
		dom.eventsCache[name].push(callBack);
		if(dom.addEventListener){
            //根据顺序进行推入
			// 1. click  3.mouseenter 4.mouseleave
			dom.addEventListener(name, function () {
				for(var i = 0; i < dom.eventsCache[name].length; i++){
					dom.eventsCache[name][i]();
				}
			});
		}else{
			dom.attachEvent("on"+name, function () {
                //IE8及其以下浏览器
				for(var i = 0; i < dom.eventsCache[name].length; i++){
					dom.eventsCache[name][i]();
				}
			});
		}
	}else{
        //存在相同属性名称的数组之后，直接进行push方法
		dom.eventsCache[name].push(callBack);
	}
}
//编写函数
function test1(){
	alert("click1");
}
function test2(){
	alert("click2");
}
function test3(){
	alert("mouseenter");
}
function test4(){
	alert("mouseleave");
}
// btn.eventsCache = [test1, test2];
//进行调用
addEvent(btn, "click", test1);
addEvent(btn, "click", test2);
addEvent(btn, "mouseenter", test3);
addEvent(btn, "mouseleave", test4);

相关解释在注释内，最终的结果会是（根据触发先后顺序）： mouseenter -> click1 -> click2 -> mouseleave

源码封装

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)

定义和用法

off() 方法通常用于移除通过 on()方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one()方法。

语法

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

function test1() {
	alert("click1");
}
function test2() {
	alert("click2");
}
function test3() {
	alert("mouseenter");
}
$("button").on("click", test1);
$("button").on("click", test2);
$("button").on("mouseenter", test3);

进行off方法的调用：

1.不传参, 会移除所有事件

$("button").off();

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

$("button").off("click");

最终输出: mouseenter

3.传递两个参数, 会移除对应类型对应事件

$("button").off("click", test1);

最终输出的结果： mouseenter -> click2

源码封装

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;
}

End_less__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mr.J-- jQuery学习笔记(三十一)--事件操作方法(on&off)

on(type, callback)定义和用法on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素...
复制链接

扫一扫

专栏目录