`
karaschee
  • 浏览: 15230 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

JavaScript中事件绑定局部函数

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		alert(t1);
	}
}
</script>



多次点击bind by a或bind by b之后,再点击id为button的input,会出现多个alert窗口。

因为每次执行func函数给bt绑定的函数b是不一样的,有自己的域
如果把函数b移到外面,作为全局函数,就只会弹出一个窗口。
注意:按标准来说,addEventListener多次绑定同一事件的同一函数,后面的绑定将覆盖前面的,虽然每次绑定的函数名字都是b,但是一定记住,他们是不同的函数,不存在 后面的绑定将覆盖前面 的情况

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		c();
	}
	function c(){
		alert(t1);
	}
}
</script>


以上代码执行结果不变。

因为每执行一次函数func,就会定义一个函数b和c,并且由于函数b作为事件绑定给了bt,所以函数b和c不会随函数的执行结束而消除(回收),仍然存在在内存中。
但是每次定义的函数b、c是不同的,所以存在多个同名却在不同域的函数b\c,这也是为什么会弹出多个alert框的原因。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		this.c();
	}
	bt.c = function(){
		alert(t1);
	}
}
</script>


以上代码执行结果:不断点击a\b,弹出多个alert框,但每个alert框只显示最后一次点击所传的t1值。

这里不同的是,c是作为bt的方法来绑定的,所以可以看作全局函数,只存在一个c函数。
分享到:
评论

相关推荐

    ES6中javascript实现函数绑定及类的事件绑定功能详解

    函数绑定是一种把函数中的this值固定为特定对象的技术,它减少了在JavaScript中由于this上下文不正确导致的错误。在ES6中,箭头函数自动绑定this,但是并非所有场景都适合使用箭头函数,因此ES7提案了一个函数绑定...

    javascript 函数教程(由浅入深)

    - 全局函数在整个脚本中都可用,而局部函数只在其定义的范围内有效。 - 函数内部可以访问全局变量,但全局变量不能直接访问函数内部的局部变量。 8. **函数表达式**: - 除了函数声明外,还可以使用函数表达式,...

    javascript函数大全

    在JavaScript中,函数是一种可重复使用的代码块,它们可以接收参数并返回结果。函数是ECMAScript的核心特性之一,允许开发者组织和封装代码,提高代码的复用性和可维护性。以下是一些关于JavaScript函数的关键知识点...

    javascript函数详解!

    rest运算符(`...`)允许你在函数中接受不定数量的参数,它们会被收集到一个数组中。 ```javascript function log(...args) { console.log(args); } log(1, 2, 3); // 输出:[1, 2, 3] ``` 9. **函数返回值*...

    JavaScript函数

    `return`语句用于从函数中返回一个值,是函数执行结果的出口。 3. **return语句的使用**:除了返回计算结果,`return`还可以配合`confirm`函数,用于确认用户操作。例如,超链接删除操作前会弹出确认对话框,只有...

    JavaScript下的函数(1).rar

    JavaScript函数还有许多高级特性,比如函数表达式、闭包、作用域和this的绑定等。闭包是指函数能够访问并操作其词法作用域内的变量,即使该函数已经在其定义的作用域之外被调用。例如: ```javascript function ...

    javascript的函数

    JavaScript中的函数是编程语言的核心部分,用于封装可重用的代码块。函数允许我们将一系列操作打包在一起,并在需要时调用它们,提高了代码的模块化和效率。在JavaScript中,函数有多种定义方式,每种都有其特定的...

    JavaScript在for循环中绑定事件解决事件参数不同的情况

    在处理具有相似功能但参数不同的事件时,传统上我们可能会通过在for循环中直接绑定事件处理函数来尝试解决问题。然而,直接这样做会遇到参数未按预期绑定的问题,因为JavaScript的闭包机制和变量作用域特性导致所有...

    Javascript函数

    JavaScript函数是编程语言中的核心概念,它是一种可重复使用的代码块,可以接受输入(参数)并产生输出(返回值)。JavaScript支持两种函数定义方式:函数声明语句和函数定义表达式。 1. **函数声明语句**:在...

    JavaScript函数式编程指南1

    书中首先介绍了函数式编程的基本概念,例如纯函数——一个只依赖于输入参数而不会改变外部状态的函数,以及副作用——函数执行时对非局部状态的修改。这些概念是函数式编程的基石,它们有助于构建可预测且易于测试的...

    javascript对图片局部放大

    3. **事件绑定**:在JavaScript中,为图片元素添加`mousemove`事件监听器。当事件触发时,获取鼠标相对于图片的坐标,并计算出放大镜应显示的区域。 4. **计算放大比例**:根据放大镜的大小和预设的放大倍数,计算...

    JavaScript:函数与作用域

    在JavaScript中,函数是一段可重用的代码块,用来执行特定任务。函数可以通过两种方式进行定义:函数声明和函数表达式。 - **函数声明**: - **定义**:使用`function`关键字来定义函数。 - **格式**:`function ...

    ajax说明 事件 绑定 数据

    Ajax的核心是通过JavaScript来实现局部刷新,提高了用户体验,减少了网络传输的负担。 一、数据获取与发送 Ajax的数据交互主要通过浏览器提供的XMLHttpRequest对象(在IE中表现为Microsoft.XMLHTTP或MSXML2....

    javascript自启动函数的问题探讨.docx

    在这个例子中,闭包确保了每个事件处理函数都有自己的局部变量副本,而不是共享同一个变量 `i`。 通过使用 IIFE 和闭包,我们可以避免循环中的变量问题,确保每个事件处理函数的行为正确无误。这对编写高效且可靠的...

    javascript笔记之匿名函数和闭包.docx

    在JavaScript中,匿名函数是一种没有名称的函数,通常作为参数传递或者用于立即执行。在上述文档中,我们看到几种不同的匿名函数使用方式: 1. **匿名函数自执行**:`(function(){})()`,这种写法会立即执行该匿名...

    JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    JavaScript中的函数是其核心特性之一,它是一种第一类对象,这意味着函数可以赋值给变量、作为参数传递、作为其他函数的返回值。本文将详细解释JavaScript函数的定义、参数、绑定、作用域以及闭包。 1. **函数定义*...

    javaScript_cb:各种 javascript 实用函数

    在"javaScript_cb"这个项目中,我们很显然会看到一系列实用的JavaScript函数,这些函数可能涵盖了各种常见任务,包括数据处理、DOM操作、事件处理、动画效果等。 JavaScript的基础知识点包括变量、数据类型(如字符...

    JavaScript学习(一)

    闭包是JavaScript中一个重要的特性,它允许内部函数访问外部函数的作用域,即使外部函数已经执行完毕。 4. **作用域与变量生命周期**:JavaScript有全局作用域和局部作用域,变量的生命周期与它们的作用域紧密相关...

Global site tag (gtag.js) - Google Analytics