javascript 点击触发事件

最新推荐文章于 2024-06-04 10:37:05 发布

原创最新推荐文章于 2024-06-04 10:37:05 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了六种不同的点击事件绑定方法，包括原生JavaScript的onclick属性、addEventListener监听、jQuery的选择器点击事件绑定及touchstart事件处理等。这些方法适用于不同场景，如网页交互设计和移动端触摸事件响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击事件
原声态和 jquery

<%@ page
    language="java"
    pageEncoding="utf-8"
    contentType="text/html;charset=utf-8"
    import="Tool.Tool"
    isELIgnored="false"
%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test1</title>
        <script type="text/javascript" src="<%=Tool.targetUrl(request,"Resource/js/jquery-1.9.1.min.js") %>"></script>
    </head>
    <body>
        <button id="demo">我是按钮</button>
        <script type="text/javascript">
            //onclick点击事件
            //方案一 ： 原生态onclick
            (function(){
                var demo = document.getElementById("demo");

                demo.onclick=function(){
                    alert("我是方案一");
                }
            })();

            //方案二 : jquery 选择器选择demo 添加时间
            //$(function(){})   当页面加载完成后会执行$()包含的方法
            $(function(){
                $("#demo").click(function(){
                    alert("我是方案二");
                })
            })

            //方案三 : 原生态事件监听 
            //部分浏览器不支持addEventListener 事件监听，所以使用的时候先判定一下浏览器是否支持
            (function(){
                var demo = document.getElementById("demo");

                if(window.addEventListener)
                {
                    demo.addEventListener("click",function(){
                        alert("我是方案三");
                    })
                }
            })();

            //方案四 ： jquery 事件绑定
            // 即能给指定元素添加点击事件，又能随时解除点击时间
            $(function(){
                $("#demo").bind("click",function(){
                    //使用$("#demo").unbind("click") 也可以实现同样效果
                    $(this).unbind("click");
                    alert("我是方案四")
                })
            })

            //方案五 ： 移动端支持 - touchstart 事件点击事件 jquery
            //当手指触碰某个元素后触发
            $(function(){
                $("#demo").bind("touchstart",function(){
                    alert("我是方案五");
                })
            })

            //方案六 ： 原生态版本 - touchstart 事件
            (function(){
                document.getElementById("demo").addEventListener("touchstart",function(){
                    alert("我是方案六");
                })

            })()
        </script>
    </body>
</html>