发表于： 2022-12-27 20:19:03
0 328
今天学习的知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止行为</title>
<style></style>
</head>
<body>
<div>123</div>
<a href="https://www.baidu.com">百度</a>
<form action="https://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
//常见事件对象的属性和方法
//1.返回事件类型
var div = document.querySelector('div');
div.addEventListener('click',fn);
div.addEventListener('mouseover',fn); //鼠标经过
div.addEventListener('mouseout',fn); //鼠标离开
function fn(e) {
console.log(e.type);
}
//2.阻止默认行为（事件） 让链接不挑战 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click',function (e) {
e.preventDefault(); //dom 标准写法
})
// 3.传统注册方式
a.onclick = function (e) {
//普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
//低版本浏览器 ie678 returnValue 属性
// e.returnValue;
//我们可以利用 return false 也能阻止默认行为 没有兼容性问题// return false; // 特点：return 后面的代码不执行了，而且只限于传统的注册方式
}
//4. 冒泡阶段 如果 addEventListener 第三个参数是 false或者胜率 那么则处于冒泡阶段
// 冒泡阶段 son -> father -> body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function (e){
alert('son');
// 阻止冒泡 dom 推荐的标准 stopPropagation();
e.stopPropagation(); //stop 停止 Propagation 传播
// e.cancelBubble = true; //非标准 cancel 取消 Bubble 泡泡
}, false)
var father = document.querySelector('.father');
father.addEventListener('click', function (){
alert('father');
}, false)
document.addEventListener('click', function () {
alert('document');
})
//常见事件对象的属性和方法
//1、e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
// 区别 ： e.target 点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
var ul = document.querySelector('ul');
ul.addEventListener('click',function (e) {
//我们给ul 绑定了事件 那么this 就指向ul
console.log(this); //ul
console.log(e.currentTarget); //ul
// e.target 指向我们点击对象 谁触发了这个事件 我们点击的是li e.target 指向的是 li
console.log(e.target); //li
})
//2、了解 跟 this 有个非常相似的属性 currentTarget ie678不认识
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
//事件委托的核心原理：给父节点添加监听器 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function (e) {
alert('知否知否，点我应有弹框在手！');
//e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
body {
height: 3000px;
}
img {
width: 50px;
position: absolute;
}
</style>
</head>
<body>
<!-- 我是一段不愿意分享的文字-->
<!-- 鼠标案例-->
<img src="../js2/图片/猫.jpg">
<script>
//contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
//1. contextmenu 我们可以禁用右键菜单
// document.addEventListener('contextmenu',function (e) {
// e.preventDefault();
// })
// //2. 禁止鼠标选择 （ selectstart 开始选中 ）
// document.addEventListener('selectstart', function (e) {
// e.preventDefault();
// })
//鼠标事件对象 MouseEvent
// document.addEventListener('click', function (e) {
// // 1.client 鼠标在可视区的X和Y坐标
// console.log(e.clientX);
// console.log(e.clientY);
// console.log('-------------------------');
//
// // 2.page 鼠标在页面文档的X和Y坐标
// console.log(e.pageX);
// console.log(e.pageY);
// console.log('-------------------------');
//
// // 2.screen 鼠标在电脑屏幕的X和Y坐标
// console.log(e.screenX);
// console.log(e.screenY);
// })
// mousemove 鼠标移动
var pic = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
//1. mousemove 只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
//2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个X和Y坐标做为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
// console.log('x坐标是' + x, 'y坐标是' + y);
//3.千万不要忘记给 left 和 top 添加 px单位
pic.style.left = x -30 + 'px';
pic.style.top = y - 20 + 'px';
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<script>
//常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function () {
// console.log('我弹起了');
// }
document.addEventListener('keyup',function () {
console.log('我弹起了');
})
//2.keydown 按键按下的时候触发 能识别 ctrl shift 箭头等功能键
document.addEventListener('keydown',function () {
console.log('我按下了keydown');
})
//3.keypress 按键按下的时候触发 但是不能识别 ctrl shift 箭头等功能键
document.addEventListener('keypress',function () {
console.log('我按下了keypress');
})
//4.三个事件的执行顺序 keydown -> keypress -> keyup
//-----------------------------------------------------------------------------------
//键盘事件对象中的keyCode属性 可以得到相应的ASCII码值
</script>
</body>
</html>
返回列表
评论