如何在Javascript中为单个事件调用多个函数？
[英]How do I call multiple functions for a single event in Javascript?
问题描述
<!DOCTYPE html>
<html>
<body>
<input type="text" onMouseover= "this.style.color='red'">Mouse over
me!</input>
</body>
</html>
I would also like to call "this.style.cursor='default'" along with "this.style.color='red'" 
我还想将"this.style.cursor='default'"与"this.style.color='red'"一起调用
4 个解决方案
解决方案1
2 已采纳 2015-08-20 10:41:49
Declaratively 声明式地
Separate calls with ; 与分开通话;
<input type="text" onMouseover= "function1(); function2();">
Mouse over me!
</input>
Dedicated wrapper function 专用包装器功能
<input type="text" onMouseover="dedicatedFunction()">
Mouse over me!
</input>
and define this function in a <script> tag: 并在<script>标签中定义此函数：
function dedicatedFunction() {
function1()
function2()
}
Imperatively 势在必行
As Xufox said, you can also use addEventListener to do this: 正如Xufox所说，您还可以使用addEventListener来做到这一点：
This means that you have access to your DOM node directly as a Javascript object, by using a DOM Selector: 这意味着您可以使用DOM选择器直接作为Javascript对象访问DOM节点：
var node = document.getElementById('yourObjectId')
or directly by creating the DOM node via Javascript: 或直接通过Javascript创建DOM节点：
var node = document.createElement('input')
You can then use addEventListener on your object: 然后可以在对象上使用addEventListener ：
node.addEventListener('mouseover', function1)
node.addEventListener('mouseover', function2)
Or even directly use anonymous functions 甚至直接使用匿名函数
node.addEventListener('mouseover', function () {
// ...
})
The benefits of this way is that you will be able to add event listeners any time you want. 这种方式的好处是您可以随时添加事件侦听器。 You will also be able to remove an eventListener any time you want by using removeEventListener 您还可以通过使用removeEventListener随时删除事件监听removeEventListener
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener
解决方案2
1 2015-08-20 10:40:11
you can write a function to multiple property 您可以将一个函数写入多个属性
<input type="text" onMouseover= "callme(this)">Mouse over
me!</span>
<script>
function callme(obj){
obj.style.color='red'
obj.style.otherproperty ='value'
.
..... somthing else
}
</script>
解决方案3
0 2015-08-20 10:39:46
No need of using Javascript events here just for changing the color and cursor style on hover of an element. 此处无需仅使用Javascript事件来更改元素悬停时的color和cursor样式。
You can use :hover class of CSS. 您可以使用CSS的:hover类。
span:hover { cursor: default; color: red; } /* Override */ #input { color: gray !important; }
<span> <input id="input" type="text" onMouseover= "this.style.color='red'">Mouse over me! </span>
解决方案4
0 2015-08-20 10:43:37
you can simply use ; 您可以简单地使用; to separate two events: 分开两个事件：
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover= "this.style.color='red';this.style.cursor='default';">Mouse over me!
</body>
</html>
But You'd better use <script> to write standard code: 但是您最好使用<script>编写标准代码：
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover="foo(this);">Mouse over me!
<script type="text/javascript">
function foo(ele) {
ele.style.color="red";
ele.style.cursor="default";
}
</script>
</body>
</html>
using addEventListener is the best way, but it may cause compatibility question among browsers, you can read it for reference: addeventlistener-vs-onclick 使用addEventListener是最好的方法，但可能会引起浏览器之间的兼容性问题，您可以阅读以供参考： addeventlistener-vs-onclick
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.