关键词

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编程中实现动态添加或移除函数的需求了。

本文链接:http://task.lmcjl.com/news/11449.html

展开阅读全文