1. 程式人生 > >監聽元素屬性改變事件的方法

監聽元素屬性改變事件的方法

process text aaaaa 賦值 obj src mark `` html5

一、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() { 
                //你的判斷,你要的內容
             }

監聽元素屬性改變事件的方法