在做图片编辑器的实验时，涉及到了表单重置的问题，而我使用的是jQuery实现的，HTML的代码如下：
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min=0 max=100 value=0>
</p>
<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min=0 max=10 value=0>
</p>
<p>
<label for="br">Brightness</label>
<input id="br" name="br" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min=0 max=360 value=0>
</p>
<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
</p>
<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min=0 max=100 value=0>
</p>
<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
</p>
<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
</p>
<input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
一开始我用的是以下这样的方法来重置的同时执行一个恢复函数：
$("#imageEditor").on('reset',function(){
setTimeout(function(){
editImage();
},0);
});
运行之后发现表单上的数据重置了，但是里面的函数并没有执行。我上网查了，发现在input中设置了type为reset，就创建了一个Reset对象，只要点击一下input，就会执行重置函数reset()。
经过修改我将input里面的type改为button，然后为button绑定一个点击事件，这样就可以同时执行两个函数了，代码如下：
$("#reset").click(function(){
$("#imageEditor").reset();
editImage();
});
需要注意的是reset()方法只使用于表单对象form。
结果浏览器报出的错误是：
("#imageEditor").reset() is not a function;
我上网查了一下reset()方法的使用，发现reset()方法只有在javascript中才有效的，在jQuery里面是没有这个方法，所以我做了以下改变：
$("#reset").click(function(){
document.getElementById("imageEditor").reset();
editImage();
});
结果出现了这样的错误：
reset() is not a function
我再次上stackoverflow查询了同样的问题，他们的答案是：
the reason might be an element which has reset as name or id. I faced same issue.
Naming any element as reset overrides reset() function.
就是有元素的名字或者id取为了reset，经过我的修改，以下代码：
$("#reset1").click(function(){
console.log("111");
document.getElementById("imageEditor").reset();
editImage();
});
这次在重置按钮的同时，就可以执行后面定义的函数了。
