温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-20 07:41:18 来源:网络 阅读:6721 作者:Red_Ant_hoyl 栏目:web开发

一、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() { 
                //你的判断,你要的内容
             }
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI