Использование oninput, onpropertychange, onchange
Триггерное событие onchange должно соответствовать двум условиям:
а) Свойства текущего объекта изменяются и запускаются событиями клавиатуры или мыши (запуск сценария недействителен)
б) Текущий объект теряет фокус (onblur);
В случае onpropertychange, пока изменяются свойства текущего объекта, событие будет вызвано, но оно является эксклюзивным для IE;
oninput — это версия onpropertychange, отличная от браузера IE. Он поддерживает такие браузеры, как Firefox и Opera, но есть одно отличие. Когда он привязан к объекту, не все изменения свойств объекта могут вызывать события. значение объекта меняется. Это сработало.
Прекратите всплески событий
if (e) //Остановить всплывание событий e.stopPropagation();
иначе window.event.cancelBubble = true;
Выполните приведенный выше код и щелкните поле ввода, чтобы обнаружить, что onpropertychange также будет вызвано. Ввод значения также вызовет это событие. Это доказывает, что пока значение свойства будет изменено, это событие будет запущено.
Во-вторых, теперь, когда мы обнаружили эту функцию, возникнет проблема: иногда, когда мы хотим выполнить функциональную операцию при изменении значения поля ввода, нам также необходимо изменить пользовательский атрибут, поэтому onpropertychange будет запускаться дважды, это может не быть тем, кем мы хотим.
Просто догадайтесь: поскольку такой атрибут предоставлен, вы сможете узнать, какой атрибут был изменен. Попробуйте получить количество параметров и их содержимое.
XML/HTML-код
Скопируйте код кода следующим образом:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<тип сценария="текст/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
оповещение(аргументы.длина);
for(var i=0;i<arguments.length;i++){
предупреждение (аргументы [я]);
}
});
-->
</скрипт>
Выполнив приведенный выше код, вы обнаружите всплывающее окно 1 и [object], которое показывает, что событие передает только один параметр в функцию обратного вызова и имеет тип объекта.
Тогда давайте попробуем обойти этот объект.
XML/HTML-код
Скопируйте код кода следующим образом:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<тип сценария="текст/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(элемент var в o){
alert(item+":"+o[item]);
}
});
//-->
</скрипт>
Выполнив его, мы обнаруживаем, что атрибутов много, но если внимательно посмотреть, то можно найти такой атрибут: имя_свойства. Я думаю, каждый может догадаться о значении этого атрибута. Да, это используется для определения того, какой атрибут был изменен.
XML/HTML-код
Скопируйте код кода следующим образом:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<тип сценария="текст/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
оповещение (o.propertyName);
});
//-->
</скрипт>
Щелкните текстовое поле и введите значение соответственно, и вы увидите всплывающие окна myprop и value соответственно.
Возвращаясь к вопросу, с которого мы начали, нам нужно только определить, было ли изменено значение.
Давайте посмотрим на код непосредственно:
XML/HTML-код
Скопируйте код кода следующим образом:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<тип сценария="текст/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //Не выполнять следующие операции, пока значение не изменится
//.....Обработка функции
});
//-->
</скрипт>