常⻅的HTML事件

常⻅的HTML事件

描述事件
html元素发生改变 onchange
用户点击了元素 onclick
鼠标移动到了元素上 onmouseover
鼠标离开元素 onmouseout
按下键盘 onkeydown
页面已经完成加载 onload

怎么对事件做出反应

 onclick方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="test()">这是一个测试</div>
    <script>
        function test() {
            console.log('点击成功');

        }
    </script>
</body>
</html>

但是实际开发中并不建议使用该方法，主要用addEventListener给DOM对象添加事件处理程序。

启⽤事件监听器

监听语法去掉上表中的on即可，获取指定元素，添加监听，在函数体内执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wangzhi">www.baidu.com</div>
</body>

<script>
    var wangzhi = document.getElementsByClassName('wangzhi')[0];

    wangzhi.addEventListener('click', function() {
        console.log('点击成功');
    })
</script>

</html>

 

posted @ 2022-11-30 16:51  我是小弟弟  阅读(17)  评论(0)  编辑  收藏  举报
友情链接:ie资源库