Javascript——为元素注册事件案例

最新推荐文章于 2023-03-16 15:57:10 发布

原创最新推荐文章于 2023-03-16 15:57:10 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文通过一系列实例，展示如何使用JavaScript为页面元素注册事件，包括点击按钮显示图片、调整图片大小、更改p标签内容、修改a标签属性、设置多个p标签文字、更新图片alt和title、修改文本框值、弹出对话框以及改变input的value属性等，深入理解DOM操作和事件处理。

例：为元素注册事件

    <input type="button" value="分离html" id="btn1"/>

先有按钮，才能获取，获取之后才能注册事件

    <script>
        //根据id属性的值从文档中获取元素
        var btnObj=document.getElementById("btn");
        //为当前的这个按钮（对象）注册点击事件，添加事件处理函数（匿名函数）。
        btnObj.onclick=function(){
            alert("哦");
        }
    </script>

以上也可简化成

    <script>
        document.getElementById("btn1").onclick=function(){
            alert("哦")
        }
    </script>

例：点击按钮显示图片并调整图片大小

    <input type="button" value="显示图片" id="btn"/>
    <img src="(图片路径略)" alt="" id="pic"/>
    <script>
        //点击按钮的时候设置img标签的src属性有一个图片的路径
        //根据id获取按钮
        var btnObj=document.getElementById("btn");
        //为按钮注册点击事件，添加事件处理函数
        btnObj.onclick=function(){
            //根据id获取图片的标签，设置图片的src值
            var imgObj=document.getElementById("pic");
            imgObj.src="(图片路径略)";
            imgObj.width="300";
            imgObj.height="200";
        }
    </script>

例：点击按钮修改p标签的显示内容

    <input type="button" value="设置p的内容" id="btn">
    <p id="p1">这是一个p</p>
    <script>
        //凡是成对的标签，中间的文本内容，设置的时候都使用innerText这个属性的方式
        //根据id获取按钮，为按钮注册点击事件，添加事件处理函数
        document.getElementById("btn").onclick=function(){
            //根据id获取p标签
            document.getElementById("p1").innerText="这是p标签";
        };
    </script>

例：点击按钮修改a标签的地址和热点文字

    <input type="button" value="显示效果" id="btn">
    <a href="http://www.baidu.com" id="changeWords">百度</a>
    <script>
        document.getElementById("btn").onclick=function(){
            //根据id获取超链接，设置href属性
            var aObj=document.getElementById("changeWords");
            aObj.href="http://www.youkuaiyun.com";
            aObj.innerText="优快云";
        };
    </script>

例：点击按钮设置多个p标签的文字内容

    <input type="button" value="显示效果" id="btn"/>
    <div id="dv1">
        <p>wxy大笨蛋</p>
        <p>wxy大笨蛋</p>
        <p>wxy大笨蛋</p>
        <p>wxy大笨蛋</p>
        <p>wxy大笨蛋</p>
        <p>wxy大笨蛋</p>
    </div>
    <div id="dv2">
        <p>wxy大傻逼</p>
        <p>wxy大傻逼</p>
        <p>wxy大傻逼</p>
        <p>wxy大傻逼</p>
    </div>
    <script>
        //document.getElementsByTagName("标签名");返回的是一个伪数组
        //无论获取的是一个标签还是多个标签，最终都是在数组中存储的，这行代码的返回值就是一个数组

        //根据id获取按钮，注册点击事件，添加事件处理函数
        document.getElementById("btn").onclick=function(){
            var pObj=document.getElementById("dv1").getElementsByTagName("p");            
            for(var i=0;i<pObj.length;i++){
                pObj[i].innerText="你说的对";
            }
        };
    </script>

例：点击按钮修改图片的alt和title属性

<input type="button" value="显示效果" id="btn">
<img src="假装有图片" alt="哈哈" title="嘿嘿">
<script>
    document.getElementsByTagName("btn").onclick=function(){
        //由于返回的是一个伪数组，索引应是0
        var imgObj=document.getElementsByTagName("img");
        imgObj[0].alt="改了";
        imgObj[0].title="显示";
    }
</script>

例：点击按钮修改多个文本框的值

    <input type="button" value="修改文本框的值" id="btn"></br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <script>
        //根据id获取按钮，为按钮注册点击事件，添加事件处理函数
        document.getElementById("btn").onclick=function(){
            //获取所有文本框
            var allinputs=document.getElementsByTagName("input");
            for(var i=0;i<allinputs.length;i++){
                //判断这个元素是不是按钮
                if(allinputs[i].type!="button"){
                    allinputs[i].value="wxy大傻逼";
                }
            }
        }
    </script>

例：点击每个图片弹出对话框

    <img src="image/1.jpg" alt="" id="img1">
    <img src="image/2.jpg" alt="" id="img2">
    <img src="image/3.jpg" alt="" id="img3">
    <script>
        //根据标签名字获取图片标签，分别注册点击事件
        var imgOgjs=document.getElementsByTagName("img");
        //循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数
        for (var i=0;i<imgObjs.length;i++){
            imgOgjs[i].onclick=function(){
                alert("被点击了");
            };
        }
    </script>

例：点击按钮修改value属性

    <input type="button" value="按钮" id="btn"/>
    <script>
        //在某个元素的事件中，自己的事件中的this就是当前这个元素对象
        var btnObj=document.getElementById("btn");
        btnObj.onclick=function(){
            this.value="我是按钮";
            this.type="text";
            this.id="text";
        }
    </script>