js 鼠标和键盘事件

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是一个对象，里面有很多成员，可以根据成员里面的值来判断按下的键是什么