说说 input 输入框的事件

从input框获取焦点到,输入值,失去焦点这个过程所有事件,以及一些特点;

HTML事件属性分为以下几类:

1、过程

一、全局事件属性:HTML4的新特性之一是可以使HTML事件触发浏览器行为。比方说当用户点击某个HTML元素时启动一段JavaScript

  onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur

二、窗口事件属性(Window Event Attributes):由窗口触发该事件,比较常用的有:onblur(当窗口失去焦点时运行脚本),onfocus(当窗口获得焦点时运行脚本),onhaschange(当文档改变时运行脚本)。

  如下,奉上代码;

三、表单事件(Form Events):onblur(当元素失去焦点时运行脚本),onchange(当元素改变时运行脚本),onfocus(当元素获得焦点时运行脚本),oninput(当元素获得用户输入时运行脚本),onsubmit(当提交表单时运行脚本)

 

四、键盘事件(Keyboard Events):onkeydown(当按下按键时运行脚本),onkeypress(当按下并松开按键时运行脚本),onkeyup(当松开按键时运行脚本)

function handleFocus (event) {
        console.log('onfocus事件', 'value='   event.target.value, 'keyCode='   event.keyCode);
    };

    function handleKeyDown (event) {
        console.log('onkeydown事件', 'value='   event.target.value, 'keyCode='   event.keyCode);
    }

    function handleKeyPress (event) {
        console.log('onkeypree事件', 'value='   event.target.value, 'keyCode='   event.keyCode);
    }

    function handleKeyUp (event) {
        console.log('onkeyup事件', 'value='   event.target.value, 'keyCode='   event.keyCode);
    }

    function handleInput (event) {
        console.log('oninput事件', 'value='   event.target.value, 'keyCode='   event.keyCode);
    }

    function handleChange (event) {
        console.log('onchange事件...', 'value='   event.target.value, 'keyCode='   event.keyCode);
    };

    function handleBlur (event) {
        console.log('onblue事件', 'value='   event.target.value, 'keyCode='   event.keyCode)
    }

注意:三个事件按照键盘按下和抬起,相应的顺序是:onkeydown,onkeypress,onkeyup(如果键盘一直按着,onkeypress将一直执行)。

 

五、鼠标事件(Mouse Events):onclick(当单击鼠标时运行脚本),ondbclick(当双击鼠标时运行脚本),onmousedown(当按下鼠标按钮时运行脚本),onmousemove(当鼠标指针移动时运行脚本),onmouseout(当鼠标指针移出元素时运行脚本),onmouseup(当松开鼠标按钮时运行脚本),onscroll(当滚动元素的滚动条时运行脚本)

  执行结果:


  图片 1

JS事件的冒泡和捕获:

  其实这个过程并没有很意外,唯一感觉不太对劲的是 onchange 事件并不是每次输入框值改变的时候触发的,而是在失去焦点时候,并且在 onblur 之前触发;

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

2、说说这些事件

IE 5.5: div -> body -> document

  onfocus

IE 6.0: div -> body -> html -> document

    并没有什么特别的,就是当焦点转移到(点击,tab切换) input 框上边的时候触发;

Mozilla 1.0: div -> body -> html -> document -> window

  onkeydown

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

    键盘按下的时候触发,但是此时按下的值并没有被输入到 input ,所以,此时的 value 没有值,或者说它的值 只能是之前的旧值

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

      另外,此时可以阻止按键的默认事件;

DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

   onkeypress

    按键在按下之后,并且是按键松开之前触发的;

本文由美洲杯赌球发布于计算机教程,转载请注明出处:说说 input 输入框的事件

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。