`

JS中手动触发事件的方法

 
阅读更多

   如果大家将一张网页看成一个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');
  }

分享到:
评论

相关推荐

    js 绑定带参数的事件以及手动触发事件

    这里主要讨论如何在JavaScript中绑定带参数的事件以及如何手动触发这些事件。通过示例代码,我们可以看到一个简单的选项卡切换效果,其中涉及到DOM操作、事件监听和事件触发。 首先,我们看HTML部分,这里有四个...

    在Internet Explorer 11、10、9中手动触发JavaScript事件

    本文将深入探讨如何在这些版本的IE浏览器中通过JavaScript来手动触发事件,同时保持跨浏览器的兼容性。 首先,理解事件触发的基本概念。在JavaScript中,我们可以使用`addEventListener`和`removeEventListener`...

    AJAX中不触发javascript事件

    另一种方法是使用jQuery或者其他JavaScript库提供的AJAX函数,如$.ajax(),这样可以更好地控制请求和响应过程,包括在请求前后手动触发JavaScript事件。 在处理导航,如菜单点击时,AJAX面临着挑战。传统的超链接会...

    js触发onchange事件的方法说明

    本文将详细解释如何在JavaScript代码中触发onchange事件,并提供兼容不同浏览器的方法。 首先,让我们来理解onchange事件的基本概念。onchange事件通常绑定在输入类型控件上,如、、等。当用户输入或者通过程序改变...

    JQuery自动触发事件的方法

    在现代Web开发中,使用JQuery自动触发事件是一个非常有用的技巧,可以帮助开发者模拟用户的交互行为,而无需用户手动去触发相应的事件。JQuery作为一款强大的JavaScript库,提供了多种方法来帮助开发者轻松实现这一...

    js 触发select onchange事件代码

    其次,在页面加载完成后,我们使用JavaScript代码给省份的select元素赋值,然后通过调用该元素的fireEvent方法来手动触发onchange事件。这样做的好处是可以在不改变用户界面的情况下,实现后台逻辑与前端界面的同步...

    laydate时间控件及触发时间校验事件

    本篇将深入探讨laydate时间控件的使用方法以及如何触发时间校验事件。 ### 1. laydate时间控件的基本使用 laydate的引入通常需要下载对应的JS和CSS文件,将其引入到HTML页面中。在HTML中创建一个元素作为日期选择...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式,我们可以根据实时数据创建表格,并允许用户与表格中的数据进行交互。这不仅使页面变得更加...

    creator 手动发射事件

    手动发射事件是指开发者在代码中主动触发一个事件,以便通知其他对象某个动作或状态变化的发生。在Cocos Creator中,你可以使用`cc.eventManager.dispatchEvent`方法来实现这一功能。该方法通常包含两个参数:一个是...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    根据提供的内容,文章介绍了一种解决该问题的方法,即通过`document.createElement`创建新元素后,手动将事件处理函数赋值给元素的onclick属性,并使用`eval`函数执行这段代码。尽管这种方法可以工作,但使用`eval`...

    js监听键盘事件的方法_原生和jquery的区别详解.docx

    ### JS监听键盘事件的方法:原生与jQuery的区别详解 #### 一、引言 JavaScript (JS) 是一种广泛使用的编程语言,特别是在Web开发领域。它提供了丰富的API来处理各种用户交互,包括监听键盘事件。监听键盘事件对于...

    【JavaScript源代码】详解CocosCreator系统事件是怎么产生及触发的.docx

    这些方法允许开发者添加、移除事件监听器以及手动触发事件。 `callbacks-invoker.js`中的`CallbacksInvoker`类则负责事件的实际触发。当一个事件被触发时,`CallbacksInvoker`会按照一定的顺序调用已注册的回调函数...

    在程序中调用下拉框改变事件.

    在上面的C#示例中,我们通过手动触发`ddlCourse_SelectedIndexChanged`事件来模拟用户的选择行为。但是需要注意的是,这种方法可能导致无限循环,因为每次触发事件都可能会再次调用该方法。为了避免这种情况,可以在...

    JS代码触发事件代码实例

    2. **手动触发事件** 当我们需要在不依赖用户交互的情况下触发事件时,可以使用JavaScript的`dispatchEvent`方法。这个方法允许我们创建并派发一个自定义的事件,使得与事件相关的处理程序被调用。例如,上述代码中...

    js事件触发操作实例分析

    通过`dispatchChange`函数,我们可以手动触发`change`事件,使得`<div>`的内容在页面加载时即更新为默认选中的`<option>`文本。 在实际开发中,理解事件触发机制并熟练掌握其用法非常重要,这有助于创建更丰富的...

    element-ui中select组件绑定值改变,触发change事件方法

    本文将详细解析Element UI中select组件绑定值改变时如何触发change事件的方法。 Element UI是一个基于Vue.js的前端UI框架,它提供了一套完整的组件库以帮助开发者快速构建美观、风格统一的界面。select组件是其中...

    柱状图echarts图表及点击事件

    在ECharts中,我们可以使用`on`方法监听图表的`click`事件,当用户点击柱子时触发自定义的回调函数。这个函数会接收到事件对象,其中包含了点击的具体信息,如系列名、数据索引等,以便我们可以根据这些信息执行相应...

    NativeJS随记 - 浅析JavaScript Events

    2. **事件触发**:通过`dispatchEvent`方法可以手动触发一个事件,这在模拟事件或测试中非常有用。 3. **事件传播**:事件传播分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件从最外层元素向目标元素传递(捕获...

Global site tag (gtag.js) - Google Analytics