当前位置: 58彩票app下载 > 关于计算机 > 正文

oninput事件解决onchange事件的不足

时间:2019-09-18 11:14来源:关于计算机
onchange在用来文本框输入框时,有二个明显的不足.事件不会趁机文字的输入而接触,而是等到文本框失去核心(onblur)时才会触发.也正是从未即时性! 1、事件流 在IE下,能够用onpropertychange来取

onchange在用来文本框输入框时,有二个明显的不足. 事件不会趁机文字的输入而接触,而是等到文本框失去核心(onblur)时才会触发. 也正是从未即时性!

1、事件流

在IE下,能够用onpropertychange来取代onchange事件,当文本框有任何变化时,能霎时触发这事件.

    事件流描述的是从页面中接受事件的相继。可是IE提出的是冒泡流,而Netscape Communicator提出的是捕获流。
JavaScript事件流

那样一来难点就缓慢解决了.

2、事件冒泡(event bubbling)

这别的浏览器呢,onpropertychange可是IE的专利. 接下去便是oninput事件了.

    事件始于由最实际的成分(嵌套档案的次序最深的不胜节点)接收,然后逐级进步传播为较不为具体的节点(文书档案)。如下:

但是oninput有个诡异,必需用addEventListener的格局来绑定事件.不然无效.

复制代码 代码如下:

好了, 以下是自己要作为轨范遵从规则例子, 主流浏览器都没难题:

<html>
    <head>
        <title>事件冒泡</title>
    </head>
    <body>
        <div id="myDiv">点击我</div>
    </body>
</html>
window.onload = function(){
    var obj = document.getElementById("test");
    obj.onclick = function(){
        alert(this.tagName);
    };
    document.body.onclick = function(){
        alert(this.tagName);
    };
    document.documentElement.onclick = function(){
        alert(this.tagName);
    };
    document.onclick = function(){
        alert("document");
    };
    window.onclick = function(){
        alert("window");
    }
};

on用onpropertychange,oninput事件化解onchange事件的阙如 by koyoz.com

事件传播顺序:div——>body——>html——>document

使用onchange事件:

注意:
    现代全部浏览器都帮助冒泡事件,但贯彻还应该有部分数差别。IE5.5及更早版本中的事件冒泡会直接从body跳到document(不实行html)。Firefox、Chrome和Safari则将事件一贯冒泡到window对象。

使用onpropertychange/oninput事件:

3、停止事件冒泡和注销默许事件

结果:

 a. 获取事件指标

[Ctrl+A 全选 注:如需引进外界Js需刷新才具实践]

复制代码 代码如下:

您或者感兴趣的稿子:

  • 截留JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
  • javascript 鼠标事件下结论
  • javascript 键盘事件下结论 推荐
  • JavaScript 模拟顾客单击事件
  • Javascript 模拟点击事件(点击链接与html点击) 包容IE/Firefox
  • javascript 动态改造onclick事件触发函数代码
  • JavaScript window.document的性情、方法和事件下结论
  • JavaScript获取onclick、onchange等事件值的代码
  • IE8的JavaScript点击事件(onclick)不匹配的消除办法
  • javascript移动器材Web开拓中对touch事件的包装实例
  • javascript监听鼠标滚轮事件浅析
  • JavaScript onkeydown事件入门实例(键盘有些开关被按下)
  • 至于编写制定品质高效的javascript事件的手艺
  • javascript相关事件的多少个概念

function getEvent(event) {
// window.event IE
// event 非IE
return event || window.event;
}

 b 功用:截至事件冒泡 

复制代码 代码如下:

function stopBubble(e) {
 // 若是提供了事件目的,则那是三个非IE浏览器
 if ( e && e.stopPropagation ) {
 // 由此它协助W3C的stopPropagation()方法
 e.stopPropagation();
} else {
 // 否则,大家须求运用IE的艺术来撤废事件冒泡
window.event.cancelBubble = true;
}
}

 c. 阻止浏览器的暗中认可行为

复制代码 代码如下:

function stopDefault( e ) {
     // 阻止默许浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中梗阻函数器暗中认可动作的章程
        window.event.returnValue = false;
    }
    return false;
}

您恐怕感兴趣的篇章:

  • javascript 鼠标事件下结论
  • javascript 键盘事件下结论 推荐
  • JavaScript 模拟客户单击事件
  • Javascript 模拟点击事件(点击链接与html点击) 包容IE/Firefox
  • javascript开采中选择onpropertychange,oninput事件化解onchange事件的不足
  • JavaScript与Image加载事件(onload)、加载状态(complete)
  • javascript 动态改造onclick事件触发函数代码
  • JavaScript window.document的天性、方法和事件下结论
  • JavaScript获取onclick、onchange等事件值的代码
  • IE8的JavaScript点击事件(onclick)不相称的化解措施
  • javascript移动设备Web开采中对touch事件的包裹实例
  • javascript监听鼠标滚轮事件浅析
  • 19个JavaScript事件(伊夫nts)属性汇总
  • javascript使用for循环批量注册的风浪不可能科学获取索引值的缓和办法
  • 纯JavaScript达成获取onclick、onchange等事件的值
  • JavaScript事件委托用法剖析
  • 浅谈javascript中this在事变中的应用

编辑:关于计算机 本文来源:oninput事件解决onchange事件的不足

关键词: