参考: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>