是否有任何方法使用onclick html属性调用多个JavaScript函数?
当前回答
这是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 > >点击我
其他回答
当然,只需将多个侦听器绑定到它。
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>
另外,为了便于维护JavaScript,可以使用命名函数。
下面是匿名函数的例子:
var el = document.getElementById('id');
// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });
但是,想象一下,您有一对附加到同一个元素上的它们,并且想要删除其中一个。从该事件侦听器中删除单个匿名函数是不可能的。
相反,你可以使用命名函数:
var el = document.getElementById('id');
// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };
// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);
// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);
这也使您的代码更容易阅读和维护。特别是当函数更大的时候。
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"> 点击我 < /按钮>
功能组件
<Button
onClick={() => {
cancelAppointment();
handlerModal();
}}
>
Cancel
</Button>
推荐文章
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象