javascript 事件触发
http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
http://blog.csdn.net/jxst051665/article/details/3931598
早就和凌乱说好要发的一篇文章 由于最近工作实在太忙给耽搁了 以下就是抽了个半夜草草写的一点文字,请大家见谅. 主要讲解下方法,实例就不多写了 为大家起一个抛砖引玉的作用
如果大家将一张网页看成一个form的话,大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的,只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的,如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢?
为大家介绍js下的几个方法:
1. createEvent(eventType)
参数:eventType 共5种类型:
Events :包括所有的事件.
HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select',
'submit', 'unload'. 事件
UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
间接包含 MouseEvents.
MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved',
'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument',
'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
2. 在createEvent后必须初始化,为大家介绍5种对应的初始化方法
HTMLEvents 和 通用 Events:
initEvent( 'type', bubbles, cancelable )
UIEvents :
initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
MouseEvents:
initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY,
clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
MutationEvents :
initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue,
attrName, attrChange )
3. 在初始化完成后就可以随时触发需要的事件了,为大家介绍targetObj.dispatchEvent(event)
使targetObj对象的event事件触发
需要注意的是在IE 5.5+版本上请用fireEvent方法,还是浏览兼容的考虑
4. 例子
//例子1 立即触发鼠标被按下事件
var fireOnThis = document.getElementById('someID');
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
fireOnThis.dispatchEvent(evObj);
//例子2 考虑兼容性的一个鼠标移动事件
var fireOnThis = document.getElementById('someID');
if( document.createEvent )
{
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'mousemove', true, false );
fireOnThis.dispatchEvent(evObj);
}
else if( document.createEventObject )
{
fireOnThis.fireEvent('onmousemove');
}
javascript 事件触发的更多相关文章
- JS基础知识:Javascript事件触发列表
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...
- Javascript事件触发顺序
html标签是有子和父的,这个时候就出现了事件触发顺序的问题,比如: <!DOCTYPE html> <html> <head> <style> .fi ...
- JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
- 关于JavaScript的事件触发
突然知道JavaScript底层是怎么实现事件触发的,找到一个博客,功力不够,看的很迷糊,记载这里吧,后面再研究. [探讨]javascript事件机制底层实现原理
- js(javaScript)的各种事件触发,以常见为主eg:onclick
js的各种事件触发,以常见为主eg:onclick1.onclick,点击后触发事件 (1)<h1 onclick="this.innerHTML='谢谢!'">请点击 ...
- JavaScript事件代理和委托(Delegation)
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- JavaScript事件概览
JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript 事件
事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...
随机推荐
- [转载]memcached stats 命令
STAT pid 1552 STAT uptime 3792 STAT time 1262517674 STAT version 1.2.6 STAT pointer_size 32 STAT cur ...
- BZOJ1690: [Usaco2007 Dec]奶牛的旅行
1690: [Usaco2007 Dec]奶牛的旅行 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 552 Solved: 286[Submit][St ...
- 【转】一个FAE(AE)的体会和大家交流
原文网址:http://www.52rd.com/bbs/dispbbs.asp?boardID=63&ID=228682 本人在国内某芯片设计公司工作近5年时间岗位是AE和FAE,两个工作量 ...
- BNUOJ34990--Justice String (exkmp求最长公共前缀)
Justice String Given two strings A and B, your task is to find a substring of A called justice strin ...
- BeanstalkClient学习
针对BeanstalkClient-1.4.6.jar 生产者 示例代码: package com.lky.test; import java.io.UnsupportedEncodingExcept ...
- CSS常用操作-分类
- JDK版本错误:Unsupported major.minor version 51.0
错误原因 有时候把项目从本机编译文件部署到服务器,或者发给别人使用时,会报如下异常: java.lang.UnsupportedClassVersionError: test_hello_world ...
- 解决蛋疼的阿里云单CPU使用率的问题。
工作中涉及到阿里云的应用.在性能测试阶段,压测过程中只要一个CPU未使用满,第二个CPU以至于第三个和第四个CPU完全用不到. 后来和阿里云的同事沟通他们现在用的是单队列的网卡,只能靠RPS/RFS这 ...
- Nginx常见502错误
1.配置错误因为nginx找不到php-fpm了,所以报错,一般是fastcgi_pass后面的路径配置错误了,后面可以是socket或者是ip:port2.资源耗尽lnmp架构在处理php时,ngi ...
- ASP.NET MVC全局观
全局 首先我们来看一副图片,由于这幅图是我自己画的,不是摘自微软官方,所以如果有什么不到位的地方还望海涵! 首先,用户通过Web浏览器向服务器发送一条url请求,这里请求的url不再是xxx ...