js 鼠标和键盘事件

鼠标事件
聚焦事件
离焦事件
鼠标单击和双击
鼠标的其他事件
鼠标事件对象
键盘事件

鼠标事件

聚焦事件

<input type="text" id="box1">

    <script>

        var box1 = document.getElementById("box1");

        function Hello () {

            alert("Hello,小潘");

        }

        box1.addEventListener("focus",Hello, false);

    </script>

离焦事件

<input type="text" id="box1">

    <script>

        var box1 = document.getElementById("box1");

        function Hello () {

            alert("Hello,小潘");

        }

        box1.addEventListener("blur",Hello, false);

    </script>

鼠标单击和双击

<div id="box1"></div>

    <script>

        var box1 = document.getElementById("box1");

        function Hello () {

           console.log('单击');

        }

        box1.addEventListener("click",Hello, false);

        box1.addEventListener("dblclick", () => {

            console.log('双击');

        }, false);

    </script>

这里会出现一个问题，如果只双击的话，会先执行两次单击事件再执行双击事件
下面提供一个解决办法

<div id="box1"></div>

    <script>

        var box1 = document.getElementById("box1");

        var time;

        box1.addEventListener("click", () => {

            clearTimeout(time);

            time = setTimeout( () => {//利用定时器延迟

                console.log('单击');

            },300);

        }, false);

        box1.addEventListener("dblclick", () => {

            clearTimeout(time);//再定时器生效前将它去除

            console.log('双击');

        }, false);

    </script>

鼠标的其他事件

<ul>

        <li>鼠标进入变红色</li>

        <li>鼠标离开变蓝色</li>

        <li>鼠标按下字体放大两倍</li>

        <li>鼠标抬起字体缩小两倍</li>

    </ul>

    <script>

        var li = document.getElementsByTagName("li");

        for (var i = 0; i < li.length; i++) {

            li[i].addEventListener("mouseover" ,function() {//匿名函数this不存在

                this.style.backgroundColor = 'red';

            },false);

            li[i].addEventListener("mouseout" ,function() {

                this.style.backgroundColor = 'blue';

            },false);

            li[i].addEventListener("mousedown" ,function() {

                this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) * 2 +"px";

            },false);

            li[i].addEventListener("mouseup" ,function() {

                this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) / 2 +"px";

            },false);

            li[i].addEventListener("mouseover" ,function() {

            },false);

            document.addEventListener("mousemove" , function () {

                console.log("鼠标在移动");

            })

        }

    </script>

【注】如果鼠标按下后把鼠标移出再抬起，则字体放大后不会再缩小

鼠标事件对象

<script>

       document.addEventListener("click", function(e) {//e为传入是事件

            var event = e || window.event;//IE浏览器e不存在

            console.log(event);

       }, false);

    </script>

部分属性如下：

属性/方法	说明
clientx	浏览器可视窗口水平方向的坐标
clientY	浏览器可视窗口垂直方向的坐标
pageX	页面中水平方向的坐标
pageY	页面中垂直方向的坐标
screenX	电脑屏幕水平方向的坐标
screenY	电脑屏幕垂直方向的坐标
button	0、左键 1滚轮键 2右键

键盘事件

<script>

       document.addEventListener("keydown", function(e) {//e为传入是事件

            var event = e || window.event;//IE浏览器e不存在

            console.log(event);

       }, false);

 </script>

从输出可以看出，event是一个对象，里面有很多成员，可以根据成员里面的值来判断按下的键是什么

js 鼠标和键盘事件的相关教程结束。