Pas*_*tor 8 javascript-events addeventlistener
<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() - 函数,该函数应该包含以下参数:this,event
当调用函数test(e,div)时,我不断在firefox和IE中遇到"event is undefined"错误,虽然具有讽刺意味的是它在Chrome和Safari中完美运行.
我可以通过addEventListener添加事件参数的任何方式吗？我可以在chrome和safari中使用window.event,但这是我想要的确切设置.我已经谷歌搜索和试用/错误一段时间了,没有成功...所以FML:/任何提示/提示/ ...除了拍摄自己的头部？
我知道jquery可能会解决所有这些问题,但我想在迁移到jQuery之前精通javascript.或者我应该迁移吗？
谢谢和欢呼,p.
Imp*_*Imp 13
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传递给test()将是未定义的.所以,这是如何制作跨浏览器处理程序:
function(event) {
if (!event) // i.e. the argument is undefined or null
event = window.event;
test(event, this);
}
第二个问题是addEventListener()在旧IE中不起作用(尽管在IE9中也是如此).对于较旧的IE,您必须使用名为的类似函数attachEvent().或者,如果您只附加一个处理程序,则可以通过简单的方式完成
div.onmousemove = function() {...};
| 归档时间： |
|
| 查看次数： |
11703 次 |
| 最近记录： |