【新手案例】Javascript按钮事件的三种绑定方法

最新推荐文章于 2024-09-08 10:02:32 发布

代码男神小轩轩

最新推荐文章于 2024-09-08 10:02:32 发布

阅读量1.5k

点赞数 1

文章标签： javascript html php css mysql

本文链接：https://blog.csdn.net/qq464685223/article/details/104925489

版权

先看看代码访问的效果：

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ChiHinTest</title>
</head>
<body>
<!--行内绑定事件-->
<div align="center">
    <label id="tips">点一下试试</label>
    <br>
    <!--html行内绑定-->
    <input type="button" value="html行内绑定" onclick="btn()">
    <!--id绑定-->
    <input type="button" value="js索引绑定" id="btn">
    <!--事件监听方式-->
    <input type="button" value="js监听绑定" id="btn2">
</div>
<script type="text/javascript">
    // 事件=用户的行为被浏览器捕获之后执行的函数
    // 1.html行内绑定
    function btn() {
        document.getElementById('tips').innerText = '此次点击事件是行内绑定的';
        // alert('行内绑定的');
    }

    // 2.js通过标签属性的寻找进行绑定
    document.getElementById('btn').onclick = function () {
        document.getElementById('tips').innerText = '此次点击事件是js绑定的';
        // alert('js绑定的')
    };

    // 3.事件监听方式
    function btn2Click(){
        document.getElementById('tips').innerText = '此次点击事件是监听click绑定的';
        // alert('此次点击事件是监听click绑定的')
    }
    // 事件绑定也可以传递一个function但是不需要括号
    document.getElementById('btn2').addEventListener('click',btn2Click);
</script>
</body>
</html>