常用事件

最新推荐文章于 2020-03-11 23:28:34 发布

best-toby

最新推荐文章于 2020-03-11 23:28:34 发布

阅读量229

点赞数 1

分类专栏： js 文章标签：事件

本文链接：https://blog.csdn.net/besttoby01/article/details/76943857

版权

js 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

常用事件

1.鼠标事件

（1）鼠标单击事件（onclick）

案例：鼠标单击文字会发生改变

<body>
<p id="p1" οnclick="fun()">单击事件测试</p>
</body>
<script>
    function fun(){
        //获取到指定元素
        var p1 = document.getElementById("p1");
        p1.innerText = "我被单击了！";
        p1.style.fontSize = "60px";
    }
</script>

（2）鼠标双击事件（ondblclick）

案例：单击变大，双击变小

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" οnclick="zoomout()" οndblclick="zoomin()">
    </div>
</body>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>
</html>

（3）鼠标按下/弹起（onmousedown/onmouseup）

案例：鼠标按下变大，弹起变小

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" οnmοusedοwn="zoomout()" οnmοuseup="zoomin()">
    </div>
</body>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>

（4）鼠标移入/移开1（onmouseenter/onmouseleave）

案例：图片本身是天空蓝，鼠标移进去变红色，移出来变蓝色

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" οnmοuseenter="red()" οnmοuseleave="blue()">
    </div>
</body>
<script>
    function red(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "red";
    }
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "skyblue";
    }
</script>
</html>

（5）鼠标移入/移开（onmouseover/onmouseout）

这个与上面的一样，只不过这个支持冒泡/捕获。

（6）鼠标移动（onmousemove）

案例：下面会显示鼠标的坐标，这个坐标是鼠标的当前坐标

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:300px;
            height: 300px;
            background-color: skyblue;
        }
        #img1{
            position: absolute;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <div id="div1" οnmοusemοve="move(event)">
    </div>
    <img id="img1" src="man.png">
    鼠标的坐标<p id="p1"></p>
</body>
    <script>
        function move(e){
            var p1 = document.getElementById("p1");
            var img1 = document.getElementById("img1");
            p1.innerText = e.clientX+","+ e.clientY;
            img1.style.top = e.clientY+"px";
            img1.style.left = e.clientX+"px";
        }
    </script>
</html>

（7）鼠标滚轮（onmousewheel）

案例：一个图片，你鼠标向上转动，会变大，向下转动会变小。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" onmousewheel="wheel(event)">

    </div>
</body>
    <script>
        var width = 100;
        var height = 100;
        function wheel(e){
            if(e.wheelDelta > 0){
                width += 5;
                height += 5;
            }else{
                width -= 5;
                height -= 5;
            }
            var div1 = document.getElementById("div1");
            div1.style.width = width+"px";
            div1.style.height = height+"px";
        }
    </script>
</html>

2.键盘事件

（1）打印字符的按键（keypress）

案例：输入一个字符，按enter打印出来

<body>
<input id="what" type="text" οnkeypress="search(event)"/>
<script>
    function search(e){
        //alert(e.keyCode);
        if(e.keyCode == 13){
            var what = document.getElementById("what");
            alert("开始搜索" + what.value);
        }
    }
</script>
</body>

（2）捕获键盘上的所有字符（个别字符除外）（onkeydown/onkeyup）

案例：也是打印字符

<body>
    <input id="what" type="text" οnkeydοwn="keydown(event)">
</body>
<script>
    function keydown(e){
        alert(e.keyCode);
    }
</script>

3.综合（同时使用键盘和鼠标事件）

案例：通过上下左右4个按键来移动图片

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #img1{
            position: absolute;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body οnkeydοwn="move(event)">
    <img id="img1" src="man.png">
</body>
    <script>
        var top1 = 0;
        var left = 0;
        function move(e){
            switch (e.keyCode){
                case 37:left -= 5; break;
                case 38:top1 -= 5; break;
                case 39:left += 5; break;
                case 40:top1 += 5; break;
            }

            var img1 = document.getElementById("img1");
            img1.style.top = top1+"px";
            img1.style.left = left+"px";
        }
    </script>
</html>

4.其他事件

（1）onload:页面加载事件

（2）onfocus:获得焦点的事件

（3）onblur:失去焦点事件

（4）onchange:值改变事件

best-toby

关注

1
点赞
踩
2

收藏

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

常用事件1.鼠标事件（1）鼠标单击事件（onclick）案例：鼠标单击文字会发生改变单击事件测试 function fun(){ //获取到指定元素 var p1 = document.getElementById("p1"); p1.innerText = "我被单击了！"; p1.style.
复制链接

扫一扫