本文實例講述了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.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。