美文网首页
1.事件类型

1.事件类型

作者: 素弥 | 来源:发表于2016-10-09 15:27 被阅读28次

    鼠标事件

    click

    在一个元素上鼠标的左键点击下去后抬起就能触发

    dblclick

    在一个元素上鼠标的左键双击下去后抬起就能触发

    mousedown

    在一个元素上鼠标左中右键按下去(不需要抬起来)的时候就会触发(如果长按不会持续触发)

    mouseup

    在一个元素上鼠标左中右键抬起来(不需要鼠标在元素上面按下去)的时候就会触发

    mousemove

    在一个元素上鼠标移动的时候就会触发

    mouseover/mouseout

    在一个元素上鼠标移入和移出就会触发

    mouseenter/mouseleave

    在一个元素上鼠标移入和移出就会触发

    mouseover / mouseout 和 mouseenter / mouseleave 的区别

    mouseover / mouseout
    它们会把事件传递给子元素
    mouseenter / mouseleave
    他们不会把事件传递给子元素(IE6不兼容)

    键盘事件

    不是所有的元素都有键盘事件,只有有焦点的元素才有键盘事件,当这些有焦点的元素在聚焦的时候,键盘事件才达到触发条件之一(键盘事件触发条件之二就得看事件的内容了)

    keyup

    键盘抬起时触发的事件

    keydown

    键盘按下时触发的事件(如果长按则会一直触发)

    keypress

    键盘按下时触发的事件(如果长按则会一直触发)

    keypress与keydown的区别

    keydown
    所有按键按下去都会触发
    keypress
    只有当按下能在输入框显示的键时才会触发,例如字母,符号,数字,enter等等

    焦点事件

    focus

    有焦点事件的元素获得焦点时触发

    blur

    有焦点事件的元素失去焦点时触发

    关于焦点的方法

    设置焦点focus()
    移除焦点blur()

    <!--输入框提示实例-->
    <body>
        <input type="text" value="请输入内容">
    </body>
    <script>
        var input=document.querySelector('input');
        input.focus();                 //打开页面就将输入框聚焦
        input.onfocus=function(){
            this.value='';             //聚焦时去掉提示文字
        };
        input.onblur=function(){
            this.value='请输入内容';    //失去焦点时重新显示提示文字
        };
    </script>
    

    相关文章

      网友评论

          本文标题:1.事件类型

          本文链接:https://www.haomeiwen.com/subject/idnpyttx.html