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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP查询网站的PR值
2013/10/30 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js计算精度问题小结
2013/04/22 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python内置类型性能分析过程实例
2020/01/29 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
高校毕业生登记表自我鉴定
2013/11/03 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
法人授权委托书样本
2014/09/19 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
在Python中如何使用yield
2021/06/07 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python