创建自定义事件（Addingcustomdata-CustomEvent()）老式方式（old-fashionedway）事件冒泡（eventbubbling）动态创建和派发事件（creatinganddispatchingeventsdynamically）触发内置事件（Triggering内置事件）Vue项目热图实战（为iView的Table组件的TableCellDOM元素创建并触发事件，动态增删类实现热图过滤）创建创建自定义事件varevent=newEvent('build');//监听event.elem.addEventListener('build',function(e){/*...*/},false);//调度event.elem.dispatchEvent(event);IE是个好东西，需要参考老套的事件创建方式。添加自定义数据（Addingcustomdata-CustomEvent()）CustomEvent()可以通过detail属性为事件添加数据。varevent=newCustomEvent('build',{detail:"foo"});elem.addEventListener('build',function(e){console.log(e.detail)});老式方式（old-fashionedway）//创建事件.varevent=document.createEvent('Event');//定义事件名称为'build'.event.initEvent('build',true,true);//监听event.elem.addEventListener('build',function(e){//e.target匹配elem},false);//target可以是任何Element或其他EventTarget.elem.dispatchEvent(事件）;事件冒泡(eventbubbling)从子元素触发事件，祖先元素捕获它，可选地传入数据。提前创建自定义事件。
constform=document.querySelector('form');consttextarea=document.querySelector('textarea');//创建一个新事件，允许冒泡，并提供你想传递给“detail”属性的任何数据consteventAwesome=newCustomEvent('awesome',{bubbles:true,detail:{text:()=>textarea.value}});//表单元素监听自定义“awesome”事件，然后控制传递的text()方法的输出form.addEventListener('awesome',e=>console.log(e.detail.text()));//当用户键入时，文本区域在表单内部调度/触发事件触发，并使用自身作为起点触发时才创建自??定义事件。constform=document.querySelector('form');consttextarea=document.querySelector('textarea');form.addEventListener('awesome',e=>控制台.log(e.detail.text()));textarea.addEventListener('input',function(){//即时创建和分派/触发事件//注意：可选地，我们还利用了“函数表达式”（而不是“箭头函数表达式”）所以“this”将代表元素this.dispatchEvent(newCustomEvent('awesome',{bubbles:true,detail:{text:()=>textarea.value}}))});触发内部事件functionsimulateClick(){varevent=newMouseEvent('click',{view:window,bubbles:true,cancelable:true});varcb=document.getElementById('checkbox');varcanceled=!cb.dispatchEvent(事件);if(cancelled){//一个名为preventDefault的处理程序。警报（“已取消”）；}else{//没有一个处理程序调用了preventDefault。警惕t("未取消");}}Vue项目热图实战为iView的Table组件TableCellDOM元素创建并触发事件，动态增删类实现热图过滤methods:{//表订阅事件tdSubscribe(){this.$nextTick(()=>{//获取类以blue-alpha开头的所有表单元格this.tableCells=document.querySelectorAll('td[class^="blue-alpha"]');this.tableCells.forEach((cell)=>{cell.addEventListener('toggleCell',(e)=>{if(e.detail){e.target.classList.add('隐藏单元格');}else{e.target.classList.remove('隐藏单元格');}});});});},//表格触发事件tdTrigger(range){this.tableCells.forEach((cell)=>{constcellValue=parseInt(cell.innerText);constrangeMin=range[0];constrangeMax=range[1];consthiddenCtrl=cellValue