一、什么是event
1.event是事件函数对象，内置对象的一种
CreateEvent（） 创建一个事件对象
OpenEvent（） 打开一个事件对象
SetEvent（） 设置指定的事件对象为有信号状态
WaitForSingleObject（） 等待一个事件
WaitForMultipleObjects（） 等待多个事件
WaitForMultipleObjects 函数原型：
WaitForMultipleObjects（
DWORD nCount, // 等待句柄数
CONST HANDLE *lpHandles, //指向句柄数组
BOOL bWaitAll, //是否完全等待标志
DWORD dwMilliseconds //等待时间
）
2.当触发某个事件，都会产生一个事件对象Event
<script type="text/javascript">
// 获取节点
var wrap=document.getElementById('wrap')；
// 可见事件函数里面有e参数，这个e对应的就是event对象，也可以缩写成ev，每个事件函数都有这个e
wrap.function(e)
{
var ev=e || window.event; //或语法，返回为真的值
console.log(ev);
// 2.事件对象点击所在的位置
//clientX和clientY,针对于浏览器视窗而言
console.log("clientX:"+ev.clientX+" "+"clientY:"+ev.clientY);
//offsetX和offsetY相对于自身而言
console.log("offsetX:"+ev.offsetX+" "+"offsetY"+ev.offsetY);
//screenX和screenY相对于显示屏
console.log("screenX:"+ev.screenX+" "+"screenY:"+ev.screenY);
//3.点击所对应的标签
console.log(ev.target);
}
</script>
- 事件通常与函数结合使用，函数不会在事件发生前被执行！
- event对象只在事件发生的过程中才有效。
- event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
二、event有什么用
1.event每个事件函数都有的内置对象，里面储存着事件发生之后的信息
2.我们可以根据这些信息做很多判断，或者是获取信息来显示
- clientX，clientY：返回当事件被触发时，鼠标指针相对于浏览器窗口可视文档区域的左上角的的水平x坐标和垂直y坐标；
- screenX，screenY：返回当某个事件被触发时，鼠标指针相对于显示器左上角的水平x坐标和垂直y坐标；
- offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；
- x,y/pageX,pageY：事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素；
- altKey，ctrlKey，metaKey，shiftKey：返回当事件被触发时，”ALT”、”TRL”、”meta”、”SHIFT”键 是否被按下；
- keyCode：返回keydown和keyup事件发生的时候按键的代码，以及keypress 事件的- Unicode字符(firefox2不支持 event.keycode，可以用 event.which替代 )；
- button：返回当onmousedown, onmouseup, 和 onmousemove 事件被触发时，哪个鼠标按钮被点击。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下（firefox中 0代表左键，1代表中间键，2代表右键）；
可能的值：
- 0 没按键
- 1 按左键
- 2 按右键
- 3 按左右键
- 4 按中间键
- 5 按左键和中间键
- 6 按右键和中间键
- 7 按所有的键
- type：事件的类型，如onlick中的click；
- srcElement/target：事件源，就是发生事件的元素；
- relatedTarget：返回与事件的目标节点相关的节点；
- fromElement,toElement：对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素，toElement引用移入鼠标的元素；
- currentTarget：返回其事件监听器触发该事件的元素；
- timeStamp：返回事件生成的日期和时间；
- eventPhase：返回事件传播的当前阶段，1表示捕获阶段，2表示处于目标，3表示冒泡阶段；
- detail：表示的是与事件相关的细节信息
- bubbles：返回布尔值，指示事件是否是起泡事件类型；
- cancelable：返回布尔值，表示是否可以取消事件的默认行为；
- cancelBubble：一个布尔属性，默认是false。把它设置为true的时候，将阻止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)
- returnValue：一个布尔属性，设置为false的时候可以阻止浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)
- defaultPrevented：表示是否调用了preventDefault()
- initEvent(eventType,canBubble,cancelable)：初始化新创建的 Event 对象的属性；
- preventDefault()： 通知浏览器不要执行与事件关联的默认动作；
- stopPropagation()：不再派发事件；
- attachEvent(eventType, fn),detachEvent()/addEventListener(事件类型, 回调函数, 事件机制)
- removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获。
- 在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；
- 突然这么大的信息量，可能不太容易接受，但是这个可以当作工具使用，当想获取到什么信息的时候可以查找对应的来使用
三、什么情况下使用用event
1.最常用的当然是阻止事件冒泡了
- 阻止事件冒泡:结合监听器addEventListener+event的stopPropagation方法
<script>
$btn=document.querySelector('#btn');
// 三个参数 1.事件名称 2.函数(监听器) 3.事件监听阶段-捕获阶段 冒泡阶段
// $btn.addEventListener('click',clickFun,false);
// function clickFun(ev) {
// console.log(ev);
// }
/*
添加点击事件,之前前面有on意思是绑定的意思,而现在add就是绑定的意思,所以不需要加on
false为冒泡,true为捕获
冒泡从里往外,比如儿子点击事件发生了,父级元素点击也可以发生
捕获从外往内,
*/
$btn.addEventListener('click',function(ev){
// 阻止事件冒泡 stopPropagation()
ev.stopPropagation();
alert('点击了btn');
},false);
$box=document.querySelector('#box');
$box.addEventListener('click',function(ev){
alert('点击了box');
},false);
// 这里会弹出两次,点击按钮的时候.这种现象就叫事件冒泡
</script>
2.小程序应用场景下,使用event来传递参数
html部分
<view bindtap='setId' data-index="{{index}}">点击</view>
js部分
Page({
data: {
index:'2'
},
// 事件传参，在事件后面设置data-index属性:data-后的自取,在通过event来获取传的参数
setId(e){
let index= e.currentTarget.dataset['index'];
console.log(index); // 2
},
})
- 这里演示的是传的动态参数，实用场景为遍历数组渲染根据点击传递当前点击对象的信息以获取后续详情
四、小总结
- event让事件更加丰富，功能更加多样性
- 使用技巧，根据所需功能百度了解获取所需信息的方法结合项目使用
- 不同场景下event的用法是不同的，我们需要去涉猎，遇到可以参照别人的来尝试