Javascript事件

最新推荐文章于 2024-11-07 13:56:28 发布

qq_58278976

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量71

点赞数

文章标签： html 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_58278976/article/details/128659318

版权

事件：在操作页面中的元素时，自动触发的一种机制，可以通过事件来实现元素的功能，

基本使用：页面中，如果需要使用事件进行某些功能的实现，必须在元素中创建对应的事件属性，通过事件属性执行某些特定的JavaScript脚本代码。

基本代码：

< 标签事件名称 =“脚本代码|脚本名称”></标签>

案例-事件调用脚本代码

直接写在里面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件基本使用</title>
        
    </head>
    <body>
        <form>
            <input type="button" value="点我试试" onclick="alert('试试就试试')" />
        </form>
        
    </body>
</html>

调用方法名称，写在事件后面

<div onclick=" dianji();" id="one">div点击事件测试</div>
        <script type="text/javascript">
            function dianji(){
                
                alert("div点击后弹出的对话框")
            }
        </script>

一般在开发中，使用的是用方法名来调用。

onclick：鼠标单击

onchangge：文本内容或下拉框中的内容·发生改变

onfocus:获得焦点

onfblur：失去焦点

Onload：自动触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload=" showInfo();">
        <form action="" method="post">
            
            <input type="text" id="Info" readonly="readonly"/>
        </form>
        <script type="text/javascript">
            function showInfo(){
                var obj = document.getElementById("Info")
                obj.value = "页面显示成功！"
                
                
            }
        </script>
    </body>
</html>

Onchange：文本框或者下拉文本框中内容变化，会自动触发改事件。当失去焦点时，事件才会被触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload=" showInfo();">
        <form action="" method="post">
            
            <input type="text" id="Info" readonly="readonly"/>
            <hr />
            <input type="text" id="hi"  onchange="change01()"/><br />
            <select id="city">
                <option>甘谷</option>
                <option>天水</option>
                <option>兰州</option>
            </select>
        </form>
        <script type="text/javascript">
            function showInfo(){
                var obj = document.getElementById("Info")
                obj.value = "页面显示成功！"
                
                
            }
            function change01(){
                var obj1 = document.getElementById("Info")
                var obj2 = document.getElementById("hi")
                obj1.value = obj2.value
                
            }
        </script>
    </body>
</html>