Js绑定事件的几种方式

最新推荐文章于 2025-07-07 09:53:19 发布

Jsonkim

最新推荐文章于 2025-07-07 09:53:19 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： /root/WEB前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u013987661/article/details/52572332

/root/WEB前端专栏收录该内容

24 篇文章

订阅专栏

1.直接在标签中绑定

<!DOCTYPE html>
<html>
    <head>
        <title>直接在标签里绑定事件</title>
    </head>
<body>

    <input type="button" value="点我触发事件" onclick="fun1('liming')" />

    <script type="text/javascript">
        function fun1(name)
            {
                alert("欢迎："+name)
            }
    </script>

</body>

2.querySelector方法绑定

<!DOCTYPE html>
<html>
<head>
    <title>querySelector方法绑定</title>
</head>
<body>

    <input type="button" id="b1" value="点我触发事件"/>

    <script type="text/javascript">
        function fun1(name)
        {
            alert("欢迎："+name)
        }
        document.querySelector('#b1').onclick=function (){fun1('lili')}

    </script>

</body>
</html>

3.getElementByID方法绑定

<!DOCTYPE html>
<html>
<head>
    <title>getElementByID方法绑定</title>
</head>
<body>

    <input type="button" id="b1" value="点我触发事件"/>

    <script type="text/javascript">
        function fun1(name)
            {
                alert("欢迎："+name)
            }
        document.getElementById('b1').onclick=function (){fun1('lili')}
    </script>

</body>
</html>

4.JQuery的原生方法绑定

<!DOCTYPE html>
<html>
<head>
    <title>JQuery的原生方法绑定</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

    <input type="button" id="b1" value="点我触发事件"/>

    <script type="text/javascript">
        function fun1(name)
            {
                alert("欢迎："+name)
            }
        $('#b1').click(function (){fun1('lili')});
    </script>

</body>
</html>