自定义事件与触发 Event()

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
浏览器支持：

Event() 构造函数, 创建一个新的事件对象 Event。

语法

new Event(type, option);

参数说明：

• type 是DOMString 类型，表示所创建事件的名称。
• option 可设置以下属性：
  bubbles 默认值为 false，表示该事件是否冒泡。
  cancelable 默认值为 false， 表示该事件能否被取消。
  composed 默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。

自定义一个 look 事件，然后触发这个事件：

// 创建一个支持冒泡且不能被取消的look事件
var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

// 事件可以在任何元素触发，不仅仅是document
myDiv.dispatchEvent(ev);

示例

例1：模拟键盘按下空格键

//页面上绑定的键盘按下事件	
document.onkeydown = function(e){
	console.log('按下了键盘')
	if(e.keyCode == 32){
		console.log('按下了: 空格键')
	}
	if(e.altKey && e.keyCode == 32){
		console.log('按下了: alt+空格键')
	}	
	if(e.altKey && e.shiftKey && e.keyCode == 32){
		console.log('按下了: alt+shift+空格键')
	}
}

var ev = new Event('keydown');
document.dispatchEvent(ev)
/*情况1--控制台输出
按下了键盘
*/

var ev = new Event('keydown');
ev.which = ev.keyCode = 32;    //空格键键码
document.dispatchEvent(ev)
/*情况2--控制台输出
按下了键盘 
按下了: 空格键
*/


var ev = new Event('keydown');
ev.which = ev.keyCode = 32;    //空格键键码
ev.altKey = true;
document.dispatchEvent(ev)
/*情况3--控制台输出
按下了键盘
按下了: 空格键
按下了: alt+空格键
*/

var ev = new Event('keydown');
ev.which = ev.keyCode = 32;    //空格键键码
ev.altKey = true;
ev.shiftKey = true;
document.dispatchEvent(ev)
/*情况4--控制台输出
按下了键盘
按下了: 空格键
按下了: alt+空格键
按下了: alt+shift+空格键
*/

ctrlKey 若为true, 表示 ctrl 键被按下
altKey 若为true, 表示 alt 键被按下
shiftKey 若为true, 表示 shift 键被按下
metaKey 若为true, 表示 meta 键被按下(WIN中的window标志键，MAC中的小花瓣键)

例2：事件冒泡处理

<textarea id="text">textarea>

<script type="text/javascript">
var text = document.getElementById('text');
text.onkeydown = function(e){		
	if(e.keyCode == 32){
		console.log('文本域中按下了空格键')
	}
}	
document.onkeydown = function(e){
	if(e.keyCode == 32){
		console.log('页面按下了空格键')
	}
}

var ev = new Event('keydown');
ev.which = ev.keyCode = 32;    //空格键键码
text.dispatchEvent(ev)		   //只触发文本域上的键盘按下事件
/*默认触发的事件是不冒泡的，控制台输出：
文本域中按下了空格键
*/

var ev = new Event('keydown',{ bubbles:true });
ev.which = ev.keyCode = 32;    //空格键键码
text.dispatchEvent(ev)		   //只触发文本域上的键盘按下事件
/*设置触发的事件冒泡，控制台输出：
文本域中按下了空格键
页面按下了空格键
*/
script>

例3：自定事件并绑定到元素

<textarea id="text">textarea>

<script type="text/javascript">
var text = document.getElementById('text');

text.addEventListener('look',function(){
	console.log('自定义事件绑定在 textarea 元素上')
},false);
document.addEventListener('look',function(){
	console.log('自定义事件绑定在 document 上')
},false);

var ev = new Event('look');

text.dispatchEvent(ev);       //触发 textarea 上的 look 事件
document.dispatchEvent(ev);   //触发 document 上的 look 事件
script>

例4：模拟鼠标移动到指定位置

<div id="box" style="width: 300px;height: 200px;">div>

<script>
var box = document.getElementById('box');
box.onmousemove = function(e){
	if(e.offsetX>150 && e.offsetY>100){
		box.style.background = 'blue'
	}else{
		box.style.background = '#fff'
	}
}

var ev = new Event('mousemove');
ev.offsetX = 200;
ev.offsetY = 150;
box.dispatchEvent(ev);	   //触发事件后box背景变成了蓝色
script>