在Javascript编程中,我们常常需要动态地添加或者移除函数,这是很常见的需求。而实现这样的功能,我们可以使用Javascript的内置方法,或者自定义方法来实现。下面我们将从两个方面来详细讲解Javascript添加和移除函数的通用方法。
在Javascript中,我们可以使用addEventListener()
方法来添加函数,使用removeEventListener()
方法来移除函数。下面我们来看一下具体的案例。
addEventListener()
实现添加函数// 定义函数foo
function foo(){
console.log('hello, I am foo');
}
// 获取按钮元素
let btn = document.getElementById('myBtn');
// 给按钮添加click事件
btn.addEventListener('click', foo);
/*
现在当我们点击按钮时,就会执行foo函数,控制台输出:
hello, I am foo
*/
以上示例中,我们首先定义了一个函数foo()
,然后使用getElementById()
方法获取了一个按钮元素,并使用addEventListener()
方法,将函数foo()
添加到该按钮的click事件上,当用户点击该按钮时,就会执行foo()
函数,控制台输出了hello, I am foo
。
removeEventListener()
实现移除函数// 定义函数foo
function foo(){
console.log('hello, I am foo');
}
// 获取按钮元素
let btn = document.getElementById('myBtn');
// 给按钮添加click事件
btn.addEventListener('click', foo);
// 移除foo函数
btn.removeEventListener('click', foo);
/*
现在当我们点击按钮时,不会执行foo函数。
*/
以上示例中,我们使用addEventListener()
方法将函数foo()
添加到按钮的click事件上,当用户点击该按钮时,就会执行foo()
函数。之后我们在同一个元素上使用removeEventListener()
方法将foo()
函数从该元素上的click事件中移除,这样,当用户点击该按钮时,就不会执行foo()
函数了。
我们还可以使用Javascript自定义函数的方法来实现动态添加或者移除函数的需求。我们可以通过自定义函数,在添加或移除函数时可以做一些自己想要的操作。下面我们来看一下具体的案例。
addHandler()
实现添加函数// 自定义函数addHandler()
function addHandler(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on'+type, handler);
}else{
element['on'+type] = handler;
}
}
// 定义函数foo
function foo(){
console.log('hello, I am foo');
}
// 获取按钮元素
let btn = document.getElementById('myBtn');
// 给按钮添加click事件
addHandler(btn, 'click', foo);
/*
现在当我们点击按钮时,就会执行foo函数,控制台输出:
hello, I am foo
*/
以上示例中,我们定义了一个自定义函数addHandler()
,该函数用于添加事件处理程序。该函数的参数包括元素、事件类型(比如click)、函数(要绑定的函数)。在该函数中,我们首先使用element.addEventListener()
方法判断浏览器是否支持addEventListener()
方法,来添加事件处理函数。如不支持,则使用element.attachEvent()
方法来添加事件处理函数,最后,如果都不支持,则使用element['on'+type] = handler
的方法来实现添加事件处理函数。
removeHandler()
实现移除函数// 自定义函数removeHandler()
function removeHandler(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on'+type, handler);
}else{
element['on'+type] = null;
}
}
// 定义函数foo
function foo(){
console.log('hello, I am foo');
}
// 获取按钮元素
let btn = document.getElementById('myBtn');
// 给按钮添加click事件
addHandler(btn, 'click', foo);
// 移除foo函数
removeHandler(btn, 'click', foo);
/*
现在当我们点击按钮时,不会执行foo函数。
*/
以上示例中,我们也定义了一个自定义函数removeHandler()
,该函数用于移除事件处理程序。该函数的参数和addHandler()
函数一样:元素、事件类型(比如click)、函数(要移除的函数)。在该函数中,我们首先使用element.removeEventListener()
方法判断浏览器是否支持removeEventListener()
方法,来移除事件处理函数。如不支持,则使用element.detachEvent()
方法来移除事件处理函数,最后,如果都不支持,则使用element['on'+type] = null
的方法来实现移除事件处理函数。
通过以上两种方法,我们就可以在Javascript编程中实现动态添加或移除函数的需求了。
本文链接:http://task.lmcjl.com/news/11449.html