目录
1.srcElement (target)属性:返回的是目标对象
1.什么是事件对象(Event对象)
概念: Event 对象代表事件的状态,当DOM tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。)的对象,这个对象就是event(事件对象)。
2.Event事件对象的使用
1.事件对象的获取方式
1.直接通过event来获取
<body>
<div id="d1">666</div>
<script>
var d1 = document.querySelector("#d1")
d1.onclick = function () {
console.log(event);
};
</script>
</body>
2.通过函数传参数的形式。还可以通过函数传参数的形式来使用,一般而言我们使用【形参e或event】来代替。
<body>
<div id="d1">666</div>
<script>
var d1 = document.querySelector("#d1")
d1.onclick = function (e) {
console.log(e);
};
</script>
</body>
结果:
因为event对象是用来描述【发生的事件的信息】的,而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。
<button id="btn2">点我</button>
<script>
var btn2 = document.querySelector('#btn2');
btn2.addEventListener('click',(e)=>{
console.log(e); //PointerEvent{}
})
</script>
2.event中常用的属性和方法
1.type属性
type属性用来获得 当前触发事件的类型,此属性只读(不能进行修改操作)。
<body>
<div id="d1">666</div>
<script>
var d1 = document.querySelector("#d1")
d1.onclick = function () {
console.log(event);
console.log(event.type); // //依赖于事件的触发而存在,只读属性
};
</script>
</body>
2.target 属性和 currentTarget 属性
target:返回事件真正的触发者(事件的触发对象)
-
this
返回的是事件绑定对象
currentTarget:返回事件的监听者(触发的事件绑定到了哪个节点,就返回谁)
<body>
<div id="d1">d1
<div id="d2">d2</div>
</div>
<script>
document.getElementById("d1").onclick = function (e) {
console.log(e.target);
console.log(e.currentTarget);
};
</script>
</body>
分析:target返回的是触发点击事件使其发生的对象, 点击d2,返回的是<div id="d2">d2</div>,
currentTarget返回的是:触发的事件绑定到了哪个节点,就返回谁,触发的事件绑定到了d1那个节点,就返回d1。点击d1,target返回d1,currentTarget也返回d1
3.button属性
button 返回当事件被触发时,哪个鼠标按钮被点击。
注意:DOM3标准规定:click事件只能监听左键,mousedown和 mouseup事件来判断鼠标键按下和松开,event.button属性值来区分鼠标的按键,0/1/2
event.button=0|1|2
参数 描述
0 指定鼠标左键。
1 指定鼠标中键。
2 指定鼠标右键。
<div id="d1">点我</div>
<script>
var d1 = document.getElementById("d1");
d1.onmousedown = function(){
if(event.button == 0){
console.log('你按下了鼠标左键');
}
else if(event.button == 2){
console.log('你按下了鼠标右键');
}else{
console.log('你按下了其它键');
}
}
</script>
注意点:IE8 及更早IE版本有不同的参数:
参数 描述
1 指定鼠标左键。 (IE8及更早IE版本)
4 指定鼠标中键。 (IE8及更早IE版本)
2 指定鼠标右键。
3.key属性和keyCode属性
key是哪个键,返回的是按下的键的键名(键码)
keyCode返回keydown和keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符(ASCII码值);(firefox2不支持 event.keycode,可以用 event.which替代 )
4.获取当前坐标的属性
clientX clientY || x y :获取的是鼠标点击的位置距离窗口的左边和上边的距离
pageX pageY :获取到的是鼠标点击的位置距离整个页面内容的左边和上边的距离(不会计算滚动条的滚动距离)
offsetX offsetY :获取到的是鼠标点击的位置距离自身左边和上边的距离。
这些都是事件对象的属性。
5. bubbles属性
bubbles属性用来获得 当前触发事件的类型是否冒泡,如果当前事件类型支持冒泡则返回true,否则返回false。
必须注意的是:bubbles属性指的是该事件是否冒泡。和事件处理机制无关!!!!
<body>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div id="d1"></div>
<script>
document.getElementById('d1').onclick = function () {
console.log(event.bubbles); //true
};
document.getElementById('d1').addEventListener('mouseenter', function (e) {
console.log(event.bubbles); //false
});
</script>
</body>
分析:点击事件支持冒泡,所以返回true,鼠标移动事件mouseenter不支持冒泡,所以返回false。
6.eventPhase 属性
eventPhase:事件传导至【当前节点】时处于什么的状态。
1:事件处于捕获状态
2:事件处于真正的触发者
3:事件处于冒泡状态
7.event中常用的方法
stopPropgation():阻止冒泡。
preventDefault():默认阻止。
eg: 下面代码能够监测右键单击操作,并阻止发生默认行为。
document.onclick = function (e) {
var e = e || window.event; //标准化事件对象
if (e.button == 2) {
e.preventDefault();
return false;
}
}
3.IE中的event对象的常用属性和方法
1.IE中event对象的常用属性
1.srcElement (target)属性:返回的是目标对象
2.IE中event对象的常用方法
1.cancelBubble 方法:取消冒泡
2.returnValue方法:默认阻止
4.兼容性写法
通过对IE下event的方法和属性和非IE的方法和属性的学习,能够感觉到两种情况的很多属性和方法大致都相同,只不过会在某些特殊方法和属性上面存在不同的兼容性写法。因此我们可以提出一些同时满足不同浏览器兼容性的写法。
1.事件对象的兼容性写法
a) 事件处理函数形参ev(event),W3C制定的标准,IE9以下不行
b) 全局对象 window.event用于IE9以下
// 兼容性写法 var event= ev|| window.event
分析:如果事件处理函数没有设置形参ev,因为事件会经过事件链传递,会经过window,window有个属性event,此时事件对象就是window.event,就是event。
<button id="box2" onclick="fn()">btn2</button>
<script>
function fn(){
console.log(event); //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}
</script>
如果设置了形参,上面的兼容性写法就不对,例如:
<button id="box2" onclick="fn(100)">btn2</button>
<script>
function fn(ev){
console.log(ev); //100
}
</script>
怎么能又设置了形参,又想兼容呢?
<button id="box2" onclick="fn(100)">btn2</button>
<script>
function fn(e){
ev = (e.constructor == PointerEvent && e)||window.event ; //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(ev);
}
</script>
分析:判定参数e的构造对象是不是跟 事件对象的构造函数 PointerEvent 一样,一样的花就是参数e,不一样就是window.event
<div id="d1">666</div>
<script>
var d1 = document.querySelector("#d1")
d1.onclick = function (e) {
e = (e.constructor == PointerEvent && e)||window.event ;
console.log(e);PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
};
</script>
2.属性的兼容性写法
event.target 火狐只有这个
event.srcElement IE6/78只有这个
这两个chrome都有
兼容性写法 var ele=event.target|| event.srcElement
3.方法的兼容性写法
(1)因为两种情况下的event对象获取方式并不同,所以希望能够自定义一个对象来替代event对象的使用。
2)因为想要自定义对象在功能上和系统event对象的方法相同,所以要给自定义对象添加方法
<script>
var Event = {
stop: function () {
if (event.stopPropagation) {
event.stopPropagation(); //阻止冒泡
} else {
event.cancelBubble = true;
}
},
quxiao: function () {
if (event.preventDefault) {
event.preventDefault(); //取消默认行为
} else {
event.returnValue = false;
}
}
};
</script>
5.target和this
targt属性:谁触发了事件target就是谁
this: 谁绑定了事件,其执行函数里面的this就是谁
<body>
<style>
*{margin: 0;}
.box1{
width: 400px;
height: 300px;
background-color: brown;
cursor: pointer;
position:relative;
left: 100px;
top: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
cursor: pointer;
/* 让box2带着box3从box1的区域出去 */
position:absolute;
left: 500px;
top: 20px;
}
.box3{
width: 100px;
height: 100px;
background-color: gold;
cursor: pointer;
margin: 10px;
padding: 5px;
border: 3px solid saddlebrown;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
box1.onclick = function(e){
//e是事件对象
console.log(this);
console.log('box111111',e.target);
}
</script>
</body>
分析:只给了box1绑定点击事件,点击box2和box3时,target分别打印box2 和box2 ,但this一直指向box1
1.正常的属性绑定,this指向绑定的那个元素
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div class="box">666</div>
<script>
var box = document.querySelector('.box');
box.onclick = function(){
console.log(this); //<div class="box">666</div>
}
</script>
</body>
2.行内式绑定的 this指向
<button id="btn2" onclick="fn(this)">点我</button>
<script>
function fn(e){
console.log(e); // button
}
</script>
<button id="btn2" onclick="fn(this)">点我</button>
<script>
function fn(e){
console.log(e,this); // button window
}
</script>
分析: console.log(e,this);里面的this,function函数里面的,其在script全局作用域下,所以是window
<button id="btn2">点我</button>
<script>
var btn2 = document.querySelector('#btn2');
btn2.addEventListener('click',(e)=>{
console.log(e,this); //PointerEvent{} window
})
</script>