JS中function(e) 其中的e代表什么意思

 更新时间:2024年01月31日 10:30:46   作者:韩振方  
我们知道js有很多事件,事件说白了就是 鼠标点击,鼠标移动 ,键盘打字什么的这些人为的操作,本文给大家介绍JS中function(e) 其中的e代表什么意思,感兴趣的朋友一起看看吧

JS中function(e) 其中的e到底代表什么

在学习js的时候 我跳过了一部分章节的内容,导致现在学习react的时候很多内容都不知所措,因为这些教程都是建立在它认为你js所有内容都掌握的前提下,当然这是我自身的原因。需要反省。

下面是正题:

我们知道js有很多事件,事件说白了就是 鼠标点击,鼠标移动 ,键盘打字什么的这些人为的操作。

function(e) 其中的e ,如果你单单写一个方法,比如

那么e其实就是一个形参,和你放入ABCDEFG这些,并没有什么不同,其实我感觉大部分人都迷在这里了,e到底是个什么东西!为什么那里面不写其他字母,其实想明白就好了

重点来了:

当某个元素具有 某个事件处理的时候(比如鼠标点击),那么这个e就不仅仅只是一个参数了,它代表着捕获的这个事件对象,很抽象,别急,我们看个例子:

一个很简单的页面效果,就一个div里 包含一个点击事件,点击事件触发会在控制台打印出 event这个参数,注意!!

下面我将用费曼学习法来讲述一下:

        为什么是event,因为这里面你可以随便放任意值,你说你不喜欢e这个字母,看见就恶心,你可以放ZXCVB任何你喜欢的字母和单词,只不过这是这么些年来人们潜移默化的约定罢了,就像for循环函数,为什么是i++,因为仅仅是人们习惯了,一看到就知道哦,这个i是要用来循环的,就像看见这个e,哦,它是用来代表事件对象的,别人看你的代码会一下子就知道这是什么意思。

        它仅仅代表了它监听到的这个{事件对象},这个对象在代码里代表着谁呢? 没错,就是onclick,说人话就是 监听到了 鼠标 这个事件对象。

说白了也就是浏览器这个对象自带的一个对象,这个对象里包含了许多属性和方法,就好比document 一样,自带了很多方法(getElementTagName方法之类的)如下面图:

        常用的e.target, 其实就相当于 上面例子里的div

补充:

JavaScript易错点 function(e)中的e代表什么意思?

代表形参

function fn(e){
//这里的e 是形参,接收调用方法的值,这里e可以理解指代element
    console.log(e); // 'help'
}
fn('help');

代表事件

$(function(){
     $("#mybutton").on("click mouseover",function(e){
         alert(e.type)
     //在触发该事件的时候,系统会给传给你这个参数,他包含了触发该事件的一些信息
     //这里e指代event
    })
})

到此这篇关于JS中function(e) 其中的e到底代表什么的文章就介绍到这了,更多相关JS中function(e) 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中的对象的extensible属性介绍

    JavaScript中的对象的extensible属性介绍

    这篇文章主要介绍了JavaScript中的对象的extensible属性介绍,JavaScript中,对象的extensible属性用于表示是否允许在对象中动态添加新的property,需要的朋友可以参考下
    2014-12-12
  • 浅谈在fetch方法中添加header后遇到的预检请求问题

    浅谈在fetch方法中添加header后遇到的预检请求问题

    下面小编就为大家带来一篇浅谈在fetch方法中添加header后遇到的预检请求问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 简单实现js进度条加载效果

    简单实现js进度条加载效果

    这篇文章主要为大家详细介绍了如何简单实现js进度条加载效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    这篇文章主要介绍了JS插件clipboard.js实现一键复制粘贴功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Webpack完整打包流程实现

    Webpack完整打包流程实现

    Webpack是当下流行的JavaScript静态模块打包器,它能够处理应用中的所有资源文件,并将其打包成浏览器兼容的文件,本文就来介绍一下Webpack完整打包流程实现,感兴趣的可以了解一下
    2024-09-09
  • JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    在之前的一篇博文中我介绍了一种方法可以让JavaScript具有一种近似于Lambda表达式的编程能力——但是它有一些缺点,其中妨碍它的使用的最主要的一条就是多了一层括号,让代码变得难以阅读。
    2010-09-09
  • 用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用 XMLDOM 和 ADODB.Stream 实现base64编码解码实现代码,需要的朋友可以参考下。
    2010-11-11
  • Javascript中的Prototype到底是什么

    Javascript中的Prototype到底是什么

    Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言。接下来通过本文给大家介绍Javascript中的Prototype到底是啥的相关知识,感兴趣的朋友参考下
    2016-02-02
  • 一文详解JavaScript中的replace()函数

    一文详解JavaScript中的replace()函数

    replace方法的语法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面这篇文章主要给大家介绍了关于JavaScript中replace()函数的相关资料,需要的朋友可以参考下
    2023-01-01
  • Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

    Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

    这篇文章主要介绍了Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08

最新评论