Question

<html>
<head>
<title>FML</title>

<script type="text/javascript">

function function1(e, div) {
div.innerHTML="this works"
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX
div.addEventListener("mousemove", function(){test(event, this)}, true);
}

function test(e, div) {
div.innerHTML+='<br/>so does this'
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY
}

</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
<span id="myspan2">&nbsp;</span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">
</body>
</html>

点击蓝色div。

我想添加事件鼠标悬停，让它执行test（） - 应包含以下参数的函数：this，event

当调用函数test（e，div）时，我在firefox和IE中不断出现“事件未定义”错误，但具有讽刺意味的是它在Chrome和Safari中完美运行。

我可以通过addEventListener添加event参数吗？我可以在chrome和safari中使用window.event，但这是我想要的确切设置。我已经谷歌搜索和试用/错误一段时间了，没有成功...所以FML：/任何提示/提示/ ...除了拍摄自己的头部？

我知道jquery可能会解决所有这些问题，但我想在迁移到jQuery之前精通javascript。或者我应该迁移吗？

谢谢，欢呼，第

Answer 1

div.addEventListener("mousemove", function(){test(event, this)}, true);

嗯，当然你得到“事件未定义”！当mousemove事件触发时，将调用您的事件处理程序：

function(){test(event, this)}

有两种方法可以访问事件信息对象。它可以作为参数传递给事件处理程序，也可以在window.event中找到。

假设第二种情况成立。由于函数中没有名为event的局部变量，function1中没有调用它的变量，浏览器会查看全局对象中是否定义了event。在JavaScript中，全局对象称为window，因此您的函数被解释为

function(){test(window.event, this)}

它有效。

但是，正如我之前提到的，在某些浏览器中，事件信息在参数中传递。所以你的事件处理程序可能看起来像这样：

function(event){test(event, this)}

否则传递给event的{{1}}将是未定义的。因此，这是如何制作跨浏览器处理程序：

test()

第二个问题是function(event) { if (!event) // i.e. the argument is undefined or null event = window.event; test(event, this); }在旧的IE中不起作用（尽管在IE9中也是如此）。对于较旧的IE，您必须使用名为addEventListener()的类似函数。或者，如果您只附加一个处理程序，则可以通过简单的方式执行此操作

attachEvent()

Answer 2

在Firefox等浏览器中，事件必须作为参数传递，因此您必须替换此代码

div.addEventListener("mousemove", function(){test(event, this)}, true);

用这个

div.addEventListener("mousemove", function(event){test(event, this)}, true);

仔细比较两行代码并注意作为添加到第二行的函数的参数传递的 event 属性。

必须使用旧版IE attachEvent();

div.attachEvent("onclick", function(event){test(event, this)});

请注意， attachEvent 已在现代标准js中替换为 addEventListener ，现在几乎所有现代浏览器都支持。

下面 http://caniuse.com/#feat=addeventlistener 可以看到兼容性表。

使用addEventListener在函数中添加事件作为参数（在FF / IE中不起作用）。使用Javascript

2 个答案: