javascript函数、事件、对象、方法的通俗解释和他们的作用。

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript函数、事件、对象、方法的通俗解释和他们的作用。相关的知识，希望对你有一定的参考价值。

我是一名自学web的农民工，学完了html+css后，开始学习javascript，但是被那些抽象的名词吓住了，谁能帮我详细说明一下，javascript中函数、事件、对象、方法、这些名词的通俗含义呢？还有他们之间有什关联呢？他们之间如何搭配使用呢？帮忙细说一下，不要从百度百科中复制哦，表示感谢！财富值不够了，一定采纳！谢谢！

其实我也是自学的js

一开始也遇到了同样的问题
别人也给解释了很多，但根本听不懂
前面两个仁兄回答的非常好，简单明了
但这是在我明白这些名词以后看，看得非常清晰
我想，这些解释在我明白以前是看不懂的
我来解释一下吧：
函数：
js里凡是带有function的都可以叫做函数，函数包括定义函数和执行函数,函数的存在就是为了实现你想干什么，无论你想干什么，都可以先定义一个函数，然后在你想运行的时候运行它。
事件：
你可以简单理解为触发函数的事情，比如你想在点击一个按钮时触发一个函数，那么这个点击就是事件，至于js都有什么事件，你可以查一查，每一个事件都有一个名字（比如点击事件就是onclick）
方法：
其实方法也是函数，只不过对象里的函数就叫方法了。（下面讲对象）
对象：
这个就不太好理解了，我理解他用了N久，直到有一天突然明白了，才发现其实没那么复杂。
对象你可以简单的理解为一个大仓库，里面有各种资源（各种方法——也就是函数，各种定义了这个仓库的属性——比如这个仓库是干什么用的啊）。好了，现在你有一个满载资源的仓库了，当你想做某些事件的时候，你想到了这个仓库里有你想要的资源，那么你就可以调用这个仓库里的资源了，也就是调用这个对象里的方法了。

那你可能要问了，我不用对象也能实现我的目的
其实初学的时候是这样的，但当程序越来越多，越来越复杂的时候，就会用到这些了。
不明白就追问吧，纯手写的。参考技术A

函数和方法只是说法不同罢了，函数和方法都是用来实现某种功能用的。如果应该函数被当作是某个对象的属性，那么这个函数就叫做方法。

比如，下面一个函数：

function say ()
alert('I am a person！');

say();

如果你调用这个函数的话，他会弹出一句话说：I am a person！

当你把这个函数赋给一个对象当属性时，他就是方法：

var person =
    age ： 25,
    say : function ()
        alert('I am a person！ ');

你调用这个对象的方法，他会弹出一句话说：I am a person！

可以发现方法和函数的调用是有点点区别的（其实函数前面也可以加一个window对象，所以第一个say的函数也可以看成是window的方法：window.say()）。

对象是一堆方法和属性的集合，其实刚开始你不用过多去了解这些概念性的东西，一开始你就以实现功能为目的来写，慢慢写多了自然就会了解面向对象的概念。上面第二个例子中person就是一个具体的对象，他有年龄属性和说话的功能（）方法。

事件是用来触发函数和方法的，javascript是一门事件驱动的语言，用户在页面上的所有交互都会通过事件来传递给具体的函数和方法，从而来实现具体的功能：

btn.onclick = person.say;

上面的代码就是通过点击某个按钮（触发点击事件），然后执行person.say()的方法。

希望我的回答对你有所帮助，我也是刚学javascript，好多概念性的东西也不清楚，不过我们可以一起交流。

参考技术B

函数=方法，定义如下：

function 你的函数名(参数1,参数2,...)

对象，js本身没有对象的概念，对象是用原型(prototype)做出来的，对象就是类的实例，js类设计如下（多种方式中的一种）：

function 你的类名()

this.方法A=function()

this.方法B=function()

事件，就是说发生了什么事情，系统会触发一个函数或者方法来执行，比如，单击按钮，就有一个onclick事件。下面是一个完整的demo:

<html>
<head>
</head>
<body>
<input type="button" onclick="FangFa()" value="事件"/>

</body>
</html>

<script type="text/javascript">
function Lei()

 this.HanShuA=function()
 alert("调用类Lei函数A");


 this.HanShuB=function()
 alert("调用类Lei函数B");


function FangFa()

 alert("你单击了按钮");
 A=new Lei();
 A.HanShuA();

</script>

参考技术C javascript的学习你可以看一些视频那样更加有利于你的学习。函数可以成为触发时的动作，比如你是神那么一个人在做了一个事之后你想让他下面发生什么事你就可以写一个函数来控制他。事件和函数也可以说是因果关系事件是因函数是果。对象是说的谁触发了事件。

JavaScript 事件委托详解

本概念

事件委托，通俗地来讲，就是把一个元素响应事件（click、focus……）的函数委托到另一个元素；

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件冒泡

前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？

在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；

技术分享图片

如上图所示，事件模型是指分为三个阶段：

捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；### 事件

委托的优点

1. 减少内存消耗

试想一下，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件；

1

2

3

4

5

6

7

8

<span class="hljs-tag"><<span class="hljs-name">ul <span class="hljs-attr">id=<span class="hljs-string">"list">

 <span class="hljs-tag"><<span class="hljs-name">li>item 1<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li>item 2<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li>item 3<span class="hljs-tag"></<span class="hljs-name">li>

 ......

 <span class="hljs-tag"><<span class="hljs-name">li>item n<span class="hljs-tag"></<span class="hljs-name">li>

<span class="hljs-tag"></<span class="hljs-name">ul>

// ...... 代表中间还有未知数个 li

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素；

所以事件委托可以减少大量的内存消耗，节约效率。

2. 动态绑定事件

比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；

在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；

所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

jQuery 中的事件委托

jQuery 中的事件委托相信很多人都用过，它主要这几种方法来实现：

$.on: 基本用法: $(‘.parent’).on(‘click’, ‘a’, function () { console.log(‘click event on tag a’); })，它是 .parent 元素之下的 a 元素的事件代理到 $(‘.parent’) 之上，只要在这个元素上有点击事件，就会自动寻找到 .parent 元素下的 a 元素，然后响应事件；
$.delegate: 基本用法: $(‘.parent’).delegate(‘a’, ‘click’, function () { console.log(‘click event on tag a’); })，同上，并且还有相对应的 $.delegate 来删除代理的事件；
$.live: 基本使用方法: $(‘a’, $(‘.parent’)).live(‘click’, function () { console.log(‘click event on tag a’); })，同上，然而如果没有传入父层元素 $(.parent)，那事件会默认委托到 $(document) 上；(已废除)

实现功能

基本实现

比如我们有这样的一个 HTML 片段：

1

2

3

4

5

6

7

8

<span class="hljs-tag"><<span class="hljs-name">ul <span class="hljs-attr">id=<span class="hljs-string">"list">

 <span class="hljs-tag"><<span class="hljs-name">li>item 1<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li>item 2<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li>item 3<span class="hljs-tag"></<span class="hljs-name">li>

 ......

 <span class="hljs-tag"><<span class="hljs-name">li>item n<span class="hljs-tag"></<span class="hljs-name">li>

<span class="hljs-tag"></<span class="hljs-name">ul>

// ...... 代表中间还有未知数个 li

我们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：

1

2

3

4

5

6

7

8

9

10

<span class="hljs-comment">// 给父层元素绑定事件

<span class="hljs-built_in">document.getElementById(<span class="hljs-string">‘list‘).addEventListener(<span class="hljs-string">‘click‘, <span class="hljs-function"><span class="hljs-keyword">function (<span class="hljs-params">e) {

 <span class="hljs-comment">// 兼容性处理

 <span class="hljs-keyword">var event = e || <span class="hljs-built_in">window.event;

 <span class="hljs-keyword">var target = event.target || event.srcElement;

 <span class="hljs-comment">// 判断是否匹配目标元素

 <span class="hljs-keyword">if (target.nodeName.toLocaleLowerCase === <span class="hljs-string">‘LI‘) {

 <span class="hljs-built_in">console.log(<span class="hljs-string">‘the content is: ‘, target.innerHTML);

 }

});

在上述代码中， target 元素则是在 #list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上；

使用 Element.matches 精确匹配

如果改变下 HTML 成：

1

2

3

4

5

6

7

8

<span class="hljs-tag"><<span class="hljs-name">ul <span class="hljs-attr">id=<span class="hljs-string">"list">

 <span class="hljs-tag"><<span class="hljs-name">li <span class="hljs-attr">className=<span class="hljs-string">"class-1">item 1<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li>item 2<span class="hljs-tag"></<span class="hljs-name">li>

 <span class="hljs-tag"><<span class="hljs-name">li <span class="hljs-attr">className=<span class="hljs-string">"class-1">item 3<span class="hljs-tag"></<span class="hljs-name">li>

 ......

 <span class="hljs-tag"><<span class="hljs-name">li>item n<span class="hljs-tag"></<span class="hljs-name">li>

<span class="hljs-tag"></<span class="hljs-name">ul>

// ...... 代表中间还有未知数个 li

这里，我们想把 #list 元素下的 li 元素（并且它的 class 为 class-1）的点击事件委托代理到 #list 之上；

如果通过上述的方法我们还需要在 `if (target.nodeName.toLocaleLowerCase === ‘LI’)` 判断之中在加入一个判断 `target.nodeName.className === ‘class-1′`；

但是如果想像 CSS 选择其般做更加灵活的匹配的话，上面的判断未免就太多了，并且很难做到灵活性，这里可以使用 Element.matches API 来匹配；

Element.matches API 的基本使用方法: Element.matches(selectorString)，selectorString 既是 CSS 那样的选择器规则，比如本例中可以使用 target.matches(‘li.class-1′)，他会返回一个布尔值，如果 target 元素是标签 li 并且它的类是 class-1 ，那么就会返回 true，否则返回 false；

当然它的兼容性还有一些问题，需要 IE9 及以上的现代化浏览器版本；

我们可以使用 Polyfill 来解决兼容性上的问题：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<span class="hljs-keyword">if (!Element.prototype.matches) {

 Element.prototype.matches =

 Element.prototype.matchesSelector ||

 Element.prototype.mozMatchesSelector ||

 Element.prototype.msMatchesSelector ||

 Element.prototype.oMatchesSelector ||

 Element.prototype.webkitMatchesSelector ||

 <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">s) {

 <span class="hljs-keyword">var matches = (<span class="hljs-keyword">this.document || <span class="hljs-keyword">this.ownerDocument).querySelectorAll(s),

 i = matches.length;

 <span class="hljs-keyword">while (--i >= <span class="hljs-number">0 && matches.item(i) !== <span class="hljs-keyword">this) {}

 <span class="hljs-keyword">return i > <span class="hljs-number">-1;

 };

}

加上 Element.matches 之后就可以来实现我们的需求了：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<span class="hljs-keyword">if (!Element.prototype.matches) {

 Element.prototype.matches =

 Element.prototype.matchesSelector ||

 Element.prototype.mozMatchesSelector ||

 Element.prototype.msMatchesSelector ||

 Element.prototype.oMatchesSelector ||

 Element.prototype.webkitMatchesSelector ||

 <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">s) {

 <span class="hljs-keyword">var matches = (<span class="hljs-keyword">this.document || <span class="hljs-keyword">this.ownerDocument).querySelectorAll(s),

 i = matches.length;

 <span class="hljs-keyword">while (--i >= <span class="hljs-number">0 && matches.item(i) !== <span class="hljs-keyword">this) {}

 <span class="hljs-keyword">return i > <span class="hljs-number">-1;

 };

}

<span class="hljs-built_in">document.getElementById(<span class="hljs-string">‘list‘).addEventListener(<span class="hljs-string">‘click‘, <span class="hljs-function"><span class="hljs-keyword">function (<span class="hljs-params">e) {

 <span class="hljs-comment">// 兼容性处理

 <span class="hljs-keyword">var event = e || <span class="hljs-built_in">window.event;

 <span class="hljs-keyword">var target = event.target || event.srcElement;

 <span class="hljs-keyword">if (target.matches(<span class="hljs-string">‘li.class-1‘)) {

 <span class="hljs-built_in">console.log(<span class="hljs-string">‘the content is: ‘, target.innerHTML);

 }

});

函数封装

在应对更多场景上我们可以把事件代理的功能封装成一个公用函数，这样就可以重复利用了。

结合上面的例子来实现一个函数 eventDelegate，它接受四个参数：

[String] 一个选择器字符串用于过滤需要实现代理的父层元素，既事件需要被真正绑定之上；
[String] 一个选择器字符串用于过滤触发事件的选择器元素的后代，既我们需要被代理事件的元素；
[String] 一个或多个用空格分隔的事件类型和可选的命名空间，如 click 或 keydown.click ;
[Function] 需要代理事件响应的函数；

这里就有几个关键点：

对于父层代理的元素可能有多个，需要一一绑定事件；
对于绑定的事件类型可能有多个，需要一一绑定事件；
在处理匹配被代理的元素之中需要考虑到兼容性问题；
在执行所绑定的函数的时候需要传入正确的参数以及考虑到 this 的问题；

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">eventDelegate (<span class="hljs-params">parentSelector, targetSelector, events, foo) {

 <span class="hljs-comment">// 触发执行的函数

 <span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">triFunction (<span class="hljs-params">e) {

 <span class="hljs-comment">// 兼容性处理

 <span class="hljs-keyword">var event = e || <span class="hljs-built_in">window.event;

 <span class="hljs-keyword">var target = event.target || event.srcElement;

 <span class="hljs-comment">// 处理 matches 的兼容性

 <span class="hljs-keyword">if (!Element.prototype.matches) {

 Element.prototype.matches =

 Element.prototype.matchesSelector ||

 Element.prototype.mozMatchesSelector ||

 Element.prototype.msMatchesSelector ||

 Element.prototype.oMatchesSelector ||

 Element.prototype.webkitMatchesSelector ||

 <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">s) {

 <span class="hljs-keyword">var matches = (<span class="hljs-keyword">this.document || <span class="hljs-keyword">this.ownerDocument).querySelectorAll(s),

 i = matches.length;

 <span class="hljs-keyword">while (--i >= <span class="hljs-number">0 && matches.item(i) !== <span class="hljs-keyword">this) {}

 <span class="hljs-keyword">return i > <span class="hljs-number">-1;

 };

 }

 <span class="hljs-comment">// 判断是否匹配到我们所需要的元素上

 <span class="hljs-keyword">if (target.matches(targetSelector)) {

 <span class="hljs-comment">// 执行绑定的函数，注意 this

 foo.call(target, <span class="hljs-built_in">Array.prototype.slice.call(<span class="hljs-built_in">arguments));

 }

 }

 <span class="hljs-comment">// 如果有多个事件的话需要全部一一绑定事件

 events.split(<span class="hljs-string">‘.‘).forEach(<span class="hljs-function"><span class="hljs-keyword">function (<span class="hljs-params">evt) {

 <span class="hljs-comment">// 多个父层元素的话也需要一一绑定

 <span class="hljs-built_in">Array.prototype.slice.call(<span class="hljs-built_in">document.querySelectorAll(parentSelector)).forEach(<span class="hljs-function"><span class="hljs-keyword">function (<span class="hljs-params">$p) {

 $p.addEventListener(evt, triFunction);

 });

 });

} 学习前端的同学 欢迎加入前端学习交流QQ群：461593224

以上是关于javascript函数、事件、对象、方法的通俗解释和他们的作用。的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript中，类、对象、事件、方法、函数的联系与区别

JavaScript 事件委托详解

09-JS事件

javascript面向对象知识