JS：HTML事件监听

来源：互联网发布：微信红包算法及实现编辑：程序博客网时间：2024/06/08 10:51

JS：HTML事件监听

常见事件列表：

网页加载完成：onload
鼠标移到元素上onmouseover
鼠标离开元素：onmouseout
鼠标点击元素：onclick
按下鼠标：onmousedown
释放鼠标：onmouseup

onload

当页面加载完毕时执行此事件
代码示例:

<body onload="openPage()">    <script type="text/javascript">        function openPage(){            alert("页面加载完毕！");//弹出提示框        }    </script></body>

onmouseover与onmouseout

onmouseover和onmouseout分别是光标移动到元素和光标离开元素是执行的事件，两个事件通常搭配使用，制作类始于css伪类hover的效果。
代码示例：

<div id="div" onmouseover="come(this)" onmouseout="leave(this)"      style="width: 200px;height: 200px;background-color: gray;     text-align: center;line-height: 200px;">    试着把鼠标移动到这里</div><script type="text/javascript">    //当鼠标移动到div时，把div中的文字改为“鼠标已经移动到上面了”    function come(obj){        obj.innerHTML = "鼠标已经移动到上面了";    }    //当鼠标离开div的范围时，把div中的文字改为“鼠标已经离开这里了”    function leave(obj){        obj.innerHTML = "鼠标已经离开这里了";    }</script>

onclick

当用户鼠标左键点击元素时，会触发该元素的onclick事件，执行元素onclick属性设置的方法
代码示例：

<div id="div" onclick="replaceColor(this)"     style="width: 200px;height: 200px;background-color: gray;    text-align: center;line-height: 200px;">    点击这里更换颜色</div><script type="text/javascript">    function replaceColor(obj) {        //生成随即颜色        var colorStr = "#";        for (var i = 0; i < 3; i++) {            colorStr += Math.floor(Math.random() * 256).toString(16);        }        obj.style.backgroundColor = colorStr;    }</script>

onmousedown与onmouseup

当鼠标左键处于按下状态时触发的事件，当鼠标左键释放时，触发onmouseup事件
代码示例：

<div id="div" onmousedown="clickDown(this)" onmouseup="clickUp(this)"    style="width: 200px;height: 200px;background-color: #999;    text-align: center;line-height: 200px;">    请在此处点击鼠标左键</div><script type="text/javascript">    function clickDown(obj){        obj.innerHTML = "当前鼠标处于按下状态";        obj.style.backgroundColor = "#666";    }    function clickUp(obj){        obj.innerHTML = "当前鼠标处于未按下状态";        obj.style.backgroundColor = "#999";    }</script>

阅读全文

0 0