javascript/jquery实现点击触发事件的方法分析
本文实例讲述了javascript/jquery实现点击触发事件的方法。分享给大家供大家参考,具体如下:
点击事件
原声态和jquery
<%@page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" import="Tool.Tool" isELIgnored="false" %>test1 我是按钮 //onclick点击事件 //方案一:原生态onclick (function(){ vardemo=document.getElementById("demo"); demo.οnclick=function(){ alert("我是方案一"); } })(); //方案二:jquery选择器选择demo添加时间 //$(function(){})当页面加载完成后会执行$()包含的方法 $(function(){ $("#demo").click(function(){ alert("我是方案二"); }) }) //方案三:原生态事件监听 //部分浏览器不支持addEventListener事件监听,所以使用的时候先判定一下浏览器是否支持 (function(){ vardemo=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("我是方案六"); }) })()
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。