标签:rem ati 键盘按键 move 方法 鼠标 any 开始 off
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
事件对象 封装了所有的事件的相关的信息 ,当事件发生时,自动创建
DOM中一个事件的发生 三个阶段
1.捕获
由外到内,记录各级父元素上绑定的相同的事件
2.目标触发
首先触发目标元素上的事件处理函数
3.冒泡
按照捕获顺序,反向执行,由内到外,一次触发各级父元素绑定的事件处理函数
Event
1.在HTML中绑定 <ANY onclick="alert(‘hello world‘);"
这种是直接在HTML中绑定事件
2.为事件属性赋值一个函数:
document.getElementsByTagName("div")[0].onclick = fun;
function fun(){
alert("hello world!");
}
这种是写在JS里先获取到元素在为其绑定事件
3.addEventListener
ANY.addEventListener("事件名",fun , capture)
apture:是否在捕获阶段提前触发,默认是false 控制事件触发的顺序
ANY.removeEventListener("事件名",fun , capture)
function shoot1 () {
console.log(‘发射的是普通子弹‘);
}
function shoot2 () {
console.log(‘发射的是跟踪导弹‘);
}
事件监听,也是写在JS中
事件有一个冒泡,前面提到过在事件开始之前会有一个捕获阶段,那么冒泡就是根据捕获的方向顺序触发事件。
通过设置事件监听中的capture属性,将其改成true可以让其先触发
获取事件对象以及取消冒泡的方法:
事件对象 当事件发生时,自动创建的,封装所有事件信息的一个对象
获取:
DOM标准:事件对象默认作为事件处理函数的第一个参数传入
function 处理函数(e/event){
这个e就是在事件发生时,自动获得的事件对象
}
IE8:
在全局window,定义了一个event
function 处理函数(){
window.event
}
兼容:function 处理函数(e){
e = e || window.event;
取消冒泡:
DOM标准:e.stopPropagation();
IE8:e.cancelBubble = true;
兼容: if(e.stopPropagation())
e.stopPropagation()
else
e.cancelBubble = true;
最后写下获取事件坐标的方法
document.getElementById("box").onclick = function (e) {
console.log(‘相对于屏幕的:‘,e.screenX,e.screenY );
console.log(‘相对于文档显示区:‘,e.clientX,e.clientY );
console.log(‘相对于div:‘,e.offsetX,e.offsetY );
}
标签:rem ati 键盘按键 move 方法 鼠标 any 开始 off
原文地址:https://www.cnblogs.com/yzxyzx/p/11436721.html