一、事件对象:当事件触发时会有一个包含所有事件信息的对象产生event;
获取event的方式:
1.可以采用传参的方式 box.onclick = function (a) { console.log(a); } 2.可以直接输出event console.log(event); 3.在非IE浏览器下 默认值是 undefined console.log(event);
二、常用属性
1.type: 描述:获取当前事件的类型 语法:event.type; 例子: box.onclick = function (event) { console.log(event.type); }; document.body.onkeydown = function (event) { console.log(event) console.log(event.type); }; 2.bubbles 描述:判断当前事件是否支持冒泡 语法:event.bubbles 例子: box.onclick = function (event) { console.log(event.bubbles); }; box.onmouseenter = function (event) { console.log(event.bubbles); } 注意:支持 返回true 不支持返回false 3.eventPhase: 描述:事件传导至【当前节点】时处于什么的状态。 语法:event.eventPhase 1:事件处于捕获状态 2:事件处于真正的触发者 3:事件处于冒泡状态 例子: box.onclick = function (event) { console.log('box',event.eventPhase);//2 }; div1.onclick = function (event) { console.log('div1',event.eventPhase);//3 }; box.addEventListener('click', function (event) { console.log('box',event.eventPhase);//2 },true); div1.addEventListener('click', function (event) { console.log('div1',event.eventPhase) },true); 4.target/currentTarget ***** 描述:获取当前事件的触发者和监听者 语法: event.target/event.currentTarget 例子: box.addEventListener('click', function (event) { console.log('box', event.target); console.log('box', event.currentTarget); }); div1.addEventListener('click', function (event) { console.log('div1', event.target); console.log('div1', event.currentTarget); }); 注意: 1.如果是事件触发者 来调用currentTarget 那么当前节点既是事件真正的触发者也是 监听者 2.如果事件传导至某个节点 那么 event.target:指向真正触发该事件的元素 event.currentTarget:当前节点
三、常用方法
1.stopPropagation() 描述:阻止事件传到至下一个节点 语法:event.stopPropagation(); 例子: box.onclick = function (event) { console.log('box被点击了'); event.stopPropagation(); }; document.body.onclick = function () { console.log('body被点击了'); }; document.body.addEventListener('click', function (event) { console.log('body被点击了'); event.stopPropagation(); },true); box.addEventListener('click', function (event) { console.log('box被点击了'); },true); 注意:不仅可以阻止冒泡而且可以阻止捕获 2.preventDefault(): 描述:取消节点默认行为 语法:event.preventDefault() 例子: var a = document.querySelector('a'); a.onclick = function (event) { //cancelable 判断是否可以取消节点默认行为; console.log(event.cancelable); event.preventDefault(); };