obj.onmouseover=function(){}和obj.onmouseover=change() 的區別
我在回答http://www.xianlaiwan.cn/code/1636的時候,碰到一個問題
在下面的自定義函數bgchange中,如果我調用change函數,則默認給出的前倆行的背景顏色不會改變,而自己添加的背景顏色可以改變;
如果我在后邊直接function(){function body},則都可以改變,不知道這是為什么?
求解答!
<!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>?? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>??? ??<script?type="text/javascript">? //????????function?mouseEvent(){ //????????????var?trs=?document.getElementsByTagName("tr"); //????????????for?(var?i=0;i<trs.length;i++){ //????????????????trs[i].setAttribute("onmouseover","change(this)"); //????????????????trs[i].setAttribute("onmouseout","back(this)"); //????????????????} //???????????? // ???????} ????????function?change(ev){ ????????????ev.style.backgroundColor="#f2f2f2"; ????????????} ????????function?back(ev){ ????????????ev.style.backgroundColor="#fff"; ????????????} ????????function?removeEvent(){ ????????????var?as=?document.getElementsByTagName("a"); ????????????for?(var?i=0;i<as.length;i++){ ????????????????as[i].setAttribute("onclick","deleteraw(this)"); ????????????} ????????}?? ?????? ?????? ??????function?bgchange(obj){ ??????????#這里為什么=change(obj)不可以,而=function(){}就可以? ??????????obj.onmouseover?=?change(obj);//function(){??????????????obj.style.backgroundColor="#f2f2f2";??????????}; ??????????obj.onmouseout?=?back(obj);???//function(){??????????????obj.style.backgroundColor="#fff"??????????}; ??????} ?????? ??????window.onload?=?function(){ ?????????????????? ?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。 ????????????//mouseEvent(); ????????????removeEvent(); ???????????var?trs=document.getElementsByTagName("tr"); ???????????for(var?i=0;i<trs.length;i++){ ??????????????bgchange(trs[i]); ??????????}? ?????????? ?????????? ?} ????? ??????//?編寫一個函數,供添加按鈕調用,動態在表格的最后一行添加子節點; ?????function?add(){ ????????????var?table=document.getElementById("table"); ????????????var?newtr=document.createElement("tr"); ????????????newtr.setAttribute("onmouseover","change(this)"); ????????????newtr.setAttribute("onmouseout","back(this)"); ????????????var?newtd1=document.createElement("td"); ????????????var?newtd2=document.createElement("td"); ????????? ????????????var?newtd3=document.createElement("td"); ????????????newtd1.innerHTML="XX"; ????????????newtd2.innerHTML="YY"; ????????????var?newa=document.createElement("a"); ????????????newa.href="javascript:;" ????????????newa.setAttribute("onclick","deleteraw(this)"); ????????????newa.innerHTML="刪除"; ????????????table.appendChild(newtr); ????????????newtr.appendChild(newtd1); ????????????newtr.appendChild(newtd2); ????????????newtr.appendChild(newtd3); ????????????newtd3.appendChild(newa); ????????????} ???? ??? ? ?????//?創建刪除函數 ?????function?deleteraw(ev){ ?????????var?pa?=ev.parentNode.parentNode.parentNode; ????????? ?????????pa.removeChild(ev.parentNode.parentNode); ?????} ??</script>? ?</head>? ?<body>? ???<table?border="1"?width="50%"?id="table"> ???<tr> <th>學號</th> <th>姓名</th> <th>操作</th> ???</tr>?? ???<tr> <td>xh001</td> <td>王小明</td> <td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??--> ???</tr> ???<tr> <td>xh002</td> <td>劉小芳</td> <td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??--> ???</tr>?? ???</table> ???<input?type="button"?value="添加一行"??onclick="add()"/>???<!--在添加按鈕上添加點擊事件??--> ?</body> </html>
2016-03-25
前面的同學看來并沒有認真看問題啊,答非所問。
這里我發表一下我的看法。
先拋出答案:obj.onmouseover=function(){};是固定用法。
這里我先解釋一下obj.onmouseover=change();為什么一定不可以。我們先假設這句代碼成立,那么此時obj.onmouseover就被賦予了change()函數的返回值?,F在看看你的change()函數有return語句嗎?顯然沒有吧?那obj.onmouseover的值是什么呢?ㄟ( ▔, ▔ )ㄏ ?鬼知道。
然后我們來看下為什么說加粗的那句代碼是固定用法呢?首先你得明白對象有屬性和方法。
比如:
那么obj是一個元素節點,也是一個對象。那么onmouseover事件的觸發總要進行一些操作吧?那么對象的屬性和方法那個能進行一些操作呢?那就是方法啦。
所以onmouseover是obj的一個方法,定義的方法和showName類似。
2016-03-22
全局變量和局部變量的區別,你參數給了obj,把參數刪了 加一個for循環tr元素就可以了
2016-03-17
差不多,,看你的習慣了,function(){}是臨時的匿名函數,,只能在這個地方調用,,其他地方想調用還得重新定義!