基于函数执行的踩坑(addEventListener)

 更新时间:2023年01月21日 09:05:37   作者:烯烃@  
这篇文章主要介绍了基于函数执行的踩坑(addEventListener),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

记录一次踩坑经历

写法一

const outer = function () {
            var x = "我是外面函数的变量";

            console.log('我现在要在外层被调用');

            return function () {
                console.log(x);
            }
        };

        document.addEventListener('scroll', outer)

结果:

method1

写法二

const outer = function () {
            var x = "我是外面函数的变量";

            console.log('我现在要在外层被调用');

            return function () {
                console.log(x);
            }
        };

        document.addEventListener('scroll', outer())

结果:

method2

两种写法在于第二种写法在事件绑定的时候默认的执行了一次outer,所以得到的是inner函数了,以后翻页执行的是inner函数

.addEventListener添加事件失败原因之一

正确语法

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

addEventListener() 方法用于向指定元素添加事件句柄。

注意,这个指定元素是一个元素,所以当使用document.getElementsByClassName();来获取对象然后再添加事件的时候就会失效,因为它获取的是一个数组对象。

错误语法

document.getElementsByClassName("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

当然,对应数组对象,要访问其中的一个元素,我们要加上数字角标。

使用方式为:

var x = document.getElementsByClassName();
x[0].innerHTML = 'nihao';

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript this的原理以及指向详解

    JavaScript this的原理以及指向详解

    面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变,在方法中,this 表示该方法所属的对象,如果单独使用,this 表示全局对象
    2021-10-10
  • JavaScript随机数的组合问题案例分析

    JavaScript随机数的组合问题案例分析

    这篇文章主要介绍了JavaScript随机数的组合问题,结合具体案例形式分析了JavaScript随机数的组合问题相关算法原理、实现技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • Js四则运算函数代码

    Js四则运算函数代码

    javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果
    2012-07-07
  • JavaScript 转义字符JSON parse错误研究

    JavaScript 转义字符JSON parse错误研究

    这篇文章主要为大家介绍了JavaScript 转义字符JSON parse错误研究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 浅谈layui分页控件field参数接收对象的问题

    浅谈layui分页控件field参数接收对象的问题

    今天小编就为大家分享一篇浅谈layui分页控件field参数接收对象的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 使用classList来实现两个按钮样式的切换方法

    使用classList来实现两个按钮样式的切换方法

    下面小编就为大家分享一篇使用classList来实现两个按钮样式的切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript中实现块作用域的方法

    JavaScript中实现块作用域的方法

    在Javascript中由于没有作用域的概念,所以很容易发生标识符名称的冲突,尤其是在比较大的项目中,这类情况更容易发生
    2010-04-04
  • JS实现的tab切换选项卡效果示例

    JS实现的tab切换选项卡效果示例

    这篇文章主要介绍了JS实现的tab切换选项卡效果,结合具体实例形式分析了JS通过鼠标事件触发自定义函数控制页面元素样式变换实现tab切换功能的相关实现技巧,需要的朋友可以参考下
    2017-02-02
  • 使用typescript快速开发一个cli的实现示例

    使用typescript快速开发一个cli的实现示例

    这篇文章主要介绍了使用typescript快速开发一个cli的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 用javascript实现读取txt文档的脚本

    用javascript实现读取txt文档的脚本

    用javascript实现读取txt文档的脚本...
    2007-07-07

最新评论