Question

我有2个按钮（1个提交和1个重置）。我想触发以下事件：onmousedown，onmouseup，onmouseover和onmouseout。我测试了我的代码，但它无法正常工作：/。你介意帮我解决一下吗？的 HTML：

<div class="buttonwrap">
    <div id="eventlisten1">
        <input type="submit" value="Submit" name="submit" />
    </div>
    <div class="eventlisten2">
        <input type="reset" value="Reset" name="reset" />
    </div>
</div>

使用Javascript：

function mDown(obj) {
    obj.value = "Submitted!"
}

function mUp(obj) {
    obj.value = "Thank you!"
}

function mOver(obj) {
    obj.style.backgroundColor = "blue";
}

function mOut(obj) {
    obj.style.backgroundColor = "yellow";
}

function eListeners() {
    var eventlisten1 = document.getElementByClassName('eventlisten1');
    var eventlisten2 = document.getElementByClassName('eventlisten2');
    eventlisten1.addEventListener('mousedown', mDown, false);
    eventlisten1.addEventListener('mouseup', mUp, false);
    eventlisten2.addEventListener('mouseover', mOver, false);
    eventlisten2.addEventListener('mouseout', mOut, false);
}

window.onload = eListeners();

CSS （对于某些样式）：

.buttonwrap {
    position:absolute;
    z-index:0;
    width:200px;
    background:#ccc;
}
input[type=submit] {
    padding:10px;
    margin:10px 0px 0px -1px;
    width:90px;
    background-color:#00ff00;
    float:left;
    border-radius:5px;
}
input[type=reset] {
    padding:10px;
    margin:10px 0px 0px 15px;
    width:90px;
    background-color:red;
    float:left;
    border-radius:5px;
}

这是一个小提琴：http://jsfiddle.net/mf2xD/2/ 我会代表那些帮助我的好人:) 谢谢！

Answer 1

嗯，首先，当元素甚至没有类时，你正在使用getElementByClassName()：

var eventlisten1 = document.getElementByClassName('eventlisten1'); // This one has no class
var eventlisten2 = document.getElementByClassName('eventlisten2');

第二个问题是拼写错误。如果你是根据课程提取的，getElement应该是复数。

试试这个：

var elTwo = document.getElementsByClassName('eventlisten2')[0];

上面应该返回第一个匹配的元素eventlisten2。

第三个问题是没有obj参数传递给您的回调。你需要引用this所以你的听众应该是这样的：

function mDown() {
    this.value = "Submitted!";
}

但是，this.value实际上不起作用，因为this引用了div元素（它是您将处理程序附加到的元素）。

解决这个问题的三种方法：

将处理程序附加到输入元素而不是div。
调用处理程序后获取输入元素。
在设置处理程序之前获取输入元素，并将元素作为a传递处理程序的参数。

FIDDLE

Answer 2

window.onload = eListeners();

应该是

window.onload = eListeners;

你需要让“onload”处理程序成为函数本身，而不是调用函数的结果。

现在，就是说，您的问题涉及触发事件。您获得的代码只是建立了事件处理程序。

如何通过javascript触发事件监听器

2 个答案: