新手请教：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都已试过。效果一样。谢谢！

...全文

180 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 方法的第二个参数需要的是一个函数。

圭宁的小小前端 2017-01-18