事件高级、

文章目录

- 1.注册事件（绑定事件）
- - addEventListener 事件监听方式
  - attachEvent 事件监听方式、兼容性解决方案 *
- 2.删除事件（解绑事件）
- - 删除事件的方式
  - 删除事件兼容性解决方案 *
- 3.DOM事件流
- 4.事件对象
- - 使用语法
  - 兼容性方案*
  - 常见属性和方法
- 5.阻止事件冒泡
- - 阻止事件冒泡的两种方式
  - 阻止事件冒泡的兼容性方案*
- 6.事件委托（代理、委派）
- 7.常用的鼠标事件
- - 鼠标事件对象
  - 案例:跟随鼠标的天使
- 8.常用的键盘事件
- - 键盘事件对象
  - 案例：模拟京东案件输入内容
  - 案例：模拟京东快递单号查询

1.注册事件（绑定事件）

在这里插入图片描述

addEventListener 事件监听方式

 eventTarget.addEventListener(type, listener[, useCapture])

在这里插入图片描述

attachEvent 事件监听方式、兼容性解决方案 *

 eventTarget.attachEvent(eventNameWithOn, callback)

在这里插入图片描述
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

function addEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName, fn);  // 第三个参数 默认是false} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn);} else {// 相当于 element.onclick = fn;element['on' + eventName] = fn;}

2.删除事件（解绑事件）

删除事件的方式

在这里插入图片描述

//2.removeEventListener删除事件
divs[1].addEventListener('click',fn);//里面的fn不需要调用加小括号function fn(){alert(22);divs[1].removeEventListener('click',fn);}
//3.
divs[2].attachEvent('onclick',fn1);function fn1(){alert(33);divs[2].detachEvent('onclick',fn1);}

删除事件兼容性解决方案 *

function removeEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 removeEventListener 方法if (element.removeEventListener) {element.removeEventListener(eventName, fn);  // 第三个参数 默认是false} else if (element.detachEvent) {element.detachEvent('on' + eventName, fn);} else {element['on' + eventName] = null;}

3.DOM事件流

在这里插入图片描述

<div class="father"><div class="son">son盒子</div></div><script>// dom 事件流 三个阶段// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son//先执行father再执行son//father包含了son，从外往内捕获，点击了son也等同点击了fathervar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, true);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, true);// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document//先执行son再执行fathervar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false);document.addEventListener('click', function() {alert('document');})</script>

4.事件对象

在这里插入图片描述

使用语法

  eventTarget.onclick = function(event) {// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener('click', function(event) {// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt }）

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

兼容性方案*

在这里插入图片描述

常见属性和方法

e.target 和 this 的区别：
this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。
在这里插入图片描述

在这里插入图片描述

<a href=""></a><script>//阻止默认行为，让链接不跳转或者让提交按钮不提交var a=document.querySelector('a');a.addEventListener('click',function(e){e.printDefault();//dom标准写法})//传统的注册方法a.onclick=function(e){//普通浏览器    方法e.printDefault();//低版本浏览器ie678    属性e.returnValue;//可以利用return false也能阻止默认行为，没有兼容性问题，但是后面的代码不执行且只限于传统注册方式return false;}</script>

5.阻止事件冒泡

阻止事件冒泡的两种方式

在这里插入图片描述

阻止事件冒泡的兼容性方案*

 if(e && e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble = true;}

6.事件委托（代理、委派）

不要给每个子节点单独设置事件监听器，而是事件监听器在其父节点上，利用冒泡原理影响设置每个子节点（重点）

事件冒泡是向上，给父节点添加了事件监听器后其中的子节点也会跟着触发，父节点以上的不受影响。
事件捕获是向下，子节点添加监听器后其以上所有父节点会跟着触发，子节点以上不受影响
在这里插入图片描述

在这里插入图片描述

7.常用的鼠标事件

在这里插入图片描述
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

 document.addEventListener('selectstart', function(e) {e.preventDefault();})

鼠标事件对象

在这里插入图片描述

案例:跟随鼠标的天使

一直跟着鼠标移动
在这里插入图片描述

<style>img {width: 25px;position: absolute;}</style>
</head>
<body><img src="images/3.jpg" alt=""><script>var pic=document.querySelector('img');document.addEventListener('mousemove',function(e){var x=e.pageX;var y=e.pageY;//x，y获取的只是数字 千万不要忘记加单位//再减去图片大小的一半鼠标就会在图片中间pic.style.left=x-13+'px';pic.style.top=y-8+'px';})</script>
})

8.常用的键盘事件

在这里插入图片描述

键盘事件对象

在这里插入图片描述

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

案例：模拟京东案件输入内容

当我们按下 s 键，光标就定位到搜索框
在这里插入图片描述

var search = document.querySelector('input');
//这里keydown键盘按下就获得焦点，字会打进去，如果按着一直不松就会出现问题，因此用keyup更合适
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}
})

案例：模拟京东快递单号查询

在这里插入图片描述

文字是键盘弹起后出现

  <style>.search {position: relative;margin: 100px auto;width: 400px;height: 300px;}.con {display: none;position: relative;width: 200px;height: 20px;color: #333;font-size: 18px;line-height: 20px;border: 1px solid #ccc;box-shadow: 0 2px 4px rgba(0, 0, 0, 2);padding: 5px;}input {width: 200px;height: 25px;margin-top: 15px;}.con::before {content: '';position: absolute;left: 28px;top:28px ;width: 0;height: 0;border: 8px solid #000;border-color: #fff transparent transparent transparent;}</style>
</head>
<body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>var con=document.querySelector('.con');var jd_input=document.querySelector('.jd');jd_input.addEventListener('keyup',function(){if(this.value==''){con.style.display='none';}else{con.innerHTML=this.value;con.style.display='block';}})//当失去焦点时隐藏con盒子jd_input.addEventListener('blur',function(){con.style.display='none';con.innerHTML=this.value;})jd_input.addEventListener('focus',function(){if(this.value!=''){con.style.display='block';}})</script>