js常见事件

最新推荐文章于 2023-10-04 11:01:52 发布

amarsoft_wxzhou

最新推荐文章于 2023-10-04 11:01:52 发布

阅读量313

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/amarsoft_wxzhou/article/details/60609884

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        #e02 {
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript">
        //页面卸载前
        window.onbeforeunload = function(){
            return "在玩一会吧？";
        }

        // 页面加载事件：当整个html页面加载成功调用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框获得焦点：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦点：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","键盘按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","键盘弹起：keyup；");
            }

            // 鼠标事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠标移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠标移出：mouseout");
            }
            e02.onmousedown = function(){
                html("divMsg","鼠标按下：mousedown");
            }
            e02.onmouseup = function(){
                html("divMsg","鼠标弹起：mouseup");
            }

            var e022 = document.getElementById("e022");
            e022.onmousemove = function(){
                var event = event || window.event;
            };


            // 按钮事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","单击：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","双击：dblclick");
            };

        };

        /**
         * 指定位置显示指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }

    </script>

</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span>
<hr/>
<div id="e02" ></div><span id="divMsg"></span>


<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>

事件总结:
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload

    鼠标事件(掌握)
        onclick
    鼠标事件(了解)
        ondblclick:双击
        onmousedown:按下
        onmouserup:弹起
        onmousemove:移动
        onmouserover:悬停
        onmouserout:移出
    键盘事件(理解)
        onkeydown:按下
        onkeyup:弹起
        onkeypress:按住

amarsoft_wxzhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js常见事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>I
复制链接

扫一扫