是否有任何方法使用onclick html属性调用多个JavaScript函数?
当前回答
当然,只需将多个侦听器绑定到它。
jQuery速成
$(“#id”).bind(“click”, function() { 警报(“事件 1”); }); $(“.foo”).bind(“click”, function() { 警报(“Foo 类”); }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <div class=“foo” id=“id”>Click</div>
其他回答
ES6反应
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>
下面是另一个答案,它将单击事件附加到.js文件中的DOM节点。它有一个函数callAll,用于调用每个函数:
const btn = document.querySelector('.btn'); const callAll = (fn) = > (……args) = > fn。forEach(fn => fn?.(…args)); 函数logHello() { console.log('你好'); } 函数logBye() { console.log('再见'); } btn.addEventListener(“点击”, callAll (logHello logBye) ); <button type="button" class="btn"> 点击我 < /按钮>
我会用元素。addEventListener方法将其链接到函数。从该函数可以调用多个函数。
我认为将一个事件绑定到一个函数,然后调用多个函数的好处是,你可以执行一些错误检查,有一些if else语句,这样一些函数只在满足某些条件时才会被调用。
const callDouble = () =>{
increaseHandler();
addToBasket();
}
<button onClick={callDouble} > Click </button>
这对我来说很有用,你可以在一个函数中调用多个函数。然后调用这个函数。
这是brad的另一种回答,你可以这样用逗号
onclick="funA(), funB(), ..."
但是最好不要使用这种方法-对于小型项目,你可以只在一个函数调用的情况下使用onclick(更多:更新的不显眼的javascript)。
函数funA() { console.log (' A '); } 函数funB(点击元素){ console.log('B: ' + click . innertext); } 函数funC(cilckEvent) { console.log('C: ' + cilckEvent.timeStamp); } div{光标:指针} <div onclick="funA(), funB(this), funC(event)"< / div > >点击我
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?