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


Posted in jQuery onNovember 11, 2019

本文实例讲述了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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 #jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
You might like
mysql时区问题
2008/03/26 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP简单遍历对象示例
2016/09/28 PHP
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
酒店led欢迎词
2014/01/09 职场文书
户外拓展活动方案
2014/02/11 职场文书
四群教育工作实施方案
2014/03/26 职场文书
住宅质量保证书
2014/04/29 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
就业证明函
2015/06/17 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python