（3）document对象续

来源：互联网发布：出售淘宝店编辑：程序博客网时间：2024/05/12 14:49

（1.4）事件冒泡

假设元素a嵌套在元素b中，a被点击了不仅a的onclick事件会被触发，b的onclick事件也会被触发，执行顺序是由内而外执行。

（1.5）事件中的this关键字

例子：

</pre><pre name="code" class="csharp"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>事件冒泡与事件中的this关键字</title>    <script type="text/javascript">        //事件冒泡指的的：假设a元素嵌套在b元素中，那么a被点击触发a的onclick事件也触发b的onclick事件，触发顺序a->b。        //this指的是当前对象。函数中的this指的是当前函数对象，标签中的this指的是当前标签对象。        //可以通过this传递来获取引发事件触发的控件        //也可以通过event.srcElement来获取事件源控件        //--------------------------------------------------------------------------------------------------        //onclick="btnClick1()"是普通函数调用。这里表示onclick的处理函数是匿名函数fuction(){btnClick1();};函数的实现是调用外部window.btnClick1();匿名函数的是btn1的函数，btnClick1()是window的函数，this表示一种从属关系，函数与对象的关系。看破现象，直击本质。        function btnClick1() {            alert(this);        }        //btn2通过this传递btn2对象进来        function btnClick2(btn) {            alert(btn.value);        }        //btn3.value 通过this.value传递进来        function btnClick3(value) {            alert(value);        }        //使用event.srcElement来获取事件源元素        function btnClick4() {            alert(event.srcElement.value);        }        //动态给btn5.onclick的绑定处理函数btn5click        function btn5Event() {            var btn = document.getElementById("btn5");            btn.onclick = btn5click;        }        //使用this关键字，this指向btn5，原因相当于在btn5onclick事件直接写（绑定函数），而不是调用函数。        //调用函数的话 相当于        function btn5click() {            alert(this.value);        }    </script></head><body onload="btn5Event()"><input type="button" value="btn1" onclick="btnClick1()"/><input type="button" value="btn2" onclick="btnClick2(this)"/><input type="button" value="btn3" onclick="btnClick3(this.value)"/><input type="button" value="btn4" onclick="btnClick4()"/><input type="button" value="btn5" id="btn5" /></body></html>

（1.6）Dom修改样式

</pre><pre name="code" class="html"> <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>修改样式（js与css中样式属性名描述不一样）</title>    <script type="text/javascript">        //修改元素的样式是设置className属性        //css与js样式名称的不一致：注意css中属性名在js中操作的可能不一样。注意在那线属性名中函数-的属性。如background-color在js中是style.background。元素样式名是class在js中是className。font-size->style.fontSize;margin-top->marginTop        //单独修改样式的属性使用style.属性名。        //选择器前面html中已有描述，这么不再描述。        function setbgcolor() {            //样式名字要双引号....            document.getElementById("divTest").className = "night";        }    </script>    <style type="text/css">    .day    {    background-color:Green;    }    .night    {    background-color:White;    }    </style></head><body><div id="divTest" class="day">测试</div><input type="button"  onclick="setbgcolor()"/><!-- 单独修改制定属性的样式 注意js和css的区别--><input type="button" onclick="this.style.background='Green';" /></body></html>

用途：视频网上的开关灯效果。（body背景颜色的设置。）

示例一：给txt设置颜色

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>修改样式练习1,给txt设置颜色</title>    <script type="text/javascript">        function AddEvent() {        //元素数组 动态给txt添加事件            var txts = document.getElementsByTagName("input");            for (var i = 0; i < txts.length; i++) {                var txt = txts[i];                //这里可以使用this，相当于在标签中写事件。                txt.onblur = onblurSetColor;            }        }        function onblurSetColor() {            //天啊 注意length别拼错，浪费生命            //判断txt的值是否长度<=0来判断是否为空            if (this.value.length <= 0) {                this.style.background = "red";            }            else {                this.style.background = "green";            }        }    </script></head><body onload="AddEvent();">    <input type="text"  />    <input type="text"  />    <input type="text" /></body></html>

示例二：评分控件

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>设置评分控件</title>    <script type="text/javascript">        //给td添加监听事件        function setEvent() {            var tds = document.getElementsByTagName("td");            for (var i = 0; i < tds.length; i++) {                var td = tds[i];                //设定元素上面的鼠标显示图标                td.style.cursor = "pointer";                td.onclick = tdonclick;                td.style.background = "Aqua"            }        }        function tdonclick() {            //js没有indexof方法。jQuery有，这里要在自个写。            var tds = document.getElementsByTagName("td");            var thisindex = indexOf(tds, this);            for (var i = 0; i <= thisindex; i++) {                tds[i].style.color = "red";            }            for (var j = thisindex + 1; j < tds.length; j++) {                tds[j].style.color = "white";            }        }        //自定义取得td的index方法        function indexOf(arr, element) {            for (var i = 0; i < arr.length; i++) {                if (arr[i] == element) {                    return i;                }            }        }    </script></head><body onload="setEvent()">    <table>        <tbody><tr><td >☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></tbody>    </table></body></html>

示例三：表格隔行变色，通常用来设置表格的显示样式

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>表格隔行变色1(载入完成，设置默认颜色)</title>    <script type="text/javascript">    //表格经常使用        function setColor() {            var trs = document.getElementsByTagName("tr");            for (var i = 0; i < trs.length; i++) {                if (i % 2 == 0) {                    var tr = trs[i];                    tr.style.background = "Yellow";                }            }        }    </script></head><body onload="setColor();">    <table>        <tbody><tr><td>吞噬星空</td></tr><tr><td>天魔神谭</td></tr><tr><td>西游记</td></tr><tr><td>大话</td></tr><tr><td>宝莲灯</td></tr><tr><td>哪吒闹海</td></tr></tbody> </table></body></html>

示例四：表格行被点击则表色，可以用来设置行被点击的时候事件

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>表格颜色设置2（被点击的行尾黄色，其他为白色）</title>    <script type="text/javascript">        //应用：可以选择当前行触发事件，比如弹出一个文本框显示tr的信息。        //思路：        //（1）给每个行增加监听事件，通过组元素来动态添加事件        //（2）编写写事件的绑定处理函数        function initEvent() {            var trs = document.getElementsByTagName("tr");            for (var i = 0; i < trs.length; i++) {                var tr = trs[i];                tr.onclick = trOnClick;                //鼠标光标标签                tr.style.cursor = "pointer";            }        }        function trOnClick() {            var trs = document.getElementsByTagName("tr");            for (var i = 0; i < trs.length; i++) {                var tr = trs[i];                this.style.background = "Yellow";                if (tr != this) {                    tr.style.background = "White";                }            }        }    </script></head><body onload="initEvent();">     <table>        <tbody><tr><td>吞噬星空</td></tr><tr><td>天魔神谭</td></tr><tr><td>西游记</td></tr><tr><td>大话</td></tr><tr><td>宝莲灯</td></tr><tr><td>哪吒闹海</td></tr></tbody> </table></body></html>

示例五：获取焦点的文本框颜色设置

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>获取焦点的文本框颜色为黄色，其他为白色</title>    <script type="text/javascript">        function initEvent() {            var txts = document.getElementsByName("txt");            for (var i = 0; i < txts.length; i++) {                var txt = txts[i];                txt.onfocus = txtSetColor;            }            //方式二，可以bytag方式来取元素，再判断type，不过还是推荐用byname        }        function txtSetColor() {            var txts = document.getElementsByName("txt");            this.style.background = "Yellow";            for (var i = 0; i < txts.length; i++) {                if (txts[i] != this) {                    txts[i].style.background = "White";                }            }        }    </script></head><body onload="initEvent();">    <input type="text" name="txt" />    <br />    <input type="text" name="txt" />    <br />    <input type="text" name="txt" />    <br />    <input type="text" name="txt" />    <br />    <input type="text" name="txt" /></body></html>

示例六：改变超链接的背景颜色和阻止点击超链接的默认事件

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>改变超链接的背景颜色</title>    <script type="text/javascript">        //目的：点击一个超链接，被点击的超链接变为红色背景，其他超链接的背景还原为白色        //动态给a标签添加点击事件        function initEvent() {            var links = document.getElementsByTagName("a");            for (var i = 0; i < links.length; i++) {                //绑定事件                links[i].onclick = onclick;            }        }        //自定义点击事件，注意event.returnValue：是否取消的事件元素的默认动作（如表单提交，页面跳转）这里超链接指的是页面跳转，默认值是true，我们设置为false，他就不会执行默认页面跳转行为。        function onclick() {            this.style.background = "red";            //阻止跳转到超链接指定的地址。            window.event.returnValue = false;            var links = document.getElementsByTagName("a");            for (var i = 0; i < links.length; i++) {                if (links[i] != this) {                    links[i].style.background = "white";                }            }        }    </script></head><body onload="initEvent()">    <a href="http://www.baidu.com">百度</a>    <br />    <a href="http://www.sina.com">新浪</a>    <br />    <a href="http://www.qq.com">腾讯</a>    <br />    <a href="http://www.tudou.com">土豆</a></body></html>

0 0