JS模拟点击的那些事儿

在实际的应用开发中，我们会常常用到JS的模事件，但有时会遇到一些问题，比如说点击事件，就拿昨天我们麦子学院一个学员遇到的问题来说吧，点击表单外的“提交”按钮来提交表单。上代码吧。

Html:

Html代码 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif

1. <h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>  

2. <button id="btn">提交</button>  

3. <form action="#" method="get" id="form">  

4.   <input type="text" name="site" value="www.woiweb.net" readonly/>  

5.   <input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/>  

6. </form>  

Javscript:

Js代码 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif

1. <script type="text/javascript">  

2.   var sub = document.getElementById("subbtn");  

3.   var btn = document.getElementById("btn");  

4. //通用方法  

5. btn.onclick = function() {  

6. sub.click();  

7. }  

8. </script>  

经过测试，IE，FF，Chrome，Opera，Safari都没有问题，均可正常提交表单。

但在实际的设计中，为了让提交按钮更好看，buildder经常把它们用a标签来处理，加个背景图片来模拟按钮，我们仍然用上面的思路来尝试，增加一个a标签，让它来提交表单，我们仅修改html。

Html:

Html代码 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif

1. <h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>  

2. <button id="btn">提交</button>  

3. <form action="#" method="get" id="form">  

4.   <input type="text" name="site" value="www.woiweb.net" readonly/>  

5.   <!--<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/> -->  

6.   <a id="subbtn" href="javascript:;" onclick="alert('在此调用提交表单的方法')">模拟提交按钮</a>  

7. </form>  

Javascript:

Js代码 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif

1. <script type="text/javascript">  

2.   var sub = document.getElementById("subbtn");  

3.   var btn = document.getElementById("btn");  

4. //通用方法  

5. btn.onclick = function() {  

6. sub.click();  

7
c9a7
. }  

8. </script>  

运行后，问题出现了，IE、FF、Opera均OK，但Chrome和Safari不能正常运行，后来网上搜索了下，发现a标签并不是和按钮一样有onclick()事件的，解决办法是针对 IE 和 FF编写不同的逻辑，JS代码如下：
javascript:

Js代码 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif

1. <script type="text/javascript">  

2.   var sub = document.getElementById("subbtn");  

3.   var btn = document.getElementById("btn");  

4. //通用方法  

5. btn.onclick = function() {  

6.    //sub.click();  

7.    if (/msie/i.test(navigator.userAgent)) //IE  

8.    {  

9.       sub.fireEvent("onclick");  

10.   } else {  

11.      var e = document.createEvent('MouseEvent');  

12.      e.initEvent('click', false, false);  

13.      sub.dispatchEvent(e);  

14.   }  

15.}  

16.</script>  

至此，问题解决，虽然这个问题很简单，但很容易被大家忽略，贴出来和麦子学院的各位学员一起分享。

语法： 

createEvent(eventType)

[align=left]参数[/align]	[align=left]描述[/align]
[align=left]eventType[/align]	[align=left]想获取的 Event 对象的事件模块名。关于有效的事件类型列表，请参阅”说明”部分。[/align]

返回值

返回新创建的 Event 对象，具有指定的类型。

抛出

如果实现支持需要的事件类型，该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。

说明

该方法将创建一种新的事件类型，该类型由参数 eventType 指定。注意，该参数的值不是要创建的事件接口的名称，而是定义那个接口的 DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口：

[align=left]参数[/align]	[align=left]事件接口[/align]	[align=left]初始化方法[/align]
[align=left]HTMLEvents[/align]	[align=left]HTMLEvent[/align]	[align=left]iniEvent()[/align]
[align=left]MouseEvents[/align]	[align=left]MouseEvent[/align]	[align=left]iniMouseEvent()[/align]
[align=left]UIEvents[/align]	[align=left]UIEvent[/align]	[align=left]iniUIEvent()[/align]

用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event对象参考。

该方法实际上不是由 Document 接口定义的，而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块，那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。

参考资料：http://www.maiziedu.com/course/java/

原文地址：http://www.jz-net.cn/forum.php?mod=viewthread&tid=12435&extra=page%3D1