如果大家将一张网页看成一个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.getElementByIdx_x('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.getElementByIdx_x('someID');
if( document.createEvent )
{
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'mousemove', true, false );
fireOnThis.dispatchEvent(evObj);
}
else if( document.createEventObject )
{
fireOnThis.fireEvent('onmousemove');
}
- 浏览: 196906 次
文章分类
最新评论
发表评论
-
不会Object.defineProperty你就out了
2017-12-05 09:30 521http://imweb.io/topic/56d40adc ... -
avalon如何在兼容ie的情况下做到双向绑定呢?
2017-12-05 09:37 1202avalon可以兼容到ie6,貌似它的双 ... -
前端设备指纹
2017-09-05 19:33 2886前端设备指纹的生成,可使用fingerprintjs2 ... -
JS中document.execCommand()的用法
2016-08-14 12:36 825document.execCommand()方法处理Htm ... -
Javascript标准DOM Range操作
2016-08-13 16:40 17992级DOM定义了一个createRange()方法,如果是 ... -
js 中的selection对象使用笔记+光标定位
2016-08-13 15:39 8908IE:document.selection Fir ... -
require.js模块加载器的基本用法
2016-02-01 17:44 688require.js是一种基于AMD ... -
JS中的双向数据绑定及Object.defineProperty方法
2016-08-13 15:42 551缘起 前几天在看一些流行的迷你mvvm框架(比如 ava ... -
window.onload、DOMContentLoaded和$(document).ready()
2016-01-15 14:43 865<html xmlns="http://ww ... -
JS中浮点数运算误差处理
2015-10-22 16:11 1222先来个简单的代码片段: > console.log ... -
动画缓动效果
2015-06-30 09:54 708<!DOCTYPE html> <ht ... -
这些年,我收集的JavaScript代码(一)
2015-06-08 09:12 492一、取URL中的参数 function getPara ... -
javascript oop编程 — 实现继承的三种形式(3)
2015-05-26 15:27 553工厂制造新对象这个继承的想法相对简单,就是你需要什么 工厂制造 ... -
javascript oop编程 — 实现继承的三种形式(2)
2015-05-26 15:27 508借助另一个函数的过程,修改他的context来实现,假设两个类 ... -
javascript oop编程 — 实现继承的三种形式(1)
2015-05-26 15:24 729(1)模拟类的方式, 我们都知道js是原型继承机制,不存 ... -
JavaScript内存优化
2015-03-17 17:55 817相对C/C++ 而言,我们所用的JavaScript 在内存 ... -
js 中 document.createEvent的用法-转载
2014-03-13 14:48 1056<a class="comment-mod& ... -
本地图片上传即时预览
2013-10-28 20:25 767// 图片预览功能var preivew = functi ... -
如何用JavaScript标准语法,取代jQuery的一些主要功能
2013-06-08 13:41 844一、选取DOM元素 jQuery的核心是通过各种选择器,选中 ...
相关推荐
这里主要讨论如何在JavaScript中绑定带参数的事件以及如何手动触发这些事件。通过示例代码,我们可以看到一个简单的选项卡切换效果,其中涉及到DOM操作、事件监听和事件触发。 首先,我们看HTML部分,这里有四个...
本文将深入探讨如何在这些版本的IE浏览器中通过JavaScript来手动触发事件,同时保持跨浏览器的兼容性。 首先,理解事件触发的基本概念。在JavaScript中,我们可以使用`addEventListener`和`removeEventListener`...
另一种方法是使用jQuery或者其他JavaScript库提供的AJAX函数,如$.ajax(),这样可以更好地控制请求和响应过程,包括在请求前后手动触发JavaScript事件。 在处理导航,如菜单点击时,AJAX面临着挑战。传统的超链接会...
本文将详细解释如何在JavaScript代码中触发onchange事件,并提供兼容不同浏览器的方法。 首先,让我们来理解onchange事件的基本概念。onchange事件通常绑定在输入类型控件上,如、、等。当用户输入或者通过程序改变...
在现代Web开发中,使用JQuery自动触发事件是一个非常有用的技巧,可以帮助开发者模拟用户的交互行为,而无需用户手动去触发相应的事件。JQuery作为一款强大的JavaScript库,提供了多种方法来帮助开发者轻松实现这一...
其次,在页面加载完成后,我们使用JavaScript代码给省份的select元素赋值,然后通过调用该元素的fireEvent方法来手动触发onchange事件。这样做的好处是可以在不改变用户界面的情况下,实现后台逻辑与前端界面的同步...
本篇将深入探讨laydate时间控件的使用方法以及如何触发时间校验事件。 ### 1. laydate时间控件的基本使用 laydate的引入通常需要下载对应的JS和CSS文件,将其引入到HTML页面中。在HTML中创建一个元素作为日期选择...
本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式,我们可以根据实时数据创建表格,并允许用户与表格中的数据进行交互。这不仅使页面变得更加...
手动发射事件是指开发者在代码中主动触发一个事件,以便通知其他对象某个动作或状态变化的发生。在Cocos Creator中,你可以使用`cc.eventManager.dispatchEvent`方法来实现这一功能。该方法通常包含两个参数:一个是...
根据提供的内容,文章介绍了一种解决该问题的方法,即通过`document.createElement`创建新元素后,手动将事件处理函数赋值给元素的onclick属性,并使用`eval`函数执行这段代码。尽管这种方法可以工作,但使用`eval`...
### JS监听键盘事件的方法:原生与jQuery的区别详解 #### 一、引言 JavaScript (JS) 是一种广泛使用的编程语言,特别是在Web开发领域。它提供了丰富的API来处理各种用户交互,包括监听键盘事件。监听键盘事件对于...
这些方法允许开发者添加、移除事件监听器以及手动触发事件。 `callbacks-invoker.js`中的`CallbacksInvoker`类则负责事件的实际触发。当一个事件被触发时,`CallbacksInvoker`会按照一定的顺序调用已注册的回调函数...
在上面的C#示例中,我们通过手动触发`ddlCourse_SelectedIndexChanged`事件来模拟用户的选择行为。但是需要注意的是,这种方法可能导致无限循环,因为每次触发事件都可能会再次调用该方法。为了避免这种情况,可以在...
2. **手动触发事件** 当我们需要在不依赖用户交互的情况下触发事件时,可以使用JavaScript的`dispatchEvent`方法。这个方法允许我们创建并派发一个自定义的事件,使得与事件相关的处理程序被调用。例如,上述代码中...
通过`dispatchChange`函数,我们可以手动触发`change`事件,使得`<div>`的内容在页面加载时即更新为默认选中的`<option>`文本。 在实际开发中,理解事件触发机制并熟练掌握其用法非常重要,这有助于创建更丰富的...
本文将详细解析Element UI中select组件绑定值改变时如何触发change事件的方法。 Element UI是一个基于Vue.js的前端UI框架,它提供了一套完整的组件库以帮助开发者快速构建美观、风格统一的界面。select组件是其中...
在ECharts中,我们可以使用`on`方法监听图表的`click`事件,当用户点击柱子时触发自定义的回调函数。这个函数会接收到事件对象,其中包含了点击的具体信息,如系列名、数据索引等,以便我们可以根据这些信息执行相应...
2. **事件触发**:通过`dispatchEvent`方法可以手动触发一个事件,这在模拟事件或测试中非常有用。 3. **事件传播**:事件传播分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件从最外层元素向目标元素传递(捕获...