一个由addEventListener引发思考

最新推荐文章于 2024-07-01 16:22:16 发布

懒得懒

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量501

点赞数 2

分类专栏： javascript 文章标签：感悟 JavaScript

本文链接：https://blog.csdn.net/wuChiSha/article/details/88686972

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

经同事推荐，最近在看犀牛（JavaScript权威指南），刚刚看到前几页，有个提到客户端JavaScript的例子，模仿着，写着类似的代码，突然想到，如果是带参数的函数，改怎么调用，于是……

一、功能简述
用JavaScript 给一个div添加点击事件，当点击之后，div中的文字边红色

二、思路过程

最终实现的代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        div {
            height: 100px;
            width: 0 outo;
            border: 1px solid blue;
        }
    </style>
    <script>
        function change() {
            this.style.color = 'red';
        }
        window.onload = function () {
            var doc = document.getElementById('app');
            doc.addEventListener('click', change)

        }

    </script>
</head>

<body>
    <div id='app'>
        桃花谢了春红
    </div>

</body>

</html>

想法历程：

1、直接在<script/>标签中写相关代码：

结果：

控制台保存，div中文字颜色并未发生改变，点击也没反应

分析：

HTML中，页面加载顺序是由上而下的，在本文中，先加载执行<javascript/>中的内容，此时div还未形成，导致document.getElementById('app')获取到的值为undefined，而进一步导致 doc.style.color = 'red';报错，页面没有任何效果

2、可以再文档加载完成后触发该事件

结果：

div颜色为红色

3、如何实现当点击div后，文字变成红色？动态给div添加点击事件

结果：

点击div，颜色变成红色

4、代码有点重复，document.getElementById('app')，写了两遍，按理说一遍就好了？

思路：

将对象传给函数

结果：

页面一刷新，div中文字即为红色

原因：

在addEventListener中的处理函数，只需要放函数名，如果是直接用函数名加括号，则成了函数直接执行===》本例中就变成：当页面加载完成时，将div中文字颜色改为红色

5、既然添加处理函数，不能有括号，那就只能调用无参函数了，可是如果我想传入参数怎么办？带着问题，百度找答案

解决方案一：

使用匿名函数

功能实现了，但有一个问题：如果处理的事件业务逻辑比较复杂，需要的代码比较多，使用匿名函数会导致代码比较臃肿，极大的降低了可读性

方案二：

使用bind函数传值

达到预期效果， bind()方法主要就是将函数绑定到某个对象，第一个参数都是作为执行时函数上下文中的this的对象，并且从第二个参数起，会依次传递给原始函数====》利用bind进行传值

6、最终采取的方法使用this

doc调用addEventListener，所以change中的this即为doc（先暂时这么理解，也许后面学习学习，会有更深入的理解）

三、总结

最后实现代码逻辑不是最初想的那样（调用有参函数），但这么波折了一路，感觉收获满满，故记录下来。

-----------------------------------------------------------------------干货分界线---------------------------------------------------------------------------------

1、HTML的加载顺序是由上而下的，如果<script/>标签恰巧写在头部，就不能直接在其中写逻辑处理的代码（一般加上window的onload事件，即当页面加载完成后再进行相应的事件处理）；

2、函数调用的一点理解：仅仅写函数名（不带括号），是等待被触发后执行（函数中的逻辑）；带上括号（函数名加括号）则是立即被执行；

3、bind： bind函数一般用来绑定this（第一个参数），而从第二个参数起，其参数会依次传递给原始函数（可用来调用有参函数）；

4、函数中的this指向其调用者（即谁调用这个函数，这个函数中的this就指向谁）

------------------------------------------------------------------------小感悟---------------------------------------------------------------------------------------

从数学到后端开发，没有任何计算机基础；再从后端开发到前端开发，没有任何前端基础。一切都是先从项目开始，先从框架开始，同事说我人家都是一步上一层楼的，而我直接到了五楼。这确实没错，基础不扎实，总有种在空中飘着的不踏实感。平常忙于项目，忙于实现功能，用的是框架，其实很少能够深入的学习JavaScript的，基本都是用到什么，看看博客、文档就匆匆开发了。现在回过头来学习前端基础（HTML、css、JavaScript），慢慢的理解了一些代码，比如今天的bind，以前只知道可以绑定this(改变函数this的指向)，当前也写过绑定的时候同时传值，尤其是在点击事件中，但从未想过为啥这样写或者那样写就可以了，从未想过bind函数的第二个参数到底是干啥的。没有一些基础的概念，于是，一离开项目，一离开熟悉的代码，大脑一片空白。

基础真的很重要，慢慢学习，一切总会好的！