新手请教:addEventListenter的问题

lee110 2017-01-18 04:20:16

<script type="text/javascript">
function changeColor(obj,color){
obj.bgColor = color;
}
window.onload = function(){
var trid = document.getElementById("trid");
trid.addEventListener("mousemove",changeColor(trid,"white"),false);
trid.addEventListener("mouseout",changeColor(trid,"#f4f4f4"),false);

}

</script>
</head>
<body>
<table border="1" cellpadding="9" cellspacing="1" bgcolor="#f4f4f4">
<tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'#f4f4f4')">
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr id="trid">
<td>001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr id="trid1">
<td>002</td>
<td>李四</td>
<td>男</td>
</tr>

原打算是鼠标移动到第2行时,背景变成白色,但当网页显示后,鼠标还没 移动到第2行就已经变成白色背景。请问这是为什么?ie firefox都已试过。效果一样。谢谢!
...全文
148 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
forwardNow 2017-01-18
  • 打赏
  • 举报
回复

function changeColor(obj,color){
    obj.bgColor = color;
}

window.onload = function(){
    var trid = document.getElementById("trid");
    trid.addEventListener("mousemove",changeColor(trid,"white"),false);
    trid.addEventListener("mouseout",changeColor(trid,"#f4f4f4"),false);
}




1. DOM2 的事件注册方式 addEventListener

   elt.addEventListener( 事件类型, 事件处理函数, 是否捕获 )

2. 分析 trid.addEventListener("mousemove",changeColor(trid,"white"),false);

    2.1 页面载入完毕,执行通过DOM1方式在window对象上对load事件类型注册的事件处理程序

        function(){
            var trid = document.getElementById("trid");
            trid.addEventListener("mousemove",changeColor(trid,"white"),false);
            trid.addEventListener("mouseout",changeColor(trid,"#f4f4f4"),false);
        }

    2.2 执行 trid.addEventListener("mousemove",changeColor(trid,"white"),false);

        2.2.1 执行表达式

              1)trid => trid(HTMLElement)
              2)"mousemove" => "mousemove"
              3)changeColor(trid,"white") => undefined(函数已经执行,返回值为undefined)
              4)false => false

        2.2.2 表达式执行完毕

              trid.addEventListener("mousemove", undefined, false );


3. 综上所诉,你应该改成这样

    trid.addEventListener("mousemove", function () {
        changeColor(trid,"white")
    } ,false); 

    因为 addEventListener 方法的第二个参数需要的是一个函数。


  • 打赏
  • 举报
回复
第一:你第一行也加了事件。 第二:mouseover改成mouseenter搭配mouseleave
天际的海浪 2017-01-18
  • 打赏
  • 举报
回复
trid.addEventListener("mousemove",function(){ changeColor(trid,"white") },false);

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧