Javascript内置对象之常用event对象

注：以下结果均需要在网页内点击F12在console中查看效果
event对象很多，这里对一些常用的进行解释和举例
首先创建一个新的HTML
在head中写下一个方法，例如：

<head>
    <meta charset="utf-8" />
    <title>event</title>
    <script>
        function test(){
        console.log("好好学习")
    }
    </script>
</head>

1.onlick
在鼠标点击的时候起作用，例如：

<div onclick="test()">
        哈哈哈哈哈哈哈哈哈
    </div>

2.onchange
只有在值变化的时候，才能起作用,例如：

<select onchange="test()"> 
        <option>one</option>
        <option>two</option>
        <option>three</option>
</select>

3.onfocus和onblur
onfucus在聚焦的时候起作用，例如：

<textarea onfocus="test()"> </textarea>

onblur在失去焦点的时候起作用，例如：

<textarea onblur="test()"> </textarea>

4.onmousemove和onmouseover和onmouseout
（1）onmousemove只要鼠标在区域中移动，便起作用，不动或在区域外移动无效；
（2）onmoueseover鼠标从区域外移动到区域内起作用；
（3）onmouseout鼠标从区域内移动到区域外起作用；
注：加边框是为了出现区域，使效果更明显；
例如：

<div style="border: 1px solid red;height: 200px;width: 200px;" onmousemove="test()"></div> 

<div style="border: 1px solid red;height: 200px;width: 200px;" onmouseover="test()"></div>

<div style="border: 1px solid red;height: 200px;width: 200px;" onmouseout="test()"></div>

5.onkeydown和onkeyup和onkeypress
（1）onkeydown 键盘某个按键被按下的时候起作用
（2）onkeyup 松开键盘按键的时候起作用
（3）onkeypress 按下键盘某个按键或者一直按着某个按键的时候起作用
例如：

<!--键盘某个按键被按下的时候起作用-->
    <textarea onkeydown="test()"> 
    </textarea>
<!--松开键盘按键的时候起作用-->
    <textarea onkeyup="test()"> 
    </textarea>
<!--按下键盘某个按键或者一直按着某个按键的时候起作用-->
    <textarea onkeypress="test()"> 
    </textarea>

6.onsubmit
onsubmit需要返回值为真值或假值，即true和false,故在头部的script写入如下方法：

function test1(){
    return true;
}

在body中写入如下：

<form action="http://www.baidu.com/s" onsubmit="return test1();">
    <input name="wd"/>
    <input type="submit" value="百度一下" />
    <input type="reset" value="重置" />
</form>

7.onload
在整个页面结束后开始执行，一般写在body里面，例如（用onload打开一张图片）：

<body onload="picture()"> <!--在整个页面结束了开始执行-->
    <img id="image"/>
</body>

在head的script中写入方法如下（图片自选）：

function picture(){
    document.getElementById("image").src="img/bg-0018.gif";
}

Javascript内置对象之常用event对象

猜你喜欢