目录

1.直接在按钮处添加onclick属性

2.在表单处添加onsubmit属性

3.操控DOM元素获得组件元素并监听

4.利用jQuery去获得组件元素，使用封装好的click()方法​​​​​​​

1.直接在按钮处添加onclick属性

<body>
<input type="button" value="加载" id="btn" onclick="f()">

<script>
    function f() {
    //方法具体内容
    }
</script>
</body>

2.在表单处添加onsubmit属性

<body>
<form action="http://www.baidu.com" onsubmit="f()">
    文本：
    <input type="text" id="name" name="name">
    <input type="submit" name="提交">
</form>
<script>
    function f() {
        //方法具体内容
    }
</script>
</body>

3.操控DOM元素获得组件元素并监听

<body>
<input type="button" value="加载">

<script>
    // 也可以使用css选择器，不用可以直接使用标签
    var btn = document.querySelector("button");
    // 监听button按钮的点击事件
    btn.onclick = function f() {
        //方法具体内容
    }
</script>
</body>

4.利用jQuery去获得组件元素，使用封装好的click()方法

不能直接放JS语句，click()动作要调用一个方法，即使是一个匿名方法。否则click()里的内容会在加载页面的时候直接生效，这也就失去了点击的意义。

<body>
<input type="button" value="加载" id="btn">

<script>
    $("#btn").click(
        function () {
        //方法具体内容
        })
</script>
</body>

补充：onsubmit和onclick属性方法前都可以添加 return 决定是否成功提交，失败了会取消提交

<body>
//这里的onsubmit后面也一定要加上return，否则只执行不判断，失败仍会提交
<form action="http://www.baidu.com" onsubmit="return f()">
    文本：
    <input type="text" id="name" name="name">
    <input type="submit" name="提交">
</form>

<script>
    function f() {
        var a = document.getElementById("name").value;
        if (a == 'tom') {
            alert("提交成功");
            return true;
        }
//条件不符合，返回false，onsubmit那里也会返回false，会产生提交失败的效果
        else {
            alert("提交失败");
            return false;
        }
    }
</script>
</body>

# javascript # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟