`

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中关于事件处理函数名后面是否带括号的问题

     JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动。有两种常见的形式,分别是DOM Level 0 和DOM Level 2。这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过...

    javascript 函数教程(由浅入深)

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

    javascript函数大全

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

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

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

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

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

    创建JavaScript函数语法.doc

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

    JavaScript 函数集

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

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

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

    javascript基础教程-总结.docx

    - 函数:`function`关键字开始,后面跟着函数名、括号内的参数和花括号内的函数体。 JavaScript提供了多种内置对象,如: - **Window对象**:表示浏览器窗口,包含`history`、`location`等属性。 - **Document对象...

    JavaScript Cheat Sheet.pdf

    2. JavaScript是Case Sensitive的,意味着变量名和函数名的大小写都很重要。 3. JavaScript可以在HTML文档中的标签中编写,也可以在外部文件中编写,并通过标签引入。 JavaScript变量 1. 在JavaScript中,变量可以...

    javascript基础教程源代码

    `addEventListener`方法用于绑定事件处理函数。 7. **DOM操作**:Document Object Model (DOM)是HTML和XML文档的抽象表示,JavaScript可以通过DOM API来操作网页元素,如增删改查元素、改变样式等。 8. **AJAX**:...

    js事件对象

    一、什么是事件(event) 事件是发生并得到处理的操作,既:事情来了,然后得到处理。 事件发生 事件处理 ...二、事件绑定 事件绑定三部分组成:对象.... //直接赋值函数名即可,无须括号 function box(){}

    js参考手册.rar

    "js参考手册.rar"是一个压缩包,包含了一份详细的JavaScript参考手册,通常这种手册会提供全面的语言语法、函数、对象、API等方面的详细信息,帮助开发者深入理解和使用JavaScript。 JavaScript语法: 1. 变量声明...

    javascript基础知识大全

    事件处理函数可以绑定到DOM元素上,当特定事件发生时执行。 10. **闭包** 闭包是指函数及其相关的引用环境组合成的整体,即使函数执行完毕,其内部变量仍然保持活动状态。闭包常用于实现私有变量和模块化。 11. *...

    js基础

    - 函数调用:通过函数名加上括号执行函数。 - 函数参数:传递值到函数内部。 - 箭头函数:更简洁的函数写法,例如 `(param1, param2) =&gt; expression`。 5. **数组**: - 数组创建:`var arr = [元素1, 元素2, ....

    js 数字时钟

    10. **事件监听**:虽然在这个简单的数字时钟应用中可能不涉及用户交互,但Vue.js支持事件监听,允许我们在用户操作时执行特定的逻辑,如点击按钮切换24小时制和12小时制。 通过以上知识点的学习和实践,你可以创建...

    零基础学JavaScript1.rar

    3. 作用域:JavaScript有全局作用域和局部作用域,理解它们的区别对于避免变量冲突和优化代码性能很重要。 对象与数组: 1. 对象:JavaScript对象是一系列键值对的集合,用花括号 `{}` 表示。例如,`var person = {...

    Javascript讲义(李炎恢)

    - 全局和局部作用域:变量在函数内部或外部声明的区别。 - 闭包:函数可以访问并操作其词法作用域内的变量,即使在其外部定义。 7. **异步编程** - 回调函数:常用解决异步问题的方法,将函数作为参数传递,异步...

    javascript教学文档.docx

    1. **大小写敏感**:在编写JavaScript代码时,需要注意变量、函数名和其他标识符的大小写,因为它们是区分大小写的。 2. **注释**:多行注释使用`/* ... */`,单行注释使用`//`。 3. **变量定义**:使用`var`...

Global site tag (gtag.js) - Google Analytics