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


    <!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>
    

      

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    oracle解决连接池不足
    ORA-12537:TNS连接已关闭
    oracle 11g 大量废连接占满数据库连接问题处理
    oracle: 浅谈sqlnet.ora文件的作用,及SQLNET.AUTHENTICATION_SERVICES设置
    查询oracle数据库的数据库名、实例名、ORACLE_SID
    工程:有价值的事物的创建过程,及依赖的资源与知识
    工程学
    并发的本质是任务空间与执行空间
    异步的本质是不确定性
    聊一聊 redux 异步流之 redux-saga
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/12125270.html
Copyright © 2020-2023  润新知