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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP实现微信提现功能
2018/09/30 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python 调用HBase的简单实例
2016/12/18 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python登录注册验证功能实现
2018/06/18 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python 处理文件的几种方式
2019/08/23 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
应届医学毕业生求职信分享
2013/12/02 职场文书
留学自荐信写作方法
2014/01/27 职场文书
打架检讨书500字
2014/01/29 职场文书
质量整改报告范文
2014/11/08 职场文书
党性修养心得体会2016
2016/01/21 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
JavaScript文档对象模型DOM
2021/11/20 Javascript
Java设计模式之代理模式
2022/04/22 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android