DOM鼠标事件键盘事件

一、常用的鼠标事件:

禁用鼠标右键

function前添加'contextmenu'

禁止鼠标选中

function前添加'selectstart'

鼠标事件对象MouseEvent

1.e.client返回鼠标在可视区的x和y坐标

2.e.page返回鼠标在整个页面文档中的x和y坐标

3.e.screen返回鼠标在电脑屏幕的x和y坐标

案例:跟着鼠标的天使

<script>
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x=e.pageX;
            var y=e.pageY;
            console.log(x,y);
            pic.style.left=x px;
            pic.style.right=y px;
        })
</script>

二、常用的键盘事件:

1.onkeyup 键盘按键松开时触发

2.onkeydown 键盘按键按下时触发

3.onkeypass 按下出发 不识别功能键 shift ctrl 箭头等

执行顺序1，3，2

用法document.onkeyup＝function（）{}

keyup,keydown不区分字母大小写，keypass区分。

可以根据e.keycode返回的ASII二码值判断按键是哪个。

案例:

模拟京东按键输入内容（按s键搜索框获得焦点）

搜索框获得焦点:search.focus（）;

<input type="">
    <script>
        var search=document.querySelector('input');
        document.addEventListener('keyup',function(e){
            if(e.keyCode===83){
                search.focus();
            }
        })
    </script>

注意:

keydown和keypress在文本框里的特点:它们两个事件触发的时候，文字还没有落入文本框中。

案例：模拟京东快递单号查询

<script>
        var con=document.querySelector('con');
        var jd_input=document.querySelector('jd');
        jd_input.addEventListener('keyup',function(){
            //判断条件使得不输入内容时放大框隐藏
            if(this.value=''){
                con.style.display='none';
            }else{
                con.style.display='block';
                con.innerTEXT=this.value;
            }
        })
        //失去焦点时隐藏con盒子
        jd_input.addEventListener('blur',function(){
            con.style.display='none';
        })
        jd_input.addEventListener('focus',function(){
            if (this.value!==''){
                con.style.display='block';
            }
        })
</script>