js基本事件

作者: Raofree | 来源:发表于2017-06-12 20:43 被阅读0次

Jquery总结
js基本事件
react-native ScrollView的吸顶效果
JAVA 之 JS知识框架
JS基本事件总结
js(事件)
面试遇到的问题
js操作页面三步骤
事件
事件委托

单击事件：
onclick:单击事件
ondbclick:双击事件

鼠标事件：
onmousemove:鼠标移动事件
onmouseout:鼠标移出事件
onmouseover:鼠标悬停事件

键盘事件：
onkeyup:键盘弹起事件
onkeydown:键盘下压事件

焦点事件：
onfocus():获取焦点事件
onblur():失去焦点事件
页面加载事件：
onload():页面加载事件。主要用来进行页面资源加载，body标签上使用

注意：
onchange()事件的前置条件是失去焦点事件，因此更适合添加于下拉框。
这一事例说明：在js中需要给合适的标签添加合适的事件

a标签的另外功能---调用函数：
<a href="javascript:函数名()">对外提供的调用方式</a>

事件的阻断机制：
当a标签中同时存在资源链接与事件时，先执行监听事件，后执行资源跳转。
给事件添加返回值false可阻断资源跳转。

代码示例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #mouse1{
                border:solid;1px
                background-color: palegreen;
                width: 300px;
                height: 300px;
            }
            #mouse2{
                border:solid;1px
                background-color: paleturquoise;
                width: 300px;
                height: 300px;
            }
            div{
                margin: 20px;
            }
            input[type=button]{
                margin-left: 45px;
            }
        </style>
        <script type="text/javascript">
            function oneclick(){
                alert("单机事件");
            }
            function dbclick(){
                alert("双击事件");
            }
            function onMouseMove(){
                alert("鼠标移动事件");
            }
            function onMouseOut(){
                alert("鼠标移出事件");
            }
            function onMouseOver(){
                alert("鼠标悬停事件");
            }
            function onKeyUp(){
                alert("键盘弹起事件");
            }
            function onKeyDown(){
                alert("键盘下压事件");
            }
            function onFocus(){
                alert("获取焦点事件");
            }
            function onBlur(){
                alert("失去焦点事件");
            }
            function onLoad(){
                alert("页面已加载完成");
            }
            function onChange(){
                alert("在失去焦点后监听到内容已被改变");
            }
            function otherTrue(){
                alert("a标签实现函数调用&事件的阻断机制---返回True");
                return true;
            }
            function otherFalse(){
                alert("a标签实现的函数调用&事件的阻断机制---返回False")
                return false;//添加返回值false，阻断下一步资源跳转
            }
        </script>
    </head>
    <body onload="onLoad()">
        <div id="click">
            <input type="button" name="" id="" value="单击事件" onclick="oneclick()"/>
            <input type="button" name="" id="" value="双击事件" onclick="dbclick()"/>
        </div>
        <div id="mouse1" onmousemove="onMouseMove()">
            鼠标移动事件
        </div>
        <div id="mouse2" onmouseout="onMouseOut()" onmouseover="onMouseOver()">
            鼠标移出事件&鼠标悬停事件
        </div>
        <div id="key">
            键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="onKeyUp()"/>
            键盘下压事件：<input type="text" name="" id="" value="" onkeydown="onKeyDown()"/>
        </div>
        <div id="focus">
            焦点事件：<input type="text" name="" id="" value="" onfocus="onFocus()" onblur="onBlur()"/>
        </div>
        <div id="onchange">
            onChange事件：
            <select name="" id="" onchange="onChange()">
                <option value="">---请选择---</option>
                <option value="">北京</option>
                <option value="">天津</option>
            </select>
        </div>
        <div id="">
            <a href="javascript:oneclick()">a标签的另一功能：函数调用</a>
        </div>
        <div id="">
            <a href="http://www.baidu.com" onclick="return otherTrue()">事件阻断机制：先进行单击事件，后进行资源跳转</a>
        </div>
        <div id="">
            <a href="http://www.baidu.com" onclick="return otherFalse()">事件阻断机制：先进行单击事件，后阻断资源跳转</a>
        </div>
    </body>
</html>