js 事件绑定传入自定义参数

使用原生 js 编写组件时遇到了这个问题，记录一下。

问题描述

有一个函数 a() , 我希望在点击的时候调用，a() 函数需要的参数除了触发点击的事件外，还需要一个额外的对象 obj。

为元素添加监听器，可以这么写：

document.getElementById('test').addEventListener('click',a)

但是，问题就出现了，事件触发时只会把事件作为第一个参数传入 a() 函数中，obj 不是个全局变量，怎么把 obj 传入 a() 中呢？

解决方法

使用闭包就可以解决这个问题

假设 a（）函数是这样的，除了事件对象外，我们还需要一个 obj 对象

function a(e, obj){console.log(obj);
}

直接将 a() 函数绑定到事件上，肯定是无法获得 obj 的，我们可以将这个函数包装一下

function fn(obj){function a(){console.log(obj);}return a;
}
document.getElementById('test').addEventListener('click',fn('测试'))

通过外层的 fn() 函数，返回了函数 a() , 真正绑定上去的是这个返回的函数。而传入的 obj 在 fn() 的作用域中，a() 作为 fn() 的内部函数，也可以访问到这个对象，这个问题就解决了。

js 事件绑定传入自定义参数相关推荐

html click事件参数,vue 实现click同时传入事件对象和自定义参数
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧仅仅传入自定义参数 HTML ddddd JS代码 new Vue ...
vue click同时传入事件对象和自定义参数
仅仅传入自定义参数 HTML <div id="app"><button @click="tm(123)">ddddd</butt ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
Python scrapy 动态传入自定义参数
本文仅供学习交流使用,如侵立删!demo下载见文末动态传递自定义参数启动 def run(model_id):# 启动爬虫 car_images_spider是爬虫脚本文件名:spiders/car ...
关于事件模型，js事件绑定和解除的学习
http://www.cnblogs.com/iyangyuan/p/4190773.html 原文的例子通俗易懂,很适合学习.主要讲了dom0和dom2的事件模型,以及捕获和冒泡,事件绑定和解除事件 ...
JavaScript解除事件绑定处理程序 js事件绑定解除
//参考 https://mp.csdn.net/postedit/90524536 JavaScript 事件绑定封装一个兼容性事件绑定方法应需求有时候事件绑定触发后就要接触事件. 解除事件绑定方 ...
原生js事件绑定和事件移除
/*** @description 事件绑定,兼容各浏览器* @param target 事件触发对象 * @param type 事件* @param func 事件处理函数*/ function ...
JS事件绑定的几种方式
一.有几种常用的: 在JavaScript中,有三种常用的绑定事件的方法: 1.在DOM元素中直接绑定. 2.在JavaScript代码中绑定. 3.绑定事件监听函数. 二.具体分析: 1.在DOM元 ...
js事件Event对象(自定义事件对象 CustomEvent)
文章目录一.参考二.Event 接口介绍 2.1 事件分类三. 创建过时Event不推荐 3.1 document.createEvent 3.1.1 语法`var event = docume ...

js 事件绑定传入自定义参数

问题描述

解决方法

js 事件绑定传入自定义参数相关推荐

最新文章

热门文章