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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现放大镜案例
Oct 19 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP连接access数据库
2015/03/27 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
node.js的事件机制
2017/02/08 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
外企办公室竞聘演讲稿
2013/12/29 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
技术支持岗位职责
2015/02/13 职场文书
部队个人年终总结
2015/03/02 职场文书
环保建议书作文400字
2015/09/14 职场文书
2019求职信大礼包
2019/05/15 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python