首页 新闻 会员 周边

js中window.onload的使用

0
悬赏园豆:20 [已解决问题] 解决于 2016-10-14 15:55

直接贴代码:

<script type="text/javascript">
        //动态给js添加class属性
        function addClass(element, value) {
            if (!element.className) {
                element.className = value; //如果element本身不存在class,则直接添加class为value的值
            } else {
                element.className += " " + value; //如果element之前有一个class值,注意中间要多一个空格,然后再加上value的值
            }
        }
        //隔行换色
        function stripeTable() {
            var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
            for (var i = 0; i < tables.length; i++) {
                var rows = document.getElementsByTagName("tr");
                for (var j = 0; j < rows.length; j++) {
                    if (j % 2 == 0) {
                        addClass(rows[j], "tablelight"); //如是偶数行,则添加class为odd的属性
                        //rows[j].setAttribute("class", "odd");
                    }
                }
            }
        }
        //鼠标经过时高亮显示
        function highlightRows() {
            var rows = document.getElementsByTagName("tr");
            for (var i = 0; i < rows.length; i++) {
                rows[i].oldClassName = rows[i].className; //首先保存之前的class值
                rows[i].onmouseover = function () {
                    addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
                }
                rows[i].onmouseout = function () {
                    this.className = this.oldClassName; //鼠标离开时还原之前的class值
                }
            }
        }
        window.onload = function () {
            stripeTable();
            highlightRows();
        }
</script>

<asp:Panel ID="plItem" runat="server">
   <tr>
     <td>
      <a href="javascript:Edit('<%#Eval("id") %>')">编辑</a>
     <asp:LinkButton ID="lbtDelete" CommandName="Delete" CommandArgument='<%#Eval("id") %>' runat="server" OnClientClick="return confirm('确定删除吗?')">删除</asp:LinkButton>
      </td>
      <td>
        <asp:Label runat="server" ID="lblID" Text='<%#Eval("id") %>'></asp:Label></td>
         <td><%#Eval("name") %></td>
    <td><%#Eval("author") %></td>
        <td><%#Eval("ISBN") %></td>
       <td><%#Eval("publisher") %></td>
       <td><%#Eval("language") %></td>
      <td><%#Eval("price") %></td>
     <td><%#Eval("putin_time") %></td>
     <td><%#Eval("type") %></td>
       </tr>
</asp:Panel>

问题:

1、此例使用了window.onload,目前的理解是对stripeTable()和highlightRows()两个方法的监听,也就是当控件触发时执行。
但是此处的window.onload是对方法的监听,但是却不知道什么地方引用,进而触发这两个方法,不知道为什么会触发执行。
2、当在<tr>中添加自定义方法<tr onmouseout="mouseout()">,javascript中添加对应的方法function mouseout(){alert("鼠标移出");}后,
却根本不会触发新添加的方法。
于是将function mouseout()方法也放到window.onload方法中
        window.onload = function () {
            stripeTable();
            highlightRows();
            mouseout();
        }
结果只是在页面载入完成后执行一次,并不是鼠标移出数据行后弹出。

我有我奥妙的主页 我有我奥妙 | 初学一级 | 园豆:146
提问于:2016-10-14 14:19
< >
分享
最佳答案
0

 script标签中的代码加载下来就开始执行。你的script中先定义了两个function,接着执行window.onload(这个是为window的onload事件绑定响应函数,绑定的函数是在页面中内容都加载完之后执行的)。然后到页面加载完成之后,执行onload响应函数,然后就执行了stripeTable()和highlightRows()。

在<tr>中添加onmouseout,其实和rows[i].onmouseout = function () {
                    this.className = this.oldClassName; //鼠标离开时还原之前的class值
                }是一样的,都是给tr的onmouseout事件添加响应函数。现在你就添加了两次,js取后一个所以添加的mouseout函数没有用。你在onload中写的mouseout其实只是执行了一次mouseout函数,并不是绑定。

收获园豆:20
授之以渔 | 小虾三级 |园豆:1107 | 2016-10-14 15:23

首先,谢谢回复。

1、我就是不了解这种触发机制,只会简单的那种在<script>中写好的function,在控件里添加个事件(点击、移出等)来直接触发。

2、这个代码是从网上搜的,按照我的理解window.onload就是初始化函数,就在文档全部加载完成后执行一次,比如stripeTable()把表格隔行换色,然后既然只执行一次,后来的鼠标移出<tr>就不会触发highlightRows()函数。但是实际上还是触发了,所以我懵了。

3、看了您的回复之后的理解:

var rows = document.getElementsByTagName("tr");
            for (var i = 0; i < rows.length; i++)

{
                rows[i].oldClassName = rows[i].className; //首先保存之前的class值
                rows[i].onmouseover = function () {
                    addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
                }
                rows[i].onmouseout = function () {
                    this.className = this.oldClassName; //鼠标离开时还原之前的class值
                }
   }

这个函数会循环遍历表格,获取所有的<tr>,然后将<tr>都绑定两个函数onmouseout()和onmouseover()。进而 触发。

这样理解应该还有问题。

 

我有我奥妙 | 园豆:146 (初学一级) | 2016-10-14 15:50

@我有我奥妙: 理解的方向是对的。rows[i].onmouseover = function () {
                    addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
                }

这里是给<tr>的onmouseout和onmouseover两个事件绑定了两个匿名的函数。onmouseout和onmouseover不是函数。

授之以渔 | 园豆:1107 (小虾三级) | 2016-10-14 16:31

@授之以渔: 哦,对对对,onmouseout和onmouseover是触发事件。

我又写了个小页面:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />
<title>window.onload</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
  function a(){
    document.getElementById("bg").style.backgroundColor="#F90";
  }
  function b(){
    document.getElementById("bg").style.width="200px";
  }
  function c(){
     var btn= document.getElementById("btn");
     btn.oldClassName= btn.className;
     btn.onmousedown=function (){
     alert(this.oldClassName);
     }
  }
 
window.onload=function(){
  a();
  b();
  c();
}
</script>
</head>
<body>
  <div id="bg">
  <button id="btn" type="button" class="btnclass">测试
  </button>
  </div>
</body>
</html>

现在差不多理解了,多谢。

我有我奥妙 | 园豆:146 (初学一级) | 2016-10-14 16:39
其他回答(1)
1

隔行换色css就可以搞定啊。

绑定事件也不用循环一个个绑,用jquery选择器绑一次就可以啊

balahoho | 园豆:2050 (老鸟四级) | 2016-10-14 14:44

用不好,这个也是从网上搜的。虽然功能实现了,但是这个原理一点不懂,能解释下吗,可能以后还会碰到这个window.onload。

支持(0) 反对(0) 我有我奥妙 | 园豆:146 (初学一级) | 2016-10-14 15:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册