美文网首页
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.事件类型

    鼠标事件 click 在一个元素上鼠标的左键点击下去后抬起就能触发 dblclick 在一个元素上鼠标的左键双击下...

  • vue学习笔记6——v-on

    1. 作用:对页面中的事件进行绑定2. 语法: v-on:事件类型=“事件处理函数名”缩写: @事件类型=“事件处...

  • 事件类型

    1.事件 1.1组成 1.2 事件类型 1.3 事件对象

  • 5-Vue vue-on

    1. 作用:对页面中的事件进行绑定 2. 语法: v-on:事件类型=“事件处理函数名” 缩写: @事件类型=“事...

  • 2018-10-22

    import pygame """1.鼠标事件:事件类型:event.typeMOUSEBUTTONDOWN --...

  • 2018-10-22

    import pygame """ 1.鼠标事件: 事件类型:event.type MOUSEBUTTONDOWN...

  • jQuery事件

    事件类型 1.鼠标事件 click([[data],fn]) 单击时触发 dbclick([...

  • js基础-事件

    注册/移除事件的三种方式 1. on的方式 事件源.on+事件类型 = 事件处理程序 缺点:只可以注册一次同类型的...

  • EventBus的接收端收不到事件

    1.要注册 2.接受事件的方法参数事件类型必须为引用数据类型(不能为基本数据类型)

  • 04JavaScript-事件操作

    事件高级 1.传统方式注册事件 事件侦听注册事件 addEventListener(1) 里面的事件类型是字符串 ...

网友评论

      本文标题:1.事件类型

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