`

Js事件绑定时,函数名加括号和不加括号有什么区别

 
阅读更多

一,在js代码里

    加括号代表调用,执行这个方法;

    不加括号目的是引用,代表把这个函数赋值给某个变量。

      在下面代码里:

  1.1   btn.onclick=aa;是正常绑定事件,理解为:

<input id="btn" type="button" onclick="aa()" value="点击变色">

    点击触发执行 function aa(){...};

 

  1.2  btn.onclick=aa();理解如下;

         btn.onclick就相当于一个click事件的引用对象,只不过它附属于btn这个标签。

          等号是赋值操作如果是对象比如A,就会把对象A的指向赋给click事件的引用对象。aa是对象指向,aa()就是执行了函数,它最终是个什么东西,就看函数体返回什么类型,function aa()里有①和②,还有一个return,那么就是 --->先把aa()里①和②执行,在将 函数bb()return 给 btn.onclick;所以就相当于btn.onclick=bb;
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数括号</title>
</head>
<body>

<div id="test">函数括号那回事</div>
<input id="btn" type="button" value="点击变色">

<script type="text/javascript">
   function aa(){
 
	   alert("function aa()函数");  //  ① 

	   document.getElementById("test").style.color="red";  //  ②
      
	   return function bb(){ //  ③
		   alert("function aa()函数里面的function bb()!")
	  }
   }
   function change(){
       var ip=document.getElementById("btn");
       btn.onclick=aa;   //正常绑定事件,onclick触发执行 ①弹出①对话框,②变色;不会执行③
       //btn.onclick=aa();  //页面加载,直接调用aa(),执行 ①弹出①对话框,②变色,但是onclick触发时,会执行③
   }
   change();  //调用change,直接执行
</script>
</body>
</html>

 

分享到:
评论

相关推荐

    JS中关于事件处理函数名后面是否带括号的问题

    在JavaScript中,函数名后面加括号与不加括号的差异影响了函数的调用时机。 当你在函数名后面加上括号时,比如`fun1()`,这代表立即执行该函数。如果函数有返回值,那么它会得到那个值。如果在事件处理中使用这种...

    javascript 函数教程(由浅入深)

    - 有参函数定义:`function 函数名 (参数列表) { 代码... }` - 参数列表中的参数可以是变量、常量或表达式,参数在函数内部可以被引用。函数名对大小写敏感,`function` 关键字必须小写。 2. **调用函数**: - ...

    兼容浏览器的js事件绑定函数(详解)

    首先,我们来梳理一下本文介绍的知识点,这篇文章的主题是关于如何创建一个可以兼容不同浏览器的JavaScript事件绑定函数。知识点分为几个部分:基础概念理解、兼容性实现方案、具体代码实现以及代码的解释和使用。 ...

    JavaScript函数

    无参函数定义时,在函数名后面跟一对空括号,例如`function displaymessage() {...}`。有参函数则需要在括号内列出参数,如`function prod(a, b) {...}`,这里的a和b是传递给函数的值,函数内部可以使用这些值进行...

    【JavaScript源代码】VUE入门学习之事件处理.docx

    如果在事件处理函数中需要访问事件对象,可以不加括号,如`@click="add"`,Vue会自动传入`$event`。 2. **带参数和$event**:我们可以在事件处理函数中传递参数,例如`(0, $event)"&gt;{{ count }}&lt;/div&gt;`。在`set`...

    javascript函数大全

    1. **定义函数**:函数通过`function`关键字定义,后面跟着函数名和一组参数列表,参数之间用逗号分隔,然后是花括号内的函数体。例如: ```javascript function sayHello(name) { console.log('Hello, ' + name)...

    javascript强制函数自动执行.pdf

    它由`function`关键字后跟函数名、参数列表以及函数体组成。函数声明会在当前作用域中创建一个全局变量,并将该变量绑定到函数对象上。 **示例:** ```javascript function myTest() { window.alert("hello"); } ...

    关于JavaScript中事件绑定的方法总结

    - `handle`:处理事件的函数名,不要在函数名后加小括号。 - `useCapture`:布尔类型,表示是否使用事件捕获。一般设置为false,在冒泡阶段触发事件处理函数。 - **attachEvent()方法** attachEvent()方法仅适用于...

    Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    总结来说,带名函数和匿名函数的主要区别在于调用方式和能否直接通过函数名引用。而箭头函数则在语法简洁性上优于前两者,同时改变了`this`的绑定规则,使得`this`总是指向词法作用域,这对于避免函数中`this`指向的...

    ppt课件-第2章 Vue数据绑定 .zip

    Vue.js 是一款流行的轻量级前端JavaScript框架,它以其易用性和灵活性著称,尤其在构建用户界面时表现优秀。本课件“第2章 Vue数据绑定”将深入讲解Vue的核心特性之一——数据绑定,它是Vue实现声明式编程的关键。 ...

    flex页面跳转及数据绑定

    在Flex开发中,页面跳转和数据绑定是两个核心概念,它们对于构建动态且交互性强的应用至关重要。让我们分别深入探讨这两个主题。 首先,Flex页面跳转。在Flex中,有多种方式来实现场景间的切换: 1. **ViewStack...

    创建JavaScript函数语法.doc

    - **函数声明**:这是最常见的方式,使用`function`关键字,后跟函数名和一对圆括号,圆括号内是函数体。例如: ```javascript function xxx() { // 函数体 } xxx(); // 调用函数 ``` - **匿名函数**:如果...

    JS方法调用括号的问题探讨

    正确的做法应该是将函数名`exist`作为引用传递给`showAlert`函数,即去掉函数调用时的括号: ```javascript showAlert(json.msg, exist); ``` 此时,`exist`函数本身作为参数被传递,不会立即执行。当需要在`show...

    19 一个按钮调用两个方法,事件中的event对象.pdf

    在前端开发中,Vue.js是一个非常流行的JavaScript框架,用于构建用户界面和单页应用程序。Vue允许开发者通过数据绑定和组合的视图组件来创建动态的网页。事件处理是Vue中不可或缺的部分,它使得用户交互成为可能。...

    JavaScript 函数集

    函数的定义通常以`function`关键字开始,后面跟着函数名和一对圆括号,圆括号内可以是参数列表。例如: ```javascript function greet(name) { console.log('Hello, ' + name + '!'); } ``` 函数调用时,将传递的...

    JavaScript学习笔记之JS事件对象

    例如:使用document.getElementById获取元素,然后使用v.onclick = clickHandler赋值函数,需要注意的是,赋值时不能加括号,因为加括号会导致函数立即执行,而我们需要的是函数引用。 事件对象的知识点还包括了...

    js代码-箭头函数和普通函数的区别

    在JavaScript中,普通函数通常以`function`关键字开始,然后是函数名(可选),接着是参数列表,最后是包含函数体的大括号。例如: ```javascript function myFunction(param1, param2) { // 函数体 } ``` 普通...

    Mootools 1.2教程 函数

    参数是在函数定义时放置在圆括号内的变量名,如: ```javascript var single_parameter_function = function(name) { alert('The name is: ' + name); }; ``` 在此,`name` 是一个参数,可以在函数内部使用。当...

    JQuery中如何传递参数如click(),change()等具体实现

    然而,在JQuery中直接传递函数名加括号,会立即执行该函数,而不是将函数赋值给事件。为了避免这一点,可以使用事件命名空间或使用匿名函数包装,或者利用JQuery的$.proxy()方法来改变函数的执行上下文。 而通过...

Global site tag (gtag.js) - Google Analytics