addEventListener 调用函数时，有参数与无参数的差别

最新推荐文章于 2025-04-20 14:01:07 发布

huas_mcfeng

最新推荐文章于 2025-04-20 14:01:07 发布

阅读量658

点赞数

分类专栏： Js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_41592652/article/details/107632443

版权

Js 专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了addEventListene的三个参数：事件类型、处理函数及事件捕获或冒泡阶段调用的控制。并通过示例展示了如何在无参数和有参数的情况下正确调用函数，以及如何利用返回函数实现事件监听的多次执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.addEventListene有哪些参数?

参数1：type(种类）

参数2：func（函数）

参数3：useCapture(true:事件捕获阶段调用事件处理程序;false:事件冒泡阶段调用事件处理程序）

2.调用函数无参数

	// 处理函数
    function handle() {
        console.log(Math.random());
    }
    // 滚动事件（函数调用没有加括号，可以多次执行监听事件）
    window.addEventListener('scroll',handle);
    
  	// 滚动事件（函数调用加括号只能调用一次监听事件，）
   	window.addEventListener('scroll',handle());

3.调用函数有参数


	//带参数的处理函数
 	function handle(wait) {
        alert(wait);
    }
    // 滚动事件（直接调用只会执行一次监听事件）
    window.addEventListener('scroll',handle(1000));
    

    //带参数的处理函数（通过retrurn function可以执行多次监听事件）
	function handle1(wait) {
         return function(){alert(wait)};
    }
    
	// 滚动事件（函数经过处理，可以执行多次监听事件）
    window.addEventListener('scroll',handle(1000));