目录
2、事件侦听注册事件：addEventListener('click',function(){})
六、事件对象阻止默认行为：e.preventDefault()
1、阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
2、使用return false来阻止默认行为，没有兼容性问题
原理在于使用侦听器检测父节点点击事件和点击位置，然后通过冒泡来影响子节点，完成点击时单独触发的效果
一、注册事件的两种方式
1、传统的注册事件
事件源+事件类型+事件处理程序
btn.onclick = function () {
console.log(1);
}
btn.onclick = function () {
console.log(2);
}2、事件侦听注册事件：addEventListener('click',function(){})
(1) 里面的事件类型是字符串，必定加引号，而且不带on
(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btn1.addEventListener("click", function () {
console.log(2);
})
btn1.addEventListener("click", function () {
console.log(4);
})
btn1.addEventListener("mouseout", function () {
console.log(3);
})
二、删除事件的两种方式
1、传统方式删除方式
将一个空白纸赋值给事件源，达到删除事件的效果
var divs = document.querySelectorAll("div")
divs[0].onclick = function () {
console.log(1);
this.onclick = null
}2、删除事件：removeEventListener
divs.removeEventListener('click',fn)
divs.addEventListener("click", fn)
function fn() {
console.log(2);
this.removeEventListener("click", fn)
}
divs.removeEventListener("click", fn)三、dom事件流的三个阶段
1、DOM事件流的三个阶段是捕获阶段、目标阶段和冒泡阶段。
JS 代码中只能执行捕获或者冒泡其中的一个阶段，onclick 只能得到冒泡阶段。即在使用onclick作为事件类型时，只能执行冒泡阶段。
2、冒泡阶段是由内向外
如果addEventListener的第三个参数是 false 或者省略那么则处于冒泡阶段，此时的顺序为son -> father ->body -> html -> document。
3、捕获阶段是由外向内
如果addEventListener的第三个参数是 true 那么则处于捕获阶段。
此时的顺序为document -> html -> body -> father -> son
var father = document.querySelector(".father ")
var son = document.querySelector(".son ")
father.addEventListener("click", function () {
console.log("father");
}, true)
son.addEventListener("click", function () {
console.log("son");
}, true)
document.body.addEventListener("click", function () {
console.log("body");
}, true)
document.documentElement.addEventListener("click", function () {
console.log("document");
}, true)
四、事件对象：event
事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数，event 就是一个事件对象，需写到我们侦听函数的小括号里面当形参来看，在目前阶段形参内写入任何字符都会作为事件对象。
事件对象是我们事件的一系列相关数据的集合跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标，如果是键盘事件里面就包含的键盘事件的信息。比如判断用户按下了哪个键。
这个事件对象我们可以自己命名 比如 event 、 evt、 e、或者更多的字符
div.addEventListener("click", function (event) {
console.log(event);
// console.log(e.pageX);
})五、事件对象：e.target
1、e.target 返回的是触发事件的对象（元素）
e.target 点击了那个元素，就返回那个元素
2、this 返回的是绑定事件的对象（元素）
哪个元素绑定了这个点击事件，就返回该元素
var ul = document.querySelector("ul")
var li = document.querySelector("li")
li.addEventListener("click", function (e) {
console.log(e.target);
})
ul.addEventListener("click", function (e) {
console.log(e.target);
})六、事件对象阻止默认行为：e.preventDefault()
1、阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector("a")
var ipt = document.querySelector("input")
a.addEventListener("click", function (e)
{
console.log(e);
e.preventDefault()
})2、使用return false来阻止默认行为，没有兼容性问题
特点： return 后面的代码不执行了， 而且只限于传统的注册方式
var a = document.querySelector("a")
var ipt = document.querySelector("input")
ipt.onclick = function (e) {
console.log(e);
return false
}
阻止事件冒泡的案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: red; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style> </head> <body> <div class="father"> <div class="son">son儿子</div> </div> <script> // 常见事件对象的属性和方法 // 阻止冒泡 dom 推荐的标准 e.stopPropagation() var father = document.querySelector(".father ") var son = document.querySelector(".son ") father.addEventListener("click", function () { console.log("father"); }) son.addEventListener("click", function (e) { console.log("son"); e.stopPropagation(); }) document.body.addEventListener("click", function (e) { console.log("body"); }) document.documentElement.addEventListener("click", function () { console.log("document"); }) </script> </body> </html>
七、事件委托
原理在于使用侦听器检测父节点点击事件和点击位置，然后通过冒泡来影响子节点，完成点击时单独触发的效果
var ul = document.querySelector("ul")
// 利用冒泡原理 委托父级去执行
ul.addEventListener("click", function (e) {
e.target.style.color = "#0f0"
})
// var lis = document.querySelectorAll("li")
// for (var i = 0; i < lis.length; i++) {
// lis[i].addEventListener("click", function () {
// this.style.color = "#0f0"
// })
// }完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>知否知否，点我应有弹框在手！1</li>
<li>知否知否，点我应有弹框在手！2</li>
<li>知否知否，点我应有弹框在手！3</li>
<li>知否知否，点我应有弹框在手！4</li>
<li>知否知否，点我应有弹框在手！5</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
// var lis = document.querySelectorAll("li")
// for (var i = 0; i < lis.length; i++) {
// lis[i].addEventListener("click", function () {
// this.style.color = "#0f0"
// })
// }
var ul = document.querySelector("ul")
// 利用冒泡原理 委托父级去执行
ul.addEventListener("click", function (e) {
e.target.style.color = "#0f0"
})
</script>
</body>
</html>八、常见鼠标事件
1. contextmenu 禁用右键菜单
var div = document.querySelector("div")
div.addEventListener("contextmenu", function (e) {
e.preventDefault()
})
2、selectstart 禁止选中
div.addEventListener("selectstart", function (e) {
e.preventDefault()
})
3、鼠标事件对象
（1）在进行上下距离测量时，文档页面需额外测量
（2）可以使用事件对象检测来改变鼠标样式
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function (e) {
// 1.浏览器窗口可视区 clientX clientY
// console.log(e.clientX);
console.log(e.clientY);
console.log("--------------");
// 2.文档页面 pageX pageY
// console.log(e.pageX);
console.log(e.pageY);
console.log("--------------");
// 3.电脑屏幕 screenX screenY
// console.log(e.screenX);
console.log(e.screenY);
console.log("--------------");
})九、常见的键盘事件
1、keyup：按键弹起时触发
2、keydown：按键落下时触发
在使用这两种键盘事件时，移动光标也会在控制台产生事件
var ipt= document.querySelector("input")
ipt.addEventListener("keyup",function(e)
{
if (e.keyCode==13)
//判断ASCII码值是否为13
console.log(this.value);
}
)3、keypress：功能键时事件不会发生
相较于上面的键盘事件，keypress事件在移动光标时不会产生新的事件
ipt.addEventListener("keypress",function(e)
{
console.log(this.value);
if(e.keyCode==13) console.log(this.value);
}
)keyCode属性可以的到相应的ASCII码值
1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65
var ipt =document.querySelector("input") ipt.addEventListener("keyup",function(e) { console.log(e.keyCode) } ) ipt.addEventListener("keypress",function(e) {console.log(e.keyCode); })
案例模拟：
1.模拟京东按键输入内容
var ipt=document.querySelector("input") document.body.addEventListener("keyup",function(e) { console.log("e.keyCode") if(e.keyCode == 83) ipt.focus() } ) // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面 //e.keyCode == 83 // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键2、模拟京东快递单号查询案例
// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） // 表单检测用户输入： 给表单添加键盘事件 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 // 1.考虑事件源 input keyup focus blur // 2.focus 有值和空值 // 有值：div显示 并且将value值给div // 空值：div不显示 // 3.blur div 不显示 // 4.keyup // 有值：div显示 并且将value值给div // 空值：div不显示 var ipt=document.querySelector("input") var div =document.querySelector(".con") ipt.addEventListener("focus",function() { if (this.value) { div.style.display = "block" div.innerHTML = this.value } }) ipt.addEventListener("blur", function () { div.style.display = "none" }) ipt.addEventListener("keyup", function () { if (this.value) { div.style.display = "block" div.innerHTML = this.value } else { div.style.display = "none" } })
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
