JavaScript 事件机制

来源：互联网发布：网络应急预案编辑：程序博客网时间：2024/06/11 06:55

一、什么是事件

事件是可以被Js侦测到的行为，比如鼠标的点击，鼠标的移动

二、有哪些事件

onclick—单击事件
onmouseover—鼠标经过事件
onmouseout—鼠标移除事件
onchange—文本内容改变事件
onselect—文本框选中事件
onfocus—光标聚集事件
onblur—移开光标事件
onload—网页加载事件
onunload—关闭网页事件

三、测试ING

1.onclick

<button onclick="demo()">按钮</button><script>    function demo() {        alert("hello");    }</script>

点击按钮出现对话框
这里写图片描述

2.onmouseout&onmouseover

    <style>        .div{            width: 100px;            height: 100px;            background: #fff75e;        }    </style></head><body><div class="div" onmouseover="onover(this)" onmouseout="onout(this)"></div><script>//上面的this意为指向当前函数    function onover(obj) {        obj.innerHTML="hello";//通过obj对象来得到html让它等于“hello”    }    function onout(obj) {        obj.innerHTML="world";    }</script>

当鼠标放在指定区域出现hello，离开指定区域出现world

3.onchange

    <form>        <input type="text" onchange="changeDemo()">    </form>    <script>        function changeDemo() {            alert("hello");        }    </script>

当改变表单里的内容，就好弹出对话框
这里写图片描述

onchange另一种方法

    <form>        <input type="text" onchange="alert('hello')">    </form>

效果一样，这里不需要用到JS代码

onselect

    <form>        <input type="text" onselect="selectDemo(this)">    </form>    <script>        function selectDemo(obj) {            obj.style.background="red";//选中文本框后，文本框背景颜色变为红色        }    </script>

选中文本框后，文本框背景颜色变为红色
这里写图片描述

四、更多实例(w3c参考)

onmousedown 和 onmouseup

当用户按下鼠标按钮时，更换一幅图像

onload

当页面完成加载时，显示一个提示框

0 0