JS 之onchange onclick ……常用事件
阿新 • • 發佈：2018-12-26
JS常用的五大事件 onclick nochanger onload onsubmit onblur |
|---|
JS事件
一、什麼是事件？事件是電腦輸入裝置與頁面互動的響應。我們稱之為事件。
常用的事件：
onload載入完成事件
onclick單擊事件
onblur失去焦點事件
onchange內容發生改變事件 經常用於select下拉列表選中後的內容發生改變時候觸發
onsubmit表單提交事件 經常用來在表單提交的時候驗證所有表單項是否合法。
二、事件的註冊又分為靜態註冊和動態註冊兩種：
靜態註冊事件：
就是在標籤上使用事件屬性賦值的形式 給這個標籤的事件響應新增javaScript程式碼的方式，我們稱之為靜態註冊事件。
動態註冊事件：
動態註冊，需要我們先獲取到標籤物件。
然後通過對標籤物件的的屬性進行賦值一個function函式的形式。
動態註冊需要分兩步走：
第一步，先獲取標籤物件
第二步，通過標籤物件.事件名 = function(){ }
事件一、onclick（下面是靜態註冊單擊事件示例）
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The event of script</title> <script type="text/javascript"> function onclickEvent(){ alert("您點選了我 我是一個單擊鈕觸發的事件並且此處由靜態載入！！"); } </script> </head> <body> <input type="button" onclick="onclickEvent();" value="單擊事件靜態"/> </body> </html>
事件二、onload（下面是靜態載入）事件 是在頁面被瀏覽器載入完成之後。自動觸發的響應
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- onload事件 是在頁面被瀏覽器載入完成之後。自動觸發的響應 此處靜態註冊 --> <script type="text/javascript"> alert("onloadFun() 還未起作用 現在頁面還沒有載入完！"); function onloadFun(){ //alert("頁面被載入完成！之後執行"); // 在javaScript中，我們要操作一個標籤要分兩步走： // 第一步，先獲取標籤物件 //get 獲取 //Element 元素（元素也就是標籤） // by 是由 經 ，通過 // id 是id屬性 var spanObj = document.getElementById("span01"); alert(spanObj.innerHTML); // alert(spanObj); // 第二步，操作標籤物件的屬性 // innerHTML 表示物件的起始標籤和結束標籤中間的html文字內容 //alert( spanObj.innerHTML ); //spanObj.innerHTML = "xxxxxx"; // 建立一個date物件獲取當前時間 var date = new Date(); // 把日期物件轉換成為字串 var dateStr = date.toLocaleString(); alert("頁面載入完 script函式執行中我將更改span標籤的內容！！為一個時間"); spanObj.innerHTML = dateStr; } </script> </head> <body onload="onloadFun();"> <button>我也是一個按鈕</button><br /> <span id="span01">我是span標籤用來檢驗onload事件的靜態載入 現在頁面載入完 我出現</span> </body> </html>
《2》動態註冊onload 和 onclick 事件（單擊事件 載入完成事件）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("頁面載入前 未顯示頁面內容");
/*
onload事件的動態註冊的寫法
*/
window.onload = function() {
// alert("頁面被載入完成！");
// 動態註冊需要分兩步走：
// 第一步，先獲取標籤物件
var buObj = document.getElementById("bu01");
// alert(buObj);
// 第二步，通過標籤物件.事件名 = function(){ }
alert("頁面載入完成 我已獲取按鈕並繫結單擊事件！！");
buObj.onclick = function(){
alert("這是剛剛頁面動態載入完給按鈕繫結的單擊事件 點選看看！");
}
}
</script>
</head>
<body>
<button id="bu01">我是一個按鈕</button>
<font color="red" size="5">如果頁面載入完 就會看見我了</font>
</body>
</html>
事件三onblur 動態 和 靜態 註冊（失去焦點事件）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("現在未執行動態載入是頁面載入前你看不懂表單吧！！");
//onblur靜態觸發的script函式
function onblurFun(){
alert("使用者名稱失去焦點！");
}
//動態獲取載入完頁面並賦與觸發事件
window.onload = function() {
alert("此時頁面載入完 賬號標籤已經被靜態的註冊了失去焦點事件");
//第一步，先獲取標籤物件
var passObj = document.getElementById("password");
// alert(passObj);
//第二步，通過標籤物件.事件名 = function(){}
alert("頁面已載入完 已獲取到密碼標籤並正在執行繫結onblur事件");
passObj.onblur = function() {
alert("密碼框動態註冊的onblur事件生效 ");
}
}
</script>
</head>
<body>
<!--
靜態註冊失去焦點事件
-->
賬號:<input type="text" onblur="onblurFun()"/><br/>
密碼:<input id="password" type="password" /><br/>
郵箱:<input id="email" type="text" /><br/>
</body>
</html>
事件四onchange 動態 和 靜態 註冊（內容發生改變事件）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onchangeFun(){
alert("靜態註冊的onchage事件 ");
}
alert("現在頁面未載入但是男神下拉框 已經被靜態綁定了onchange 改變事件");
// 頁面載入完成之後
window.onload = function() {
// 1.通過id屬性值獲取第二個select標籤物件
var selectObj = document.getElementById("select01");
// 2.通過標籤物件.事件名 = function(){}
alert("現在頁面載入完成 對女神下拉框動態註冊onchange事件中");
selectObj.onchange = function() {
alert("這是動態建立的onchange事件 ");
}
}
</script>
</head>
<body>
請選擇你心中的男神：
<select onchange="onchangeFun();">
<option selected="selected">劉德華</option>
<option>張學友</option>
<option>張國榮</option>
</select>
<br/>
請選擇你心中的女神：
<select id="select01">
<option>李四</option>
<option selected="selected">張三</option>
<option>王五</option>
</select>
</body>
</html>
事件五onsubmit 動態 和 靜態 註冊（內容發生改變事件）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onsubmitFun() {
alert("驗證所有的表單操作……");
// 情況1 如果有一個表單不合法，我們就可以直接return false;阻止表單提交到伺服器
alert("有表單不合法，阻止提交");
return false;
// 情況2 如果所有的表單都合法
alert("所有的表單都合法，通過驗證，讓表單提交到伺服器");
return true;
}
</script>
</head>
<body>
<!--
onsubmit事件 ，是表單提交事件。經常用來在表單提交的時候驗證所有表單項是否合法。
我們在靜態註冊的時候，必須手動態寫上reutrn false可以阻止表單的提交
return false可以阻止html標籤元素的預設行為
-->
<form action="http://www.baidu.com" method="get"
onsubmit="return onsubmitFun();">
使用者名稱:<input type="text" /><br /><br />
<input type="submit" value="我是一個sumbit按鈕"/>
</form>
</body>
</html>