导绪
在我们进行target和this的使用中如何区分this的指向问题呢？怎么才能阻止冒泡事件？
在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！
1.e.target与this的区别
简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素
代码语言：js复制<script>
// 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);
})
</script>2.阻止默认行为
代码语言：js复制<body>
<div>666</div>
<a href="https://www.baidu.com/">666</a>
<form action="https://www.baidu.com/">
<input type="submit" value="提交" name="sub">
</form>
<script>
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;
}
</script>注意:return false;只能用在传统的方法上，并且它后面的代码不执行
3.阻止冒泡事件*
为什么要阻止冒泡事件？
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性,会带来的部分坏处需要我们灵活使用。
标准写法:利用事件对象里面的stopPropagation()方法
代码语言：js复制<body>
<div class="father">
<div class="son"></div>
</div>
<script>
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);
</script>
</body>4.事件委托
原理：不给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
代码语言：js复制<body>
<ul>
<li>小li小li，漂亮的lili</li>
<li>小li小li，漂亮的lili</li>
<li>小li小li，漂亮的lili</li>
<li>小li小li，漂亮的lili</li>
<li>小li小li，漂亮的lili</li>
</ul>
<script>
// 事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'chartreuse';
})
</script>
</body>
5.鼠标点击事件
5.1鼠标事件禁止页面文本复制
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
禁止选中文字selectstart
代码语言：js复制<body>
我的地盘我做主！
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
// 2.禁止选中文字selectstart
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
</script>
</body>
5.2鼠标点击获取坐标
<body>
<script>
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);
})
</script>
</body>5.3鼠标跟随事件
注：不要忘记给img一个绝对定位哦
代码语言：js复制<style>
img {
position: absolute;
top: 20px;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<img src="./img/shanyu.jpg" alt="">
<script>
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';
})
</script>
</body>
6.键盘事件
使用addEventListener不需要加on
<body>
<script>
// 这三个的执行顺序为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按下去！');
})
</script>
</body>
点赞
