【java web】js 中函数引用 引发的一系列问题

问题描述：

这里想实现在 <li 标签上添加 事件 onmouseover （标签内文字变红色）onmouseout（标签内文字恢复白色）

起初想法是直接在标签中加

<script>
			function onMouse(i,index){
                if(i == "on"){
                    var a = document.getElementsByTagName("li");
                    a[index].style.color = "red";
                }else{
                    var a = document.getElementsByTagName("li");
                    a[index].style.color = "white";
                }
            }
</script>
<li onmouseover = "onMouse('on',1)" onmouseout = "onMouse('off',1)">
	<p>testWord</p>
</li>

为了简化步骤想通过js写个算法添加事件 于是遇到如下几个问题

问题1：html中函数 VS js中函数 括号的问题

<script>
	function testF(){
		alert("hello!");
	}
</script>
<button>按钮</button>

html

<button onclick = "testF()">按钮</button>
<! 此处 函数调用有括号>

理解：这里onclick = “testF()” 相当于 执行 onclick = eval("…")；
即把“”中的字符串转化成代码 再把代码返回值赋值给 onclick
可以理解成 function onclick(){ testF();}

js

<script>
	document.getElementsByTagName("button")[0].onclick = testF;
	//此处 函数调用无括号
</script>

理解：这里在 js 中把 函数的引用 赋值给元素的属性的onclick，
js中不执行，当触发onclick事件才执行函数。
注意 function(){} 也是引用，本质是 var temp = function(){};

总结：js无括号 标签中有括号

问题2：那么问题来了，如果想在 js 中传参怎么办？

实际遇到的传参情况如下：

<script>
            function loadF(){
                var ele = document.getElementsByTagName("li");
                for(i=1; i<ele.length; i++){
                    ele[i].onmouseover = function(i){onMouse("on",i);};
                    ele[i].onmouseout = function(i){onMouse("off",i);};
                }
                //参数 i 实际上是用于改变多个<li>标签属性
                
            }
            function onMouse(i,index){
                if(i == "on"){
                    var a = document.getElementsByTagName("li");
                    a[index].style.color = "red";
                }else{
                    var a = document.getElementsByTagName("li");
                    a[index].style.color = "white";
                }
            }
  </script>

仔细想想也就这一种参数情况，参数情况待补充
解决：

				function loadF(){
                var ele = document.getElementsByTagName("li");
                for(i=1; i<ele.length; i++){
                    ele[i].onmouseover = function(){this.style.color = "red";};
                    ele[i].onmouseout = function(){this.style.color = "white"};
                    // 解释不出 这个this 应该是代指当前元素
                }