- 💂 个人主页：Aic山鱼
-
个人社区：山鱼社区
- 💬 如果文章对你有帮助，欢迎关注、点赞、收藏(一键三连)和订阅专栏
目录
前言
1.e.target与this的区别
2.阻止默认行为
3.阻止冒泡事件*
4.事件委托
5.鼠标点击事件
5.1鼠标事件禁止页面文本复制
5.2鼠标点击获取坐标
5.3鼠标跟随事件
6.键盘事件
总结
前言在我们进行target和this的使用中如何区分this的指向问题呢？
怎么才能阻止冒泡事件？
在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！
1.e.target与this的区别简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素
// e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
var div = document.querySelector('div');
div.addEventListener('click', function (e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
// e. target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e. target 指向的就是1i
console.log(e.target);
// 绑定ul，那么this指向的就是我们所绑定的ul
console.log(this);
})
666
666
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();
})
// 利用return也能进行一个阻止默认事件 特点return后面的代码不执行 只能用于传统的方式哦
a.onclick = function (e) {
return false;
}
注意:return false;只能用在传统的方法上，并且它后面的代码不执行
3.阻止冒泡事件*为什么要阻止冒泡事件？
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性,会带来的部分坏处需要我们灵活使用。
标准写法:利用事件对象里面的stopPropagation()方法
var son = document.querySelector('.son');
son.addEventListener('click', function (e) {
alert('son');
e.stopPropagation();
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father')
}, false);
原理：不给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
- 小li小li，漂亮的lili
- 小li小li，漂亮的lili
- 小li小li，漂亮的lili
- 小li小li，漂亮的lili
- 小li小li，漂亮的lili
// 事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'chartreuse';
})
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
禁止选中文字selectstart
我的地盘我做主！
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
// 2.禁止选中文字selectstart
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
document.addEventListener('click', function (e) {
// client返回鼠标相对于浏览器窗口可视区的坐标
console.log(e.clientX);
console.log(e.clientY);
// page返回鼠标相对于文档页面的坐标
console.log(e.pageX);
console.log(e.pageY);
// screen返回鼠标相对于电脑屏幕的X坐标
console.log(e.screenX);
console.log(e.screenY);
})
注：不要忘记给img一个绝对定位哦
img {
position: absolute;
top: 20px;
width: 80px;
height: 80px;
}
![]()
var pic = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
// 1.mousemove只要鼠标移动1px就会触发这个事件
var x = e.pageX;
var y = e.pageY;
pic.style.left = x - 30 + 'px';
pic.style.top = y - 30 + 'px';
})
6.键盘事件
使用addEventListener不需要加on
// 这三个的执行顺序为down press up
document.addEventListener('keyup', function () {
console.log('弹起来！');
})
//2. keydown 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
document.addEventListener('keydow', function () {
console.log('把down按下去！');
})
//2. keypress 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
document.addEventListener('keyup', function () {
console.log('把press按下去！');
})
点赞👍：您的赞赏是我前进的动力！ 收藏⭐：您的支持我是创作的源泉！ 评论✍：您的建议是我改进的良药！ 山鱼🦈社区:欢迎大家加 山鱼社区 ！
