事件对象:
触发事件的对象,相关信息
触发事件的对象,与绑定事件的对象,不一定相同
在 事件处理函数中 定义一个形参,触发事件,JavaScript程序,自动给形参赋值,存储触发事件对象的先关信息
按键事件,存储的是,按下按键的相关信息
鼠标事件,存储的是,鼠标点击移动的相关信息
事件对象的兼容语法:
低版本IE浏览器,不会自动向 形参中存储数据信息
有一个专门的属性 window.event 来存储事件对象的信息
只要不报错,一个有一个没有,使用 逻辑或 || 来兼容
如果报错,使用if判断来兼容
e = e || window.event;
点击事件,事件对象:
1. 存储了点击时,鼠标的坐标
1.offsetX offSetY
点击的位置,和触发事件的事件对象,左上角的坐标
触发事件的标签是谁,就是到谁左上角的坐标
2.clientX clientY
距离视窗窗口,左上角的坐标
3.pageX pageY
距离html文档,左上角的坐标
平时两个数据是完全相同的,如果页面滚动了,两个数据不同
如果是: 鼠标点击事件,使用 offsetX offSetY 更简单
如果是: 鼠标拖拽事件,没有页面滚动,使用 client 和 page都可以
如果有页面滚动,使用 pageX pageY
document.onclick = function(e){
e = e || window.event;
console.log(e);
console.log(e.offsetY); //和document左上角的位置
console.log(e.clientY); //和可见页面左上角的位置
console.log(e.pageY); //和整个页面左上角的位置
}
2.存储了点击时,点击的标签对象
点击事件,将事件 绑定给我的标签对象成为事件源
触发事件的标签对象是 事件对象
往往不是相同的标签对象
e.target 获取的 就是跟我们直接获取标签对象,结果是完全相同的
多有对于标签对象的操作, 都可以直接对 e.target 进行
可以获取 id className 内容 属性...
通过不同的 e.target 信息,可以判断,点击的是 不同的 标签/事件对象
.tagName 存储的是 标签对象名称, 是 大写 英文字母
判断方法有很多,只要不冲突,只要能判断正确,都可以使用
htmlcssjs
<div id="div">我是div
<p>我是p标签</p>
<span>我是span标签</span>
</div>
随便写点
var oDiv = document.getElementById('div');
oDiv.onclick = function(e){
e = e || window.event;
console.log(e)
// 根据点击不同的标签,执行不同的代码程序
if(e.target.tagName === 'SPAN' ){
console.log('点击的是span标签');
}else if(e.target.tagName === 'P' ){
console.log('点击的是P标签');
}else if(e.target.tagName === 'DIV' ){
console.log('点击的是div标签');
}
}
Comments | NOTHING