我是一个菜鸟，我只是在努力，2021正视自己，面对2021！

记录我的旅程5之JavaScript Dom学习笔记

      下面我们接着旅程4继续我们的JavaScript Dom征程5，这篇博文主要讲的是事件冒泡还有Dom修改元素的样式，所以这篇博文里面有很多举例说明，如：网页的开关灯效果，文本框的变色效果，还有就是评分控件的实现，而且这些在网页中用法都是非常普遍的。

  1. JavaScript中的事件冒泡

(1) 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件被触发，B的onclick也会触发，触发的顺序是”由内到外”。验证：在页面上添加table,table里面有tr,tr里面有td,td里面放一个p,在p,td,tr,table中添加onclick事件响应。

<body onclick="alert('body onclick')">

    <table onclick="alert('table onclick')">

        <tr onclick="alert('tr onclick')">

            <td onclick="alert('td onclick')">

                <p onclick="alert('p onclick')">点击</p>

            </td>

        </tr>

    </table>

</body>

(2) 其它

 1) 事件中的this，除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件，只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数总不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听的这个事件，event.srcElement是引发事件的对象；事件冒泡。

    <script type="text/javascript">

        function btnClick2() {

            alert(this.value); //在事件响应函数调用的函数里就不能通过this来获得事件对象

        }

        function btnClick3(btn) {

            alert(btn.value); //在事件响应函数中将this传过来即可

        }

        function btnClick4() {

            alert(event.srcElement.value);

        }

    </script>

<input type="button" value="click" onclick="alert(event.srcElement.value)" />

<input type="button" value="click1" onclick="alert(this.value)" />

<input type="button" value="click2" onclick="btnClick2()" />

<input type="button" value="click3" onclick="btnClick3(this)" />

<input type="button" value="click4" onclick="btnClick4()" />

 2) 易错：修改元素的样式不是设置class属性，而是className属性

    <style type="text/css">

        .day{

            background-color:Green;

        }

        .night{

            background-color:Black;

        }

    </style>

<div class="day" id="divTest">

    <font color="red">韩迎龙</font>

</div>

<input type="button" value="切换" onclick="document.getElementById('divTest').className='night';" />

 3) 例子：实现网页开关灯效果
  (1) CSS样式引用上一个案例即可，其余代码如下：

      <script type="text/javascript">

       (document.body.className == "day") {

                document.body.className = "night";

                b function switchLight() {

            var btnSwitch = document.getElementById("btnSwitch");

            if tnSwitch.value = "开灯";

            }

            else {

                document.body.className = "day";

                btnSwitch.value = "关灯";

            }

        }

    </script>

<body class="night">

    <input type="button" id="btnSwitch" value="开灯" onclick="switchLight()" />

</body>

(3) 易错：单独修改样式的属性使用“style.属性名”，注意在CSS中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有“—”的属性，因为JavaScript中“—”是不能做属性，类名的。所以CSS中背景颜色是BackGround-Color，而JavaScript中则是style.background；元素样式名为class,在javascript中是className属性，font-size—>style.fontsize;margin-top—>style.marginTop。

   <input type="button" value="点击" onclick="this.style.background='Red'" />

  1. 案例学习

(1) 案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景颜色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。

注释:    <input type="text" onblur="alert('第一个失去焦点')" />

           <input type="text" onfocus="alert('第二个获得焦点')" />

代码:    <script type="text/javascript">

        function initEvent() {  //遍历所有的input控件，添加

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                input.onblur = inputOnBlur;//设置inputOnBlur函数为input元素的onblur事件的响应函数

            }

        }

        function inputOnBlur() { //焦点失去的时候进行数据检查

            //inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件的对象

            if (this.value.length <= 0) { //检查文本框中文字的长度，如果c<=0就说明是空的

                this.style.background = "red";

            }

            else {

                this.style.background = "white";

            }

        }

    </script>

<body onload="initEvent()">

    <input type="text" /><br />

    <input type="text" /><br />

    <input type="text" />

</body>

(2) 案例2：评分控件，用一个单行5列的table的评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色，鼠标在评分控件上的时候显示超链接形式的鼠标图标，演示：Jquery 版本。

    <script type="text/javascript">

        function IndexOf(arr, element) { //alert(indexOf([1,5,3],3));

            for (var i = 0; i < arr.length; i++) {

                if (arr[i] == element) {

                    return i;

                }

            }

            return -1;

        }

        function initEvent() { //给所有的td增加onclick事件

            var tableRating = document.getElementById("tableRating");

            var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有的Id

            for (var i = 0; i < tds.length; i++) {

                var td = tds[i];

                td.onclick = TdOnClick;

                td.style.cursor = "pointer";  //让鼠标放到td上显示手形状的光标

            }

        }

        function TdOnClick() {

            var tableRating = document.getElementById("tableRating");

            var tds = tableRating.getElementsByTagName("td");

            var index = IndexOf(tds, this);

            for (var i = 0; i <= index; i++) {

                var td = tds[i];

                td.style.background = "red";

            }

            for (var i = index + 1; i < tds.length; i++) {

                var td = tds[i];

                td.style.background = "white";

            }

        }

    </script>

</head>

<body onload="initEvent()">

    <table id="tableRating">

        <tr>

            <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>

        </tr>

    </table>

</body>

(3) 练习1：超链接的单选效果，页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其它超链接背景还原为白色，window.event.returnValue=false。

    <script type="text/javascript">

        function initEvent() {

            var links = document.getElementsByTagName("a");

            for (var i = 0; i < links.length; i++) {

                var link = links[i];

                link.onclick = LinkOnClick;

            }

        }

        function LinkOnClick() {

            var links = document.getElementsByTagName("a");

            //不要把links放到全局变量中，尽量不要用全局变量，如果重复性的代码太多了，将代码放到一个公共函数中

            for (var i = 0; i < links.length; i++) {

                var link = links[i];

                if (link == this) {

                    link.style.background = "red";

                }

                else {

                    link.style.background = "white";

                }

                window.event.returnValue = false; //阻止打开超链接

            }

        }

    </script>

<body onload="initEvent()">

    <a href="http://www.baidu.com">百度</a>

    <a href="http://www.cnblogs.com">博客园</a>

    <a href="http://www.sina.com">新浪</a>

</body>

(4) 练习2：点击按钮，表格隔行变色，偶数行为黄色背景，奇数行为默认颜色，通过Table的getElementByTagName取得所有的tr，以次遍历，如果是偶数行就变色

    <script type="text/javascript">

        function ShowIt() {

            var tableMain = document.getElementById("tableMain");

            var tds = tableMain.getElementsByTagName("tr");

            for (var i = 0; i < tds.length; i++) {

                if (i % 2 != 0) {

                    var tr = tds[i];

                    tr.style.background = "yellow";

                }

            }

        }

    </script>

<body onload="ShowIt()">

    <table id="tableMain">

        <tr><td>喜欢</td><td>100</td></tr>

        <tr><td>讨厌</td><td>10</td></tr>

        <tr><td>宿舍</td><td>100</td></tr>

        <tr><td>韩迎龙</td><td>200</td></tr>

        <tr><td>博客园</td><td>300</td></tr>

    </table>

    <input type="button" value="隔行变色" onclick="ShowIt()" />

</body>

 

posted @ 2012-07-09 23:51  Kencery  阅读(606)  评论(0)  编辑  收藏  举报
友情链接：初心商城