zoukankan      html  css  js  c++  java
  • 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:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    Python学习札记(十五) 高级特性1 切片
    LeetCode Longest Substring Without Repeating Characters
    Python学习札记(十四) Function4 递归函数 & Hanoi Tower
    single number和变体
    tusen 刷题
    实验室网站
    leetcode 76. Minimum Window Substring
    leetcode 4. Median of Two Sorted Arrays
    leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions 、434. Number of Islands II(lintcode) 并查集 、178. Graph Valid Tree(lintcode)
    刷题注意事项
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/12125270.html
Copyright © 2011-2022 走看看