Javascript事件類(lèi)型以及常用方法有哪些?

更新時(shí)間:2021-10-29 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

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

load

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

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

2、焦點(diǎn)事件

focus
元素獲得焦點(diǎn)(不會(huì)冒泡)

blur
元素失去焦點(diǎn)(不會(huì)冒泡)

<body>
    <input type="text" id="t" value="請(qǐng)輸入用戶名" 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)聽(tīng)的元素內(nèi)

mouseover

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

mousemove

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

mousedown

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

mouseup

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

click

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

dblclick

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

contextmenu

右鍵點(diǎn)擊 (右鍵菜單顯示前)

mouseleave

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

mouseout

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

select

文本被選中

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

4、鍵盤(pán)事件

keydown

按下任意按鍵

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

keypress

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

keyup

釋放任意按鍵

5、form表單事件

reset

點(diǎn)擊重置按鈕時(shí) ()

submit

點(diǎn)擊提交按鈕

<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)表單提交時(shí)觸發(fā)
    d.onsubmit = function(){
        alert('t');
    }
    //當(dāng)表單重置時(shí)觸發(fā)
    d.onreset = function(){
        alert('re');
    }
</script>

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

change

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

input

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

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

猜你喜歡

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

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

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

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

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