javascript/jquery实现点击触发事件的方法分析

本文实例讲述了javascript/jquery实现点击触发事件的方法。分享给大家供大家参考,具体如下: 点击事件 原声态 和 jquery <%@ page language="java" pageEncoding="utf-8" contentT...

本文实例讲述了javascript/jquery实现点击触发事件的方法。分享给大家供大家参考,具体如下:

点击事件

原声态 和 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 src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
    <button id="demo">我是按钮</button>
    <script type="text/javascript">
      //onclick点击事件
      //方案一 : 原生态onclick
      (function(){
        var demo = document.getElementById("demo");
        demo.οnclick=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>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章