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

更新时间:2021-10-29 来源:黑马程序员浏览量:

IT培训班

1、页面事件(资源事件)

load

一个资源及其相关资源已完成加载。

<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、鼠标事件

mouseenter

指针移到有事件监听的元素内

mouseover

指针移到有事件监听的元素或者它的子元素内

mousemove

指针在元素内移动时持续触发

mousedown

在元素上按下任意鼠标按钮

mouseup

在元素上释放任意鼠标按键

click

在元素上按下并释放任意鼠标按键

dblclick

在元素上双击鼠标按钮

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.onmouseover = function(){
        console.log('来了?');
    }
    //当鼠标离开时触发
    d.onmouseout = function(){
        console.log('不要啊');
    }
    //当鼠标按下时触发
    d.onmousedown = function(){
        console.log('用力啊');
    }
    //当鼠标弹起时触发
    d.onmouseup = function(){
        console.log('再来');
    }
    //当鼠标移动时触发
    d.onmousemove = function(){
        console.log('别乱动');
    }
    //当点击右键时
    d.oncontextmenu = function(){
        console.log('你想干什么？');
        return false;
    }
    // 当复制内容时
    d.oncopy = function(){
        console.log('你敢复制我？');
        return false;
    }
</script>

4、键盘事件

keydown

按下任意按键

<body>
    <input type="text" value="" id="t">
</body>
<script>
    var d = document.getElementById('t');
    //当键盘按下时触发
    d.onkeydown = function(){
        console.log('推到?');
    }
    //当键盘按下时触发
    d.onkeypress = function(){
        console.log('撩起2?');
    }
    //当键盘弹起时触发
    d.onkeyup = function(){
        console.log('撩起?');
    }
</script>

keypress

除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)

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.onsubmit = function(){
        alert('t');
    }
    //当表单重置时触发
    d.onreset = function(){
        alert('re');
    }
</script>

6、内容变化事件

change

当内容改变且失去焦点时触发 (存储事件)

input

当内容改变时触发 (值变化事件)

<body>
    <input type="text" id="t" value="">
</body>
<script>
    var d = document.getElementById('t');
    //当内容改变且失去焦点时触发
    d.onchange = function(){
        console.log('t');
    }
    //当内容改变时触发
    d.oninput = function(){
        console.log('in');
    }
 </script>