使用 addEventListener 在函数内添加事件作为参数(在 Firefox/IE 中不起作用) [英] Adding event as parameter within function, using addEventListener (Doesn't work in Firefox/IE)
问题描述
<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"> </span>
<span id="myspan2"> </span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;" onclick="function1(event, this)">
</body>
</html>
点击蓝色的 div.
我想添加事件mouseover，让它执行test()-function，它应该包含以下参数:this, event
I want to add the event mouseover, have it execute the test()-function which should contain following parameters: this, event
当函数 test(e, div) 被调用时，我不断收到事件未定义"；Firefox 和 IE 中的错误，尽管具有讽刺意味的是它在 Chrome 和 Safari 中运行良好.
When the function test(e, div) is called I keep getting an "event is undefined" error in Firefox and IE, although ironically enough it works perfectly in Chrome and Safari.
有什么办法可以使用 addEventListener 添加事件参数?我可以让它在 Chrome 和 Safari 中与 window.event 一起使用，但这是我想要的确切设置.我一直在谷歌搜索和尝试/错误一段时间，但没有成功......所以FML:/任何提示/提示/......除了向自己开枪外?
Any way I can add the event parameter by using addEventListener? I can get it to work with window.event in Chrome and Safari, but this is the exact setup that I want. I've been googling and trial/erroring for a while now, without success... so FML :/ Any tips/hints/... besides shooting myself in the head?
我知道 jQuery 可能会解决所有这些问题，但我想在迁移到 jQuery 之前精通 Javascript.还是我应该迁移?
I know jQuery would probably solve all this, but I want to be proficient in Javascript before migrating to jQuery. Or should I migrate anyway?
推荐答案
div.addEventListener("mousemove", function(){test(event, this)}, true);
好吧，当然你会得到事件未定义"！当 mousemove 事件触发时，您的事件处理程序被调用:
Well, of course you get "event is undefined" ! When the mousemove event triggers, your event handler is called:
function(){test(event, this)}
有两种方法可以到达事件信息对象.它要么作为参数传递给事件处理程序，要么可以在 window.event 中找到.
There are two ways to reach the event information object. Either it is passed to the event handler as an argument, or it can be found in window.event.
假设第二种情况成立.由于您的函数中没有名为 event 的局部变量，function1 中也没有调用它的变量，因此浏览器会查看是否存在 eventcode> 定义在全局对象中.在 JavaScript 中，全局对象被称为 window，所以你的函数被解释为
Suppose the second case holds. As there is no local variable named event in your function, nor is there such variable in function1 that calls it, the browser looks if there is an event defined in the global object. In JavaScript, the global object is called window, so your function is interpreted as
function(){test(window.event, this)}
它有效.
但是，正如我之前提到的，在某些浏览器中，事件信息是在参数中传递的.因此，您的事件处理程序可能希望如下所示:
However, as I noted before, in some browsers, the event information is passed in the argument. So your event handler probably wanted to look like this:
function(event){test(event, this)}
否则传递给 test() 的 event 将是未定义的.所以，这就是如何制作跨浏览器处理程序:
otherwise the event passed to test() would be undefined. So, this is how to make a cross-browser handler:
function(event) {
if (!event) // i.e. the argument is undefined or null
event = window.event;
test(event, this);
}
第二个问题是 addEventListener() 在旧版 IE 中不起作用(但在 IE9 中起作用).对于较旧的 IE，您必须使用名为 attachEvent() 的类似函数.或者，如果你只附加一个处理程序，你可以用简单的方法来完成
The second problem is that addEventListener() doesn't work in older IEs (it does in IE9, though). For older IEs, you have to use a similar function called attachEvent(). Or, if you only attach one handler, you can do it the simple way
div.onmousemove = function() {...};
这篇关于使用 addEventListener 在函数内添加事件作为参数(在 Firefox/IE 中不起作用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
