javascript 添加和移除函数的通用方法

在Javascript编程中，我们常常需要动态地添加或者移除函数，这是很常见的需求。而实现这样的功能，我们可以使用Javascript的内置方法，或者自定义方法来实现。下面我们将从两个方面来详细讲解Javascript添加和移除函数的通用方法。

方法一：使用内置方法实现添加和移除函数

在Javascript中，我们可以使用addEventListener()方法来添加函数，使用removeEventListener()方法来移除函数。下面我们来看一下具体的案例。

示例1：使用内置方法 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。

示例2：使用内置方法 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自定义函数的方法来实现动态添加或者移除函数的需求。我们可以通过自定义函数，在添加或移除函数时可以做一些自己想要的操作。下面我们来看一下具体的案例。

示例1：自定义函数 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的方法来实现添加事件处理函数。

示例2：自定义函数 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编程中实现动态添加或移除函数的需求了。