监听元素属性改变事件的方法

一、onchange事件
只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效。(就是说你在输入框中输入完内容,输入完了,然后鼠标点别的地方触发该事件)
二、oninput事件
oninput 事件在用户输入时触发。不支持JS等赋值改变的元素属性。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。(也就是说,不用输入完,边输入边触发该事件)
①但是,这个方法是HTML5中的标准事件,IE9以下的浏览器是不支持oninput事件的。
②使用时,还需要oninput要通过addEventListener()来注册.
③在不涉及js赋值等元素改变的事件,我们是可以结合onpropertychange事件使用的如:

        var ie = !!window.ActiveXObject;
        if(ie){
                object.onpropertychange = aaaaa;
        }else{
                object.addEventListener("input", aaaaa, false);
        };
        function aaaaa(){
        alert("20180829");
        }

三、onkeydown事件
事件会在用户按下一个键盘按键时发生(在输入框敲键盘,就会触发)。
在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善
四、onkeyup事件
事件会在键盘按键被松开时发生。(手,已经按了电脑的开关了,一松手就会关机哦)
五、onkeypress事件
事件会在键盘按键被按下并释放一个键时发生。(笔者认为,和onkeyup事件是类似的,可能是判断不同浏览器,执行不同的方法吧)

六、onpropertychange事件
js赋值改变元素属性也可以触发,键盘鼠标操作(只要是HTML元素属性发生改变都可以捕获,遗憾的是IE专属而且还是只是IE6/7/8,高版本的IE需要针对此页面降低版本方可执行。)

七、jQuery 事件 - change() 方法
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。

    被动:<input type="text" id="to_change"/><br/>
        主动:<input type="text" id="make_change" onchange="aaa()"/>
    <script>
        $("#to_change").change(function(){
         alert("执行了change方法!");
        });

        function aaa(){
            $("#to_change").val("20180829")
        }
    </script>

八、原生js绑定change事件
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。

     document.getElementById("to_change").onchange = function() {
                    alert(‘to_change‘);
        };
``
**九、Jquery绑定文本变更事件**
**笔者有三种四种方式实现onchange事件了,这个方法也是一样的,同样不能处理js赋值引起元素属性改变的问题**
     $("#to_change").bind("change", function() {
         alert(‘changed‘);
     });
**十、笔者自写定时器,监听元素属性改变事件
判断浏览器与降低浏览器版本的问题,笔者就不写了。**

直接上定时器,函数:
        $(document).ready(function() {
                // 获得焦点时,启动定时器
                    $("#make_change").focus(function(){
                        var aaa = setInterval(to_change,1000);
                    });
                    // 失去焦点时,清除定时器
                    $("#make_change").blur(function(){
                        clearInterval(aaa);
                    });
                 }
            })
             function to_change() {
                //你的判断,你要的内容
             }

原文地址:http://blog.51cto.com/13479739/2166248

时间: 2024-11-08 19:20:04

监听元素属性改变事件的方法的相关文章

iOS开发:使用代理模式监听开关状态改变事件

记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell里显示的内容由数据模型SettingItem提供:在SettingCell里定义一个属性即可. @property (nonatomic, strong) SettingItem *item; 再定义几个SettingItem的子类表示显示不同内容的Cell(如图1).由于所有开关状态的归档和解档都

关于如何更好的监听元素属性的变化(转)

我们都知道,jQuery有一个onchange的事件来判断类似input或者textarea标签值变化的事件. jQuery中是通过比如keyup,blur,click等事件来监听值的变化,如果变化就触发change事件. jQuery.event.special.change = { filters: { focusout: testChange, beforedeactivate: testChange, click: function( e ) { var elem = e.target,

原生js监听input值改变事件

哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http://www.cnblogs.com/wteng/p/5434403.html $('input').bind('input propertychange', function() { //to do }) 现在用原生js来实现一遍(其实我翻了下jquery的监听事件on的源码,没找到不知道他写哪了),本

完美解决监听文本框改变事件

$('input').bind('input propertychange', function() {  //进行相关操作 });

H5特性 MutationObserver 监听元素 动态改变iframe高度

这些代码要写在iframe页中执行 <script type="text/javascript"> $(function () { // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver // 选择目标节点 var target = document.body

17.swift怎么监听该属性的改变

import UIKit class Person : NSObject { var name : String? { // 可以给newValue自定义名称 willSet (new){ // 属性即将改变,还未改变时会调用的方法 // 在该方法中有一个默认的系统属性newValue,用于存储新值 print(name) print(new) } // 可以给oldValue自定义名称 didSet (old) { // 属性值已经改变了,会调用的方法 // 在该方法中有一个默认的系统属性ol

全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件

在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使用AndroidManifest.xml 完全监听不到.查了一下,发现这是PowerManager那边在发这个广播的时候,做了限制,限制只能有register到代码中的receiver才能接收. view plain private void registerScreenActionReceiver

Unity NGUI监听按钮点击事件的三种方法

NGUI版本:3.6.5 1.直接实现OnClick方法: 创建一个脚本,在脚本中实现OnClick()方法,绑定该脚本到按钮上,点击时就会实现OnClick函数内容: 2.使用SendMessage: 选择按钮后,打开Component——NGUI——Interaction,选择Button Message,为按钮添加一个UIButton Message组件: 然后设置UIButton Message中的参数即可: Target:接收按钮消息的游戏对象: Function Name:接收按钮消

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后