（3）document对象续

最新推荐文章于 2021-03-12 08:43:25 发布

qq_21380373

最新推荐文章于 2021-03-12 08:43:25 发布

阅读量286

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_21380373/article/details/39646139

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（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来获取事件源控件
        //--------------------------------------------------------------------------------------------------
        //οnclick="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 οnlοad="btn5Event()">

<input type="button" value="btn1" οnclick="btnClick1()"/>
<input type="button" value="btn2" οnclick="btnClick2(this)"/>
<input type="button" value="btn3" οnclick="btnClick3(this.value)"/>
<input type="button" value="btn4" οnclick="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"  οnclick="setbgcolor()"/>
<!-- 单独修改制定属性的样式 注意js和css的区别-->
<input type="button" οnclick="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 οnlοad="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 οnlοad="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 οnlοad="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 οnlοad="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 οnlοad="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 οnlοad="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>