javascript事件触发器fireEvent和dispatchEvent

àì夳堔傛蜴生んèń 2021-06-26 16:06 466阅读 0赞

事件触发器就是用来触发某个元素下的某个事件，IE下`fireEvent`方法，高级浏览器（`chrome,firefox`等）有`dispatchEvent`方法。

一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如`click，mouseover，load`等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下`fireEvent`方法，高级浏览器（`chrome,firefox`等）有`dispatchEvent`方法。

例如在ie下看看这个例子：

//document上绑定自定义事件ondataavailable
    document.attachEvent('ondataavailable', function (event) { 
    alert(event.eventType);
    });
    var obj=document.getElementById("obj");
    //obj元素上绑定click事件
    obj.attachEvent('onclick', function (event) { 
    alert(event.eventType);
    });
    //调用document对象的createEventObject方法得到一个event的对象实例。
    var event = document.createEventObject();
    event.eventType = 'message';
    //触发document上绑定的自定义事件ondataavailable
    document.fireEvent('ondataavailable', event);
    //触发obj元素上绑定click事件
    document.getElementById("test").onclick = function () { 
    obj.fireEvent('onclick', event);
    };

再看看高级浏览器（`chrome,firefox`等）的例子：

//document上绑定自定义事件ondataavailable
    document.addEventListener('ondataavailable', function (event) { 
    alert(event.eventType);
    }, false);
    var obj = document.getElementById("obj");
    //obj元素上绑定click事件
    obj.addEventListener('click', function (event) { 
    alert(event.eventType);
    }, false);
    //调用document对象的 createEvent 方法得到一个event的对象实例。
    var event = document.createEvent('HTMLEvents');
    // initEvent接受3个参数：
    // 事件类型，是否冒泡，是否阻止浏览器的默认行为
    event.initEvent("ondataavailable", true, true);
    event.eventType = 'message';
    //触发document上绑定的自定义事件ondataavailable
    document.dispatchEvent(event);
    var event1 = document.createEvent('HTMLEvents');
    event1.initEvent("click", true, true);
    event1.eventType = 'message';
    //触发obj元素上绑定click事件
    document.getElementById("test").onclick = function () { 
    obj.dispatchEvent(event1);
    };

在实际封装中没这么简单，看了一下`jQuery.event.trigger`的源码，是通过模拟来实现了，给某元素绑定一个事件处理函数，如果有触发事件的实际操作就会执行相应的事件处理函数，所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。