JavaScript - 在不使用 :hover 的情况下为多个元素设置 onmouseover答案

【问题标题】：JavaScript - Set onmouseover for multiple elements without using :hoverJavaScript - 在不使用 :hover 的情况下为多个元素设置 onmouseover
【发布时间】：2013-02-09 10:40:10
【问题描述】：

有什么方法可以通过不使用 :hover 并且不在所有元素中添加“onmouseover 和 onmouseout”来做到这一点，就像在脚本中为所有输入元素设置 onmouseover 和 onmouseout 的有效方法一样。

注意：请先尝试 JavaScript，然后再尝试使用 JQuery

<head>

    <title>123</title>

    <style>

    .button {
    color: red;
    }

    .button:hover {
    color: blue;
    }

    </style>

</head>

<body>

    <div>

        <input class="button" type="button" value="1">

        <input class="button" type="button" value="2">

        <input class="button" type="button" value="3">

    </div>

</body>

【问题讨论】：

标签： javascript events hover

【解决方案1】：

遍历所有带有input标签的元素

a=document.getElementsByTagName('input')
for (i in a){
   a[i].onmouseover=function(){/* code goes here */}
   a[i].onmouseout=function(){/* code goes here */}
}

使用 jQuery：

$('input').on('mouseover',function(){/* code goes here */}).on('mouseout',function(){/* code goes here */})

【讨论】：

是的，但是如果我想通过 doin 设置颜色：this.style.color = "red" 我该如何定义这个？
您可能需要仔细检查您的 for 循环。你真的应该使用传统的 for 循环而不是 for..in，但甚至忽略你没有在循环中使用 I...
@Murplyx：用该代码替换匿名函数（code goes here）部分中的注释块

【解决方案2】：

我不建议这样做，但您可以尝试将 mouseover 的事件处理程序放在 body 元素上，然后使用 event.target / event.srcElement 来确定您是否要处理该事件

document.body.addEventListener("mouseover",function(e) {
    e = e || window.event;

    var targetElem = e.target || e.srcElement;

    // you can use a switch on the nodeName and handle event
    switch(targetElem.nodeName) {
        case 'INPUT':
            // do something
        break;
    }
},false);

示例 JS Fiddle（背景颜色更改）http://jsfiddle.net/Rcgx5/

【讨论】：

【解决方案3】：

你可以试试这个

window.onload=function(){
    document.onmouseover=function(e){
        var e = e || window.event, el = e.target || el.srcElement;
        if(el.type == 'button') el.style.color='red';
    };

    document.onmouseout=function(e){
        var e = e || window.event, el = e.target || el.srcElement;
        if(el.type == 'button') el.style.color='black';
    };
};

DEMO.

【讨论】：