JavaScript事件

一、JavaScript鼠標事件

JavaScript鼠標事件
  • 通常，事件處理器的命名原則是，在事件名稱前加上前綴on。例如，對于click事件，其處理器名為onclick。對于事件名稱，也是很好記憶的，顧名思義即可
鼠標單擊事件
  • 單擊事件可謂JavaScript中最常用的事件了，例如點擊某個按鈕彈出一個提示框。這里大家一定要注意一點，單擊事件并不是只有按鈕才有，任何元素我們都可以為它添加單擊事件！
<div id="btn">調(diào)試代碼</div>
<script type="text/javascript"> 
    var e = document.getElementById("btn");
    e.onclick = function () { 
        alert("玩我么？");
    }
</script>
鼠標移入和移出事件
  • 其實， onmouseover和onmouseout這2個事件其實是好基友關(guān)系，平常都形影不離。這2個事件都是共同使用來分別控制鼠標“移入”和“移出”2種狀態(tài)的
<h1 id="lvye">綠葉學(xué)習(xí)網(wǎng)</h1>
<script type="text/javascript">
    var e = document.getElementById("lvye");
    e.onmouseover = function () {
        this.style.color = "red";
        this.style.borderColor="red"
    }
    e.onmouseout = function () {
        this.style.color = "black";
        this.style.borderColor = "black"
    }
</script>

分析：this.style.color = "black";
在這里this指向的是e元素節(jié)點，也就是說這句代碼等價于：
e.style.color = "black";
鼠標按下和松開事件
  • 在JavaScript中，鼠標的按下和松開事件分別是onmousedown和onmouseup。又一對好基友閃亮登場
<div id="main">
    <h1 id="lvye">綠葉學(xué)習(xí)網(wǎng)</h1>
    <hr />
    <input id="btn" type="button" value="button" />
</div>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var e = document.getElementById("lvye");
    btn.onmousedown = function () {
        e.style.color = "red";
    }
    btn.onmouseup = function () {
        e.style.color = "black";
    }
</script>

二、JavaScript鍵盤事件

  • 在JavaScript中，常用的鍵盤事件有3種：
    （1）onkeypress事件；
    （2）onkeydown事件；
    （3）onkeyup事件；
  • JavaScript事件通過以下3個事件來捕獲鍵盤事件：onkeydown、onkeypress與onkeyup。這三個事件的執(zhí)行順序如下：onkeydown → onkeypress → onkeyup。
onkeypress事件
  • 在JavaScript中，onkeypress事件是在鍵盤上的某個鍵被按下到松開整個過程中觸發(fā)的事件
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        function refresh() {
            //判斷是否按下R鍵
            if (window.event.keyCode == 82) {
                location.reload();    //刷新頁面
            }
        }
        //調(diào)用函數(shù)
        document.onkeypress = refresh;
    </script>
</head>
<body>
    <div>歡迎來到綠葉學(xué)習(xí)網(wǎng)！</div>
</body>
</html>
  • 其中“window.event.keyCode == 82”表示判斷是否按R鍵（大寫R）刷新頁面。當我們按下R鍵，會發(fā)現(xiàn)頁面被刷新了
onkeydown事件
  • onkeydown跟onkeypress非常相似，也是在鍵盤的按鍵被按下時觸發(fā)。但是這2個事件有一下2大區(qū)別：
    （1）onkeypress事件只在按下鍵盤的任一“字符鍵”（如A~Z、數(shù)字鍵）時觸發(fā)，單獨按下“功能鍵”（如F1 ~ F12、Ctrl鍵、Shift鍵、Alt鍵等）不會觸發(fā)；而onkeydown無論是按下“字符鍵”還是“功能鍵”都會觸發(fā)；
    （2）按下“字符鍵”會同時觸發(fā)onkeydown和onkeypress這2個事件，但是這2個事件有一定順序：onkeydown>onkeypress；

onkeyup事件

  • 在JavaScript中，onkeyup事件是在鍵盤的某個鍵被按下之后松開的一瞬間觸發(fā)的事件。
  • onkeyup事件在實際開發(fā)也常用到，比如在登錄注冊時，很多文本框都是在用戶輸入的同時判斷是否符合要求
<input id="txt" type="text"/>
<div>字符串長度為：<span id="num">0</span></div>
<script type="text/javascript">
    //獲取DOM元素節(jié)點
    var e = document.getElementById("txt");
    var n = document.getElementById("num");
    //定義文本框的onkeyup事件
    e.onkeyup = function () {
        var str = e.value.toString();
        n.innerHTML = str.length;
    }
</script>
  • 這里實現(xiàn)了用戶輸入字符串的同時，JavaScript會自動計算字符串的長度。原理是這樣：在輸入字符串的時候我們需要點擊鍵盤按鈕，每輸入一個字符我們都會觸發(fā)onkeyup事件，因此我們可以使用onkeyup事件來統(tǒng)計

三、JavaScript表單事件

  • 在JavaScript中，常用的表單事件有4種：
    （1）onfocus事件；
    （2）onblur事件；
    （3）onchange事件；
    （4）onselect事件；
onfocus和onblur事件
  • onfocus和onblur這2個事件往往都是配合使用。例如。在用戶在文本框輸入信息時，將光標放在文本框中，文本框會獲取焦點。當文本框失去光標時，文本框失去焦點
  • onfocus表示獲取焦點觸發(fā)的事件，onblur表示失去焦點觸發(fā)的事件
  • 具有獲得焦點和失去焦點事件的元素有3個：
    （1）單行文本框text；
    （2）多行文本框textarea；
    （3）下拉列表select；
  • 在這個例子中，當文本框獲取焦點時，文本框提示文字就會消失；當文本框失去焦點后，會判斷是否已經(jīng)輸入字符串，如果沒有的話，文本框提示文字會重新出現(xiàn)
onchange事件
  • 在JavaScript中，當用戶在單行文本框text和多行文本框textarea輸入文本時，由于文本框內(nèi)字符串的改變將會觸發(fā)onchange事件。此外，在下拉列表select中一個選項的狀態(tài)改變后也會觸發(fā)onchange事件。
  • 具有獲得onchange事件的元素有3個：
    （1）單行文本框text；
    （2）多行文本框textarea；
    （3）下拉列表select；
<textarea id="txt" rows="5" cols="20"></textarea><br />
輸入字符長度為：<span id="num"></span>
<script type="text/javascript">
    var e = document.getElementById("txt");
    var n = document.getElementById("num");
    e.onchange = function () {
        var len = e.value.length;
        n.innerText = len;
    }
</script>
  • 當我們在文本框輸入字符，然后讓文本框失去焦點，即可看到統(tǒng)計字符串的長度值
onselect事件
  • 在JavaScript中，當用戶選中單行文本框text或多行文本框textarea的文本時，會觸發(fā)onselect事件。onselect事件的具體過程是從鼠標按鍵被按下，到鼠標開始移動并選中內(nèi)容的過程。這個過程并不包括鼠標鍵的放開
  • 下拉列表列表項的選中觸發(fā)的事件是onchange而不是onselect
<input id="txt1" type="text" value="歡迎來到綠葉學(xué)習(xí)網(wǎng)學(xué)習(xí)JavaScript入門教程" />
<br />
<textarea id="txt2" cols="20" rows="5">歡迎來到綠葉學(xué)習(xí)網(wǎng)學(xué)習(xí)JavaScript入門教程</textarea>
<script type="text/javascript">
document.getElementById("txt1").onselect = function() {
    alert("你選中了單行文本框中的內(nèi)容");
}
document.getElementById("txt2").onselect = function() {
    alert("你選中了多行文本框中的內(nèi)容");
}
</script>

四、JavaScript編輯事件

  • 在JavaScript中，常見的編輯事件有3種：
    （1）復(fù)制事件oncopy；
    （2）剪切事件oncut；
    （3）粘貼事件onpaste；
復(fù)制事件
  • 在JavaScript中，在網(wǎng)頁中復(fù)制內(nèi)容時會觸發(fā)復(fù)制事件oncopy。我們可以通過oncopy事件來禁止用戶復(fù)制網(wǎng)頁內(nèi)容
  • 此外，與oncopy配對的還有一個onbeforecopy，表示在復(fù)制內(nèi)容之前觸發(fā)的事件。也就是在時間上，onbeforecopy比oncopy早
<div>綠葉學(xué)習(xí)網(wǎng)成立于2015年4月1日，是一個富有活力的技術(shù)學(xué)習(xí)網(wǎng)站。綠葉學(xué)習(xí)網(wǎng)為廣大網(wǎng)絡(luò)工作者（網(wǎng)頁開發(fā)人員、站長等）提供各種精品教程以及最精華資料。</div>
<script type="text/javascript">
document.body.oncopy = function() {
    alert("版權(quán)所有，禁止復(fù)制！");
    return false; //返回false，表示屏蔽復(fù)制功能
}
</script>
  • 上述方法不能真正做到完全屏蔽，因為我們可以到瀏覽器中設(shè)置“禁用JavaScript”，這時使用JavaScript實現(xiàn)屏蔽復(fù)制就無效了。進一步擴展，使用這種屏蔽方式也極大影響了用戶體驗，大家在實際開發(fā)的時候如果不想你的網(wǎng)站成為鳥不拉屎的地方的話，還是少點用
剪切事件
  • 在JavaScript中，當網(wǎng)頁文本框等中選中的內(nèi)容被剪切時會觸發(fā)剪切事件oncut。
  • 此外，與oncut配對的還有一個onbeforecut，表示在復(fù)制內(nèi)容之前觸發(fā)的事件。也就是在時間上，onbeforecut比oncut早
<textarea id="txt" cols="20" rows="5">綠葉學(xué)習(xí)網(wǎng)成立于2015年4月1日，是一個富有活力的技術(shù)學(xué)習(xí)網(wǎng)站。</textarea>
<script type="text/javascript">
var e = document.getElementById("txt");
e.oncut = function() {
    alert("禁止剪切文本框內(nèi)容！");
    return false;
}
</script>
粘貼事件
  • 在JavaScript中，當我們往文本框等中粘貼內(nèi)容時會觸發(fā)粘貼事件onpaste。
  • 此外，與oncopy配對的還有一個onbeforepaste，表示在復(fù)制內(nèi)容之前觸發(fā)的事件。也就是在時間上，onbeforepaste 比onpaste早
<textarea id="txt" cols="20" rows="5"></textarea>
<script type="text/javascript">
    var e = document.getElementById("txt");
    e.onbeforepaste = function () {
        window.clipboardData.setData("text","");  //清空剪貼板
    }
</script>

五、JavaScript頁面相關(guān)事件

window.通用事件名 = 要執(zhí)行的JavaScript代碼;
  • 在JavaScript中，常用的頁面相關(guān)事件共有3種：
    （1）onload（加載事件）；
    （2）onresize（頁面大小事件）；
    （3）onerror（出錯事件）；
onload事件
  • onload事件表示在文檔加載完畢再執(zhí)行的事件
window.onload=function(){
    ……
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var e = document.getElementById("btn");
        e.onclick = function () {
            alert("JavaScript");
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交" />
</body>
</html>
  • 在CSS入門教程中的HTML文檔流這一節(jié)我們知道，HTML文檔是從上到下解析的。
  • 當我們點擊“提交”按鈕的時候，瀏覽器會報錯，這是因為默認情況下瀏覽器對一個頁面是從上到下進行解析的，當瀏覽器解析到“var e = document.getElementById("btn");”就會感覺很疑惑，怎么半路殺出個程咬金呢？然后頓時崩潰了，(>_<)
  • 正確的JavaScript實現(xiàn)代碼應(yīng)該如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var e = document.getElementById("btn");
            e.onclick = function () {
                alert("JavaScript");
            }
        }
    </script>
</head>
<body>
    <div id="main">
        <input id="btn" type="button" value="提交" />
    </div>
</body>
</html>
  • 瀏覽器從上到下解析到window.onload時，就會先不解析window.onload里面的代碼，而是繼續(xù)往下解析，直到把整個HTML文檔解析完成再去解析window.onload內(nèi)部的代碼。這時不需要程咬金自己報號，人家都知道他來了
  • 還有人就問了，像下面JavaScript這種函數(shù)為什么就不需要加window.onload都正確呢？
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        function change() {
            var e = document.getElementById("lvye");
            e.style.color = "red";
            e.style.border = "1px solid gray";
        }
    </script>
</head>
<body>
    <h1 id="lvye">綠葉學(xué)習(xí)網(wǎng)</h1>
    <input type="button" value="改變樣式" onclick="change()"/>
</body>
</html>
  • 我們知道函數(shù)必須調(diào)用才會生效，函數(shù)的定義本身不會自己執(zhí)行。雖然瀏覽器從上到下解析頁面代碼，但是碰到函數(shù)的定義，它不會立刻解析。假如瀏覽器立刻解析的話，函數(shù)豈不是自動執(zhí)行了，那這還是函數(shù)么？
  • 當文檔載入時產(chǎn)生就會產(chǎn)生onload事件，onload事件一個很重要的作用就是在首次載入文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用
onresize事件
  • 在JavaScript中，對于頁面大小改變的事件我們用的是onresize。這個事件常用于固定瀏覽器的大小
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        window.onresize = function () {
            alert("窗口大小被改變");
        }
    </script>
</head>
<body>
</body>
</html>
onerror事件
  • 在JavaScript中，當文檔或圖像加載過程中發(fā)生錯誤時就會觸發(fā)onerror事件。onerror事件只有在IE瀏覽器下才有效
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <img src="logo.jpg" onerror="alert('圖片沒有加載成功！')"/>
</body>
</html>
  • 由于根據(jù)src找不到圖片，圖片加載失敗，因此觸發(fā)了onerror事件。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 基本概念 事件是一些特定動作發(fā)生時所發(fā)出的信號,JavaScript中的事件是可以被 JavaScript 偵測到...
    Zd_silent閱讀 557評論 0贊 1
  • 事件類型 Web 瀏覽器中可能發(fā)生的事件有很多類型UI事件：當用戶與界面上的元素交互時觸發(fā)。焦點事件：當元素獲得或...
    shanruopeng閱讀 1,001評論 0贊 0
  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件，就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,684評論 1贊 11
  • JavaScript事件是由訪問Web頁面的用戶引起的一系列操作，例如：用戶點擊。當用戶執(zhí)行某些操作的時候，再去執(zhí)...
    輕思維閱讀 470評論 0贊 7
  • 今天是我們工作室攝影培訓(xùn)。對于拍照片兒，我感興趣，還要從今年的新手機說起。我手機的最大功能是拍照，拍下來...
    星光_828f閱讀 184評論 0贊 0

友情鏈接更多精彩內(nèi)容