javascript 主动派发事件总结


Posted in Javascript onAugust 09, 2011

1,dispatchEvent()
这是标准的触发事件方法,使用时需要先创建好事件对象。如下

var evt = document.createEvent('Event'); 
evt.initEvent('click',true,true); 
element.dispatchEvent(evt);

2,fireEvent()
这是IE旧版本中实现的触发事件方法,它无须创建事件对象,直接使用。如下
element.fireEvent('onclick');

注意:与attachEvent一样它需要加上“on”
一个兼容性所有浏览器的版本,如下
var dispatch = window.addEventListener ? 
function(el, type){ 
try{ 
var evt = document.createEvent('Event'); 
evt.initEvent(type,true,true); 
el.dispatchEvent(evt); 
}catch(e){alert(e)}; 
} : 
function(el, type){ 
try{ 
el.fireEvent('on'+type); 
}catch(e){alert(e)} 
};

上面封装的是一个触发事件的通用方法,即可以触发各种事件。浏览器还提供了特定方法来触发单独的事件。
4,click()
用来模拟用户点击,除Safari/Chrome不支持非input/button外,其它浏览器都支持。
5,form.submit()
模拟form提交,相对于点击input[type=submit]
6,input/textarea.select()
模拟用户选定文本。
7,focus()
模拟获取光标焦点
8,blur()
模拟失去光标焦点
9,input/textarea/select.change()
模拟文本或选项发生变化
10,自定义事件的派发实际就是获取该函数,然后调用

相关:
https://developer.mozilla.org/En/DOM/Element.dispatchEvent
http://msdn.microsoft.com/en-us/library/ms536423%28v=VS.85%29.aspx
https://developer.mozilla.org/en/DOM/Input.select 

Javascript 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
input 高级限制级用法
Mar 26 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
JsDom 编程小结
Aug 09 #Javascript
IE 当eval遇上function的处理
Aug 09 #Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 #Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 #Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 #Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
JavaScript继承方式实例
2010/10/29 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
20招让你的Python飞起来!
2016/09/27 Python
Python如何调用外部系统命令
2019/08/07 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python3实现微型的web服务器
2019/09/03 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Django密码存储策略分析
2020/01/09 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
c++工程师面试问题
2013/08/04 面试题
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis