js 事件之 createEvent、dispatchEvent

//document上绑定自定义事件ondataavailable
document.addEventListener(‘customevent‘, 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("customevent", 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);
};
时间: 2024-10-18 00:40:36

js 事件之 createEvent、dispatchEvent的相关文章

原生js之document.createEvent建立自定义事件

document.createEvent用于创建事件, 在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型.DOM Level 3增加很多事件类型,个人觉得其中最有用的是CustomEvent自定义事件. 为DOM元素创建自定义事件的步骤为: 一.创建事件:var ev = document.createEvent('CustomEvent'); 二.初始化事件:ev.initCustomEvent('自定义事件名称', false(是否

js事件浅析

js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮');">点击这个按钮</button> 二. 属性绑定(DOM0级事件) 只能绑定一个函数 button.onclick = function() {}; 三. 事件监听函数(DOM2级事件) element.addEventListener(<event-name>, &

JS事件模型小结

08年年初的一篇blog,转到这个博客上,想想当年跨浏览器真是一座山: 前几天看dojo的文档,其中多次提到DOM2事件模型,以前学习这部分的内容,主要愤慨于IE的不兼容性了,现在对于DOM2事件模型的概念又有些模糊,所以翻出了js权威指南(V4)又复习了一下,简单作一小结.       JS权威指南中将JS事件模型分为四种            1.原始事件模型:属性事件处理模式            2.标准事件模型:DOM2对其作了标准化            3.IE事件模型(IE5.5

自定义事件的触发dispatchEvent

1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: document.createEvent() event.initEvent() element.dispatchEvent() 举个例子: var dom = document.querySelector('#id') document.addEventListener('alert', function (e

js事件冒泡和事件委托

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: 1 <ul class="clearfix" data-type="cityPick"> 2 <li class="active_sort_opts" data-id="0">全部</li> 3 <li data-id="88">纽约</li> 4 <

特殊js事件

1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQUERY表单ajax提交事件 1):添加js插件 2):添加js事件 function submitForm(){ $.ajax({ url:'${root}/doLogin', data:$('form').serialize(), dataType:'json', cache:false, ty

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

略谈js事件

 本人是这样从做学的js事件分成以下三个方面: 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift +

js事件的三个阶段

js事件的三个阶段分别为:捕获.目标.冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document IE6.0:   div---body---html---document Mozilla:div---body---html---document---window 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素