                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /人人網評論功能

為什么加上window.onload = function (){}就不行了呢

為什么加上window.onload = function (){}就不行了呢

Thinker_Ac

2014-12-12

源自：人人網評論功能 3-4

關注問題我要回答

4578

操作

收起

1 回答

夢身
2015-08-03

這樣寫的時候可以，onload是加載整個頁面時調用函數，需要明確具體是那個元素觸發事件時才調用，而onclick=del(this)是每次單獨調用，this就代表自己，與別人無關。我是這樣理解的

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
????<style?type="text/css">
????????li{
????????????width:?100px;
????????????height:?20px;
????????????line-height:??20px;
????????????position:?relative;
????????????margin:?10px;
????????}
????????button?{
????????????position:?absolute;
????????????right:?3px;
????????????top:?1px;
????????????height:?20px;
????????????/*?隱藏深處按鈕?*/
????????????display:none;
????????????????????
????????}
????????li:hover?button?{
????????????/*?顯示刪除按鈕?*/
????????????display:block;
????????}
????</style>
????<script?type="text/javascript">
????????window.onload=function()
???????{
???????????var?li=document.getElementsByTagName('button');
???????????for(var?i=0;i<li.length;i++)
???????????{
???????????????li[i].onclick=function()
???????????????{
?????????????????var?p?=?this.parentNode;?????????????????
?????????????????p.parentNode.removeChild(p);?
???????????????};
???????????}
???????}
????????
????</script>
</head>
<body>
<ul>
????<li>內容1<button?>刪除</button></li>
????<li>內容2<button?>刪除</button></li>
????<li>內容3<button?>刪除</button></li>
????<li>內容4<button?>刪除</button></li>
????<li>內容5<button?>刪除</button></li>
</ul>
</body>
</html>