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

最新推荐文章于 2022-08-11 18:45:08 发布

Jsheng

最新推荐文章于 2022-08-11 18:45:08 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/lanjiasheng/article/details/84079226

Javascript 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在JavaScript环境下，通过`createEvent`、`initEvent`等方法来模拟鼠标事件，进而实现类似按键精灵的功能。具体介绍了如何触发鼠标点击、移动等事件，并提供了兼容不同浏览器版本的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

例子2

1. html部分

<div>
    <div id="tab">
        <h2>标题一</h2>
        <h2>标题二</h2>
        <h2>标题三</h2>
        <h2>标题四</h2>
    </div>
    <dl id="tabcon">
        <dd>内容一</dd>
        <dd>内容二</dd>
        <dd>内容三</dd>
        <dd>内容四</dd>
    </dl>
</div>

2. js部分

<script type="text/javascript" defer="defer">
var tab = document.getElementById("tab").getElementsByTagName("h2");
function swap(n) {
    return function() {
        for(var i=0; i<tab.length; i++) {
            document.getElementById("tabcon" + i).style.display = "none";
            document.getElementById("tab" + i).className = "";
        }
        document.getElementById("tabcon" + n).style.display = "block";
        document.getElementById("tab" + n).className = "focus";
    }
}
for(var i=0; i<tab.length; i++) {
    tab[i].setAttribute("id", "tab" + i);
    if(window.addEventListener) {
        tab[i].addEventListener("mouseover", swap(i), false);
    } else if(window.attachEvent) {
        tab[i].attachEvent("onmouseover", swap(i));
    }
}
var tabcon = document.getElementById("tabcon").getElementsByTagName("dd");
for(i=0; i<tabcon.length; i++) {
    tabcon[i].setAttribute("id", "tabcon" + i);
}
if(document.createEvent) {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( 'mouseover', true, false);
    tab[0].dispatchEvent(evObj);
} else if( document.createEventObject) {
    tab[0].fireEvent('onmouseover');
}
</script>