propertychange/input事件

propertychange/input事件

在阅读代码时，看到input事件(webkit下), 搜索后得之在IE下有对应的propertychange事件。
事件,在[type=text]等中使用, 类似(但不同于)keyup事件.
HTML代码：

<label for="change">Change</label><br />
<input type="text" id="change" name="change" autocomplete="off" />
<br />
 
<label for="input">Input/propertyhange</label><br />
<input type="text" id="input" name="input" autocomplete="off" />
 
<br />
<button id="rand-change">Rand-change</button>
<button id="rand-input">Rand-input</button>
<button id="clear">Clear</button>
 
<br />
<label for="result">result</label><br />
<input type="text" id="result" name="result" autocomplete="off" />

JavaScript代码_后面要使用到的addEvent方法:

//base层
var addEvent = function ( obj, type, fn ) {
	if ( obj.attachEvent ) {
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
		obj.attachEvent( 'on' + type, obj[type+fn] );
	} else
		obj.addEventListener( type, fn, false );
}

把JavaScript代码，分开书写，更直观 更容易读懂。
JavaScript代码, Change模块:

//change模块
var change = document.getElementById('change');
function change_set(key){
	if(key === 'rand'){
		change.value = Math.random();
		return;
	}
	change.value = key;
}
 
addEvent(change, 'change', function(){
	result_show(change.value);
});

JavaScript代码, input/propertychange事件触发模块

//input模块
var input = document.getElementById('input');
function input_set(key){
	if(key === 'rand'){
		input.value = Math.random();
	}else{
		input.value = key;
	}
 
	/**
	 firefox 使用 DOMAttrModified方法, 让模拟IE中的 propertychange效果.(为了体验 DOMAttrModified)
	*/
	input.setAttribute('data-rand', Math.random());
 
	/**
	(为了让浏览器具有相同功能)
	*/
	//result_show(input.value);
}
 
addEvent(input, 'input', function(){
	result_show(input.value);
});
addEvent(input, 'propertychange', function(){
	result_show(input.value);
});
addEvent(input, 'DOMAttrModified', function(){
	result_show(input.value);
});

在使用JS DOM来改变表单中的值时，input/propertychange事件也会被触发.
JavaScript随机处理模块.

//随机模块
var rand_change = document.getElementById('rand-change');
addEvent(rand_change, 'click', function(){
	change_set('rand');
});
var rand_input = document.getElementById('rand-input');
addEvent(rand_input, 'click', function(){
	input_set('rand');
});
 
//清除模块
var clear = document.getElementById('clear');
addEvent(clear, 'click', function(){
	change_set('');
	input_set('');
	result_show('');
});

JavaScript结果展示模块：

//结果模块
var result = document.getElementById('result');
function result_show(value){
	result.value = value;
}

此事件和keyup事件不同, 在于当用户按下某键 不松时， 不会触发keyup事件.