费舍尔视频背景音乐:由表单中onsubmit="return false;"想到的

来源:百度文库 编辑:九乡新闻网 时间:2024/04/29 07:04:33
javascript表单事件汇总
1. onabort(ns3,ns4,ie4):当用户终止正在打开的网页时产生该事件。
2. onblur(ns3,ns4,ie3,ie4):某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。
3. onchange(ns3,ns4,ie3,ie4):当网页上某元素的内容发生改变时产生。例如在文本框中输入文本后又在文本框外点击时就会产生。
4. onclick(ns3,ns4,ie3,ie4)单击网页上的某元素时产生
5. ondblclick(ns4,ie4):双击网页上的元素时产生
6. onerror(ns3,ns4,ie4):浏览器在打开网页的过程中发生错误时产生该事件
7. onfinish(ie4):滚动文本条中的文本完成一次滚动时产生的事件
8. onfocus(ns3,ns4,ie3,ie4)网页上的元素获得焦点时产生该事件
9. onkeydown(ns4,ie4)按下任意键时产生该事件
10. onkeypress(ns4,ie4)按下任意键时并释放该键产生的事件
11. onkeyup(ns4,ie4)释放按下的按键产生该事件
12. onload(ns3、4,ie3、4)网页或图象调入完成后产生该事件
13. onmousedown(ns4,ie4)在网页的某元素上按下鼠标时产生该事件
14. onmousemove(ie3、4)在网页的某元素上移动鼠标时产生该事件
15. onmouseout(ns3、4,ie4)从网页的某元素移出鼠标时产生该事件
16. onmouseover(ns3、4,ie3、4)鼠标移入网页的某元素时产生该事件
17. onmouseup(ns4,ie4)释放按下的鼠标时产生该事件
18. onreset(ns3、4,ie3、4)复位表格时产生该事件
19. onresize(ns4,ie4)改变浏览器时产生该事件
20. onselect(ns3、4,ie3、4)选择文本框中的文本时产生该事件
21. onstart(ie4)滚动文本条中的文本开始滚动时产生该事件
22. onsubmit(ns3、4,ie3、4)提交表单时产生该事件
23. onunload(ns3、4,ie3、4)从当前的网页退出时产生该事件
由表单中onsubmit="return false;"想到的
一:
由表单中onsubmit="return false;"想到的
众所周知,在表单中加上onsubmit="return false;"可以阻止表单提交。
下面是简单的一小段代码:
代码
Java代码 








大家判断像上面的写法,点击submit按钮该表单是否提交?
若答案为是,就不用往下看了。
若答案为否,错了。实际情况是表单正常提交,若想它不提交,应该将
代码
Java代码 


改为
代码
Java代码 


为何?
原来onsubmit属性就像是这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如
代码
Java代码 
onsubmit="
alert('haha'); // 内置函数
submitTest();  // 自定义函数
alert(this.tagName); // 用到了this关键词
......(任意多条语句)
return false;
"
onsubmit=" alert('haha'); // 内置函数 submitTest(); // 自定义函数 alert(this.tagName); // 用到了this关键词 ......(任意多条语句) return false;"
就相当于
代码
Java代码 
Form.prototype.onsubmit = function() {
alert('haha'); // 内置函数
submitTest();  // 自定义函数
alert(this.tagName); // 用到了this关键词
......(任意多条语句)
return false;
};
Form.prototype.onsubmit = function() { alert('haha'); // 内置函数 submitTest(); // 自定义函数 alert(this.tagName); // 用到了this关键词 ......(任意多条语句) return false;};
这样的话你就覆写了(override)其默认方法(默认返回true)
大家注意到方法体中可以用this这个关键词,这里即代表了的对象实例。
经过这样的分析后,以上情况就不难理解了:
代码
Java代码 


这样写,override方法的效果为:
代码
Java代码 
Form.prototype.onsubmit = function() {
submitTest();
};
Form.prototype.onsubmit = function() { submitTest();};
在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而
代码
Java代码 


override方法的效果为:
代码
Java代码 
Form.prototype.onsubmit = function() {
return submitTest();
};
Form.prototype.onsubmit = function() { return submitTest();};
这样,我们利用到了它的返回值,达到了预期效果。
这样理解的话我想印象会深刻得多,就不易出错了
结论:
我们可以用Java里的思维方式来思考模拟JavaScript中的类似情况(JavaScript中基于prototype的面向对象技术也确实是这样做的),但他们毕竟还是有本质上的区别,如Java是强类型的,有严格的语法限制,而JavaScript是松散型的。象上述方法:
代码
Java代码 
Form.prototype.onsubmit = function() {
};
Form.prototype.onsubmit = function() {};
既可以有返回值,又可以没有返回值,在Java里是通不过的,毕竟Java里面不能靠方法的返回值不同来重载(overload)方法,而JavaScript中的重载要松散得多。
二:
FORM onSubmit="return false"的作用
比如一个页面里有两个form,如下:
Java代码 




input name="" type="submit" value="提交" onclick="bian()" />

input name="" type="submit" value="提交" onclick="bian()" />

两个form里分别有一个type为submit的按扭
如果想按第二个按钮不想提交表单,只想执行bian()方法时,如果不用onsubmit="return false">就达不到效果,就会提交表单了!
而加上后就可以了!!
三:输入关键字后才可提交查询,否则重新输入
Java代码 

function checkfrom(){
if(document.form1.keyword.value==""){
alert("请您输入关键字!");
document.form1.keyword.focus();
return false;
}
return true;
}


关键字:


submit() 和 onsubmit() 的区别
在日常的开发中,往往在表单被提交之前需要加上验证(验证日期格式是否正确,验证某个input是否为空…),首先想到的就是 onsubmit事件,在一个submit类型按钮点击时,首先触发的就是form的onsubmit()事件。这时,我们就可以写上自己的验证。代码如下:



但是如果我们直接调用form的submit()事件,却不会执行onsubmit(),代码如下:
   ”>


我们如果想调用form的onsubmit事件只能通过调用,只有这样,才能执行这个事件:
   ”>


但是这样就失去了submit功效。也许我们可以用(attachEvent() / addEventListener() )模拟触发器的方式实现,语法如下(下面部分是转载内容……):
有时候当某一对象的某一事件被触发时,它所要执行的程序可能是一大串,有可能是要呼叫某一函数,也有可能同时又要呼叫另一函数。
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
在IE中使用addachEvent ,
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
Mozilla系列中需要使用 addEventListener
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
看看gmail的代码
var Ka=navigator.userAgent.toLowerCase();
var rt=Ka.indexOf("opera")!=-1;
var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt);
function Zl(a,b,c){if(r){a.attachEvent("on"+b,c)}else{a.addEventListener(b,c,false)}}