064_Js經常使用的五大事件 onclick nochanger onload onsubmit onblur

時間 2019-11-13

標籤經常使用五大事件 onclick nochanger onload onsubmit onblur 欄目 JavaScript 简体版

原文原文鏈接

事件是電腦輸入設備與頁面交互的響應。javascript

onload加載完成事件：onload事件 是在頁面被瀏覽器加載完成以後。自動觸發的響應    
onclick單擊事件 
onblur失去焦點事件
onchange內容發生改變事件  常常用於select下拉列表選中後的內容發生改變時候觸發
onsubmit表單提交事件 常常用來在表單提交的時候驗證全部表單項是否合法。

事件的註冊又分爲靜態註冊和動態註冊兩種html

靜態註冊事件：在標籤上使用事件屬性賦值的形式 給這個標籤的事件響應添加javaScript代碼的方式；

動態註冊事件：動態註冊，須要咱們先獲取到標籤對象。而後經過對標籤對象的的屬性進行賦值一個function函數的形式。

事件1、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>

事件2、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 事件（單擊事件加載完成事件）java

<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>

JS事件

1、什麼是事件？事件是電腦輸入設備與頁面交互的響應。咱們稱之爲事件。瀏覽器

經常使用的事件：服務器

onload加載完成事件    
onclick單擊事件 
onblur失去焦點事件
onchange內容發生改變事件  常常用於select下拉列表選中後的內容發生改變時候觸發
onsubmit表單提交事件 常常用來在表單提交的時候驗證全部表單項是否合法。

事件五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>