3.5.10 事件对象 event
event 对象
<button>点击</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function (event) {
// 事件处理程序
// 获取标签名
console.log(event.targht.nodeName);
// 获取内容
console.log(event.targht.innerHTML);
}
</script>
兼容IE6~8 event
event = event || window.event
事件对象的方法
e == event
事件对象属性方法 | 说明 |
---|---|
e.target | 返回 触发 事件的对象(标准) |
e.srcElement | 返回 触发 事件的对象(非标准 IE6~8使用) |
e.type | 返回事件的类型,例:click、mouseover 不带on |
e.cancelBubble | 该属性 阻止冒泡(非标准,IE6~8使用) |
e.returnValue | 该属性 阻止默认事件 / 默认行为,如:不让链接跳转(非标准 IE6~8使用) |
e.preventDefault | 该属性 阻止默认事件 / 默认行为,如:不让链接跳转(标准) |
e.stopPropagation | 阻止冒泡(标准) |
this 关键字
this的指向在函数定义的时候是确定不了的,只有函数指向的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中,谁调用 this就指向谁
- 构造函数中 this指向构造函数的实例
e.target 和 this 的区别
- this 是事件绑定的元素(绑定这个事件处理函数的元素)
- e.target 是事件触发的元素
通常情况下 terget 和 this 是一致的,
但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),
这时候 this 指向的就是父元素,因为他绑定事件的元素是对象,
而 target 指向的是子元素,因为他是触发事件的那个具体元素对象。
3.5.11 阻止默认行为
DOM 标准写法:preventDefault()
event.preventDefault();
3.5.12 阻止事件冒泡
event.stopPropagation();
// IE 6~8 兼容写法
event.cancelBubble = true;
3.5.13 禁止鼠标右键菜单
contextmenu
<div> contextmenu 禁止右键菜单 </div>
<script>
let div = document.querySelector('div');
// 监听方式创建事件
div.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
// 传统方式创建事件
div.oncontextmenu = function (event) {
event.preventDefault();
}
</script>
3.5.14 禁止鼠标选中
selectstart
<div> selectstart 禁止鼠标选中 </div>
<script>
let div = document.querySelector('div');
// 监听方式创建事件
// 传统方式创建事件
</script>
3.5.15 鼠标相关事件对象
结合 mousemove 添加鼠标事件进行使用
鼠标事件对象 | 说明 |
---|---|
event.pageX | 返回鼠标相对于文档页面的 X轴坐标 |
event.pageY | 返回鼠标相对于文档页面的 Y轴坐标 |
event.clientX | 鼠标相对于浏览器可视区的 X轴坐标 |
event.clientY | 鼠标相对于浏览器可视区的 Y轴坐标 |
event.screenX | 鼠标相对于电脑屏幕的 X轴坐标 |
event.screenY | 鼠标相对于电脑屏幕的 Y轴坐标 |
鼠标相对于文档页面的 XY轴坐标
event.pageX event.pageY
文档页面:有滚动条时,被滚动上去的页面也叫 文档页面
<script>
document.addEventListener('mousemove', funciton (event) {
// 鼠标相对于文档页面 x轴坐标
console.log(event.pageX);
// 鼠标相对于文档页面 y轴坐标
console.log(event.pageY);
});
</script>
鼠标相对于浏览器可视区的 XY轴坐标
event.clientX event.clientY
页面可视区:浏览器能看到的地方就是可视区
<script>
document.addEventListener('mousemove' function (event) {
// 鼠标相对于浏览器可视区 X轴坐标
console.log(event.clientX);
// 鼠标相对于浏览器可视区 y轴坐标
console.log(event.clientY);
});
</script>
鼠标相对于电脑屏幕的 X轴坐标
event.screenX event.screenY
电脑屏幕:整张屏幕可视区
<script>
document.addEventListener('mousemove' function (event) {
// 鼠标相对于电脑屏幕的 X轴坐标
console.log(event.screenX);
// 鼠标相对于电脑屏幕的 Y轴坐标
console.log(event.screenY);
});
</script>
3.5.16 键盘事件
执行顺序:keydown keypress keyup
可以使用属性 keyCode,来获取按下的是哪个键(默认是返回的是字母对应的数字)
键盘事件 | 说明 |
---|---|
onkeyup | 键盘弹起 |
onkeydown | 键盘按下 |
onkeypress | 某个按键按下 |
键盘按下事件
keyup
/ 语法格式
document.addEventListener('keyup', function (event) {
console.log('键盘按下');
});
键盘弹起事件(重点)
keydown 实际开发常用
能识别键盘上的任意键,但是不能区分字母大小写,但可以识别功能键
/ 语法格式
document.addEventListener('keydown', function (event) {
console.log('键盘弹起');
});
event 键盘属性
event.key
按下按键时获取键盘按钮
var x = event.key;
按下 Enter // Enter
event.keyCode
获取按下的键盘按键Unicode值
var x = event.keyCode;
119 // 119 是字符 "w"
键盘某个按键按下
keypress
可以识别字母大小写,但是不能识别功能键
/ 语法格式
document.addEventListener('keypress', function (event) {
consloe.log(event.keyCode);
});