Javascript事件類型以及常用方法有哪些?

更新時間:2021-10-29 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

1、頁面事件(資源事件)

load

一個資源及其相關(guān)資源已完成加載。

<body onload="f1()" ></body>
<script>
    function f1(){
        alert('f1');
    }
</script>

2、焦點事件

focus
元素獲得焦點(不會冒泡)

blur
元素失去焦點(不會冒泡)

<body>
    <input type="text" id="t" value="請輸入用戶名" onfocus="f1()" onblur="f2()">
</body>
<script>
    function f1(){
        document.getElementById('t').value = '';
    }
    function f2(){
        var v = document.getElementById('t').value;
        alert(v);
    }
</script>

3、鼠標(biāo)事件

mouseenter

指針移到有事件監(jiān)聽的元素內(nèi)

mouseover

指針移到有事件監(jiān)聽的元素或者它的子元素內(nèi)

mousemove

指針在元素內(nèi)移動時持續(xù)觸發(fā)

mousedown

在元素上按下任意鼠標(biāo)按鈕

mouseup

在元素上釋放任意鼠標(biāo)按鍵

click

在元素上按下并釋放任意鼠標(biāo)按鍵

dblclick

在元素上雙擊鼠標(biāo)按鈕

contextmenu

右鍵點擊 (右鍵菜單顯示前)

mouseleave

指針移出元素范圍外(不冒泡)

mouseout

指針移出元素，或者移到它的子元素上

select

文本被選中

<body>
    <div id="d" style="width:200px;height:200px;border:1px solid red">
        來啊
    </div>
</body>
<script>
    var d = document.getElementById('d');
    //當(dāng)鼠標(biāo)懸浮時觸發(fā)
    d.onmouseover = function(){
        console.log('來了?');
    }
    //當(dāng)鼠標(biāo)離開時觸發(fā)
    d.onmouseout = function(){
        console.log('不要啊');
    }
    //當(dāng)鼠標(biāo)按下時觸發(fā)
    d.onmousedown = function(){
        console.log('用力啊');
    }
    //當(dāng)鼠標(biāo)彈起時觸發(fā)
    d.onmouseup = function(){
        console.log('再來');
    }
    //當(dāng)鼠標(biāo)移動時觸發(fā)
    d.onmousemove = function(){
        console.log('別亂動');
    }
    //當(dāng)點擊右鍵時
    d.oncontextmenu = function(){
        console.log('你想干什么？');
        return false;
    }
    // 當(dāng)復(fù)制內(nèi)容時
    d.oncopy = function(){
        console.log('你敢復(fù)制我？');
        return false;
    }
</script>

4、鍵盤事件

keydown

按下任意按鍵

<body>
    <input type="text" value="" id="t">
</body>
<script>
    var d = document.getElementById('t');
    //當(dāng)鍵盤按下時觸發(fā)
    d.onkeydown = function(){
        console.log('推到?');
    }
    //當(dāng)鍵盤按下時觸發(fā)
    d.onkeypress = function(){
        console.log('撩起2?');
    }
    //當(dāng)鍵盤彈起時觸發(fā)
    d.onkeyup = function(){
        console.log('撩起?');
    }
</script>

keypress

除 Shift, Fn, CapsLock 外任意鍵被按住. (連續(xù)觸發(fā))

keyup

釋放任意按鍵

5、form表單事件

reset

點擊重置按鈕時 ()

submit

點擊提交按鈕

<body>
    <form id="f" action="1.2.5.php">
        姓名:<input type="text" name="" value=""> <br>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </form>
</body>
<script>
    var d = document.getElementById('f');
    //當(dāng)表單提交時觸發(fā)
    d.onsubmit = function(){
        alert('t');
    }
    //當(dāng)表單重置時觸發(fā)
    d.onreset = function(){
        alert('re');
    }
</script>

6、內(nèi)容變化事件

change

當(dāng)內(nèi)容改變且失去焦點時觸發(fā) (存儲事件)

input

當(dāng)內(nèi)容改變時觸發(fā) (值變化事件)

<body>
    <input type="text" id="t" value="">
</body>
<script>
    var d = document.getElementById('t');
    //當(dāng)內(nèi)容改變且失去焦點時觸發(fā)
    d.onchange = function(){
        console.log('t');
    }
    //當(dāng)內(nèi)容改變時觸發(fā)
    d.oninput = function(){
        console.log('in');
    }
 </script>

猜你喜歡

JavaScript中l(wèi)et和var和const有什么區(qū)別?

JavaScript for循環(huán)語句操作

javascript開發(fā)工具有哪些？

黑馬程序員HTML&JS+前端課程

上一篇：什么是事件委托？ js事件委托怎么實現(xiàn)？ 下一篇：transition-timing-function屬性值有哪些？怎么使用？