按钮的颜色，具有公共对象实例的事件侦听器

The color of a button, event listeners with a common object instance

本文关键字：实例 事件 侦听器 公共对象 颜色 按钮      更新时间：2023-09-26

我试图添加类似于CSS伪类的功能；"活动"；，但是使用普通的JavaScript。我试图在按下按钮时更改按钮的颜色，然后在释放按钮时恢复原始颜色。这是我的：

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);
...
btnEvent = function (e) {
    var storedColor;
    if (e.type == 'mousedown') {
        storedColor= e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = storedColor;
    };
};

这不起作用，在mouseup上，storedColor是未定义的。我想这是因为同一个函数对象没有共享，而是创建了两个？如何做到这一点？连接到同一元素的两个或多个事件侦听器是否可以共享一个公共目标对象(函数(，该对象可以在调用之间保持数据？

您的变量不起作用，因为storedColor是局部变量，每次调用btnEvent函数时都会创建它。

您可以将颜色存储在btnEvent函数中，因为函数是JavaScript中的对象。

演示：http://jsfiddle.net/LQSe4/

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        btnEvent['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = btnEvent['storedColor'];
    };
};
myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

或者您可以将原始颜色存储在DOM元素中(Demo:http://jsfiddle.net/rk33f/)：

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        e.target['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = '#F00';
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = e.target['storedColor'];
    };
};
var myButton = document.getElementById('btn');
myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);​

在这种情况下，如果它是特定于元素的，那么最好将颜色存储在元素本身：

btnEvent = function (e) {
    var elm = e.target,
        color;
    if (e.type == 'mousedown') {
        elm.setAttribute("data-storedColor", e.target.style.backgroundColor);
        elm.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        color = elm.getAttribute("data-storedColor"):
        if (color) {
            elm.style.backgroundColor = color;
            elm.removeAttribute("data-storedColor");
        }
    };
};

在那里，我们将颜色存储在data-*属性上。您也可以只使用"expando"属性(您分配给元素的一个特殊属性，例如elm.mySpecialProperty = ...(，但expando通常不是最佳实践。

旁注：

  • 除非您在某个地方声明btnEvent变量，否则您将成为隐式全局变量的恐怖的牺牲品。要么在它前面放一个var，要么更好的是，让它成为一个函数声明，而不是一个表达式：

    function btnEvent(e) {
    // ...implementation...
}

  • addEventListener有第三个参数，您可能应该提供它。我似乎记得有些浏览器对此很挑剔(尽管任何现代浏览器都可能不是(。(您需要值false。(

相关文章：