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实现图片轮播效果
May 08 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
利用python发送和接收邮件
2016/09/27 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
python打开文件的方式有哪些
2020/06/29 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
体育专业学生自我评价范文
2014/01/17 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
服装店营销方案
2014/03/10 职场文书
文案策划求职信
2014/03/18 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书