JS-图片其他事件-Event对象-事件委托-DOM对象

1 回顾

1. 事件回调函数中 this 的指向2. 鼠标事件click dblclick contextmenumouseenter mouseleavemousedown mouseup mousemove3. 键盘事件keydown keyup keypress4. 文档事件load DOMContentLoaded beforeunload5. 表单事件submit resetblur focus selectchange

2 常用事件总结

2.1 鼠标事件

click单击dblclick双击contextmenu右击mouseover鼠标悬停在元素上， 建议用 mouseenter 代替mouseout鼠标离开元素，建议用 mouseleave 代替mouseenter鼠标悬停在元素上mouseleave鼠标离开元素mousedown鼠标按键按下mouseup 鼠标按键抬起mousemove鼠标移动

2.2 键盘事件

keydown键盘按键按下keyup键盘按键抬起keypress键盘按键按下，用于可输入字符按键

1. 哪些元素可以监听键盘事件？

① document

② 可以获取焦点的元素（表单控件，尤其是可输入的元素）

2. keydown 和 keypress 的区别？

① keydown 所有的按键按下都可以触发，无法区分大小写按键。

② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。

3. 如何获取按下的是哪个按键？

使用 event 对象中的属性：

evnet.keyCode 获取按键对应的 ascii 值

event.which 同 keyCode

event.key 获取按键的字符值。

2.3 文档事件

load页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素DOMContentLoaded页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 addEventListener 监听事件beforeunload当关闭网页的时候触发

load 事件与 DOMContentLoaded 事件的区别：

① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。

② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。

2.4 表单事件

submit当表单提交的时候触发，该事件监听到form元素reset当表单重置的时候触发，该事件监听到form元素focus当表单控件获取焦点的时候触发blur当表控件单失去焦点的时候触发select输入框或文本域中的内容被选中change对于输入框，内容改变且失去焦点才会触发；适合用于select

2.5 图片事件

load图片文件下载完毕error图片加载失败

var imagesBox = document.querySelector('#images')// 定义数组var imgData = ['db01.jpg','db02.jpg','db03.jpg','db04.jpg','db0102.jpg','db05.jpg','db06.jpg']// 根据数据动态的创建图片imgData.forEach(function(item) {// 创建图片元素var imgEle = new Image();// 指定图片元素的src地址imgEle.src = 'images/'+item;// 把新的img元素添加到imagesimagesBox.appendChild(imgEle);// 监听图片加载完毕事件imgEle.onload = function() {this.style.opacity = 1;}// 监听图片加载失败的事件imgEle.onerror = function() {this.src = 'images/noimage.png'}})

2.6 其他事件

resize监听到 window上，视口大小发生改变scroll监听到window或者是具有滚动体的元素，页面或元素中的内容发生滚动就触发。

// 视口大小变化事件window.onresize = function() {document.querySelector('#box').innerHTML = window.innerWidth+','+window.innerHeight}var contents = document.querySelector('#content')// 监听内容滚动事件contents.onscroll = function() {console.log('内容的位置：',contents.scrollLeft,contents.scrollTop)}

案例：导航条

第一种：设置html方式：/* 设置吸附定位 */position: sticky;top: 0;第二种方式：在js上进行设置var pageNav = document.querySelector('#pageNav');// 计算导航条元素与页面顶部的距离（导航条在页面上的y坐标）var pageDst = pageNav.offsetTop;// 监听页面滚动window.onscroll = function() {// 获取页面滚动的距离var scrollDst = document.documentElement.scrollTop ||document.body.scrollTop// 当页面滚动的距离>=导航条页面顶部的距离if (scrollDst >= pageDst ) {// 添加吸附效果pageNav.classList.add('fixed-top')// 给body添加上内边距document.body.style.paddingTop = '40px'} else {// 取消吸附效果pageNav.classList.remove('fixed-top')// 去掉body的上内边距document.body.style.paddingTop = '40px'}}

3 Event 对象

3.1 获取 Event 对象

给事件的回调函数设置第一个形参，就可以获取 event 对象。

不同类型的事件获取的 Event 对象类型也不同。

function fn(event) {console.log('click:',event)}// 获取input元素var input = document.querySelector('input')// 监听键盘按键按下input.onkeydown = function(e) {console.log('keydown:',e)}// 监听失去焦点事件input.addEventListener('blur',function(event) {//var event = event || window.event;console.log('blur',event);})

3.2 鼠标事件对象 MouseEvent 的属性和方法

offsetX / offsetY获取鼠标在目标元素上的坐标位置clientX / clientY获取鼠标在视口上的坐标位置pageX / pageY获取鼠标在页面上的坐标位置screenX / screenY 获取鼠标在屏幕上的坐标位置button获取按的是哪个鼠标按键， 0：左键； 1:中间键; 2:右键

3.3 键盘事件对象 KeyBorardEvent 的属性和方法

keyCode获取按键对应的编码值which同 keyCodekey获取按键对应的字符值

3.4 所有类型的事件对象都有的属性和方法

type获取事件名timeStamp获取触发事件时距离打开页面时的毫秒数target获取目标元素stopPropagation()阻止事件冒泡preventDefault()阻止浏览器默认行为

3.5 阻止事件冒泡

在事件的回调函数中执行event.stopPropagation()，就可以阻止冒泡。

// 给inner监听click事件inner.onclick = function() {console.log('inner被click了');// 阻止冒泡event.stopPropagation()}

3.6 浏览器的默认行为

① 浏览器有哪些默认行为

超链接点击跳转表单的提交和重置右键弹出系统菜单等...

② 阻止浏览器默认行为

在事件的回调函数中调用event.preventDefault()即可阻止默认行为。

注意：如果使用第二种方式监听事件，在回调函数中return false同样可以阻止默认行为。

// 监听submit事件form.addEventListener('submit',function(event) {alert('我被提交了');// 阻止默认行为event.preventDefault();//return false 这里无法阻止默认行为})// 给document监听右键事件document.oncontextmenu = function(event) {alert('点击右键')// 阻止默认行为 也可以使用return false// event.preventDefault();return false;}

4 事件委托

事件监听到祖先元素上，判断目标元素，如果目标元素满足条件，就执行相关操作。

事件委托的优势：

对于给大量的元素监听相同的事件，使用事件委托比遍历挨个监听效率更好。利用事件委托可以让新增的元素也可以响应事件。

// 点击添加按钮addBtn.onclick = function(event) {// 创建一个新的元素节点var liNode = document.createElement('li')// 给liNode设置文本内容liNode.innerHTML = inputBox.value+' <button class="delete-btn">删除</button>';// 把新创建的li添加到ul中去 在ul的最后面添加子节点ulBox.appendChild(liNode);}// 使用事件委托监听事件ulBox.onclick = function(event) {if (event.target.nodeName === 'BUTTON') {// 删除button所在的liulBox.removeChild(event.target.parentNode)}}})()

5 DOM 对象深入分析

5.1 元素对象的原型链关系

HTMLDivElement类型 -> HTMLElement类型 -> Element类型 -> EventTarget类型 -> Object 类型 -> Object.prototype

var box = document.querySelector('#box');console.log(box);// HTMLDIVElement 类型的对象console.log(box.__proto__); // HTMLElement 类型的对象console.log(box.__proto__.__proto__); // Element 类型的对象console.log(box.__proto__.__proto__.__proto__); // Node 类型的对象console.log(box.__proto__.__proto__.__proto__.__proto__); // EventTarget 类型的对象console.log(box.__proto__.__proto__.__proto__.__proto__.__proto__); // Object 类型的对象console.log(box.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__); // Object.prototype

5.2 事件对象的原型链关系

MouseEvent类型 -> UIEvent类型 -> Event类型 -> Object类型 -> Object.prototype

<script>document.onmousedown = function(event) {console.log(event); // MouseEvent 类型的对象console.log(event.__proto__); // UIEvent 类型的对象console.log(event.__proto__.__proto__); // Event 类型的对象console.log(event.__proto__.__proto__.__proto__); // Object 类型的对象console.log(event.__proto__.__proto__.__proto__.__proto__); // Object.prototype}

5.3 HTMLCollection 和 NodeList 的区别

① HTMLCollection 对象

getElementsByTagName()、getElementsByClassName()、document.all、children 等方式方法可以获取到 HTMLCollection 类型的对象HTMLCollection 类型的对象中的成绩必须都是元素节点。该对象没有 forEach 方法HTMLCollection 对象是动态的，可以实时更新集合中的元素。

② NodeList

getElementsByName()、querySelectAll()、childNodes 等方式方法可以获取 NodeList 类型的对象NodeList 类型的对象中的元素可以是任意类型的节点（元素、文本节点、注释节点、document 等）该对象有 forEach 方法NodeList 对象是静态的对象。

关于位置

获取了一个元素对象赋值给了变量 box，根据要求获取以下信息

① 获取元素在整个页面中（根元素）的位置 （注：该元素的祖先元素没有定位的）box.offsetLeftbox.offsetTop② 获取元素在视口中的位置box.getBoundingClientRect().leftbox.getBoundingClientRect().top③ 获取元素的宽度和高度（包括内容、内边距和边框）box.offsetWidthbox.offsetHeight

① 获取视口的宽度和高度document.documentElement.clientWidthdocument.documentElement.clientHeight② 获取页面内容向上滚动的距离 （滚动条向下滚动的距离）document.documentElement.scrollTop || document.body.scrollTop

在一个鼠标事件中获取了事件对象，赋值给了变量 event，根据要求获取以下信息

① 获取鼠标在视口上的位置event.clientXevent.clientY② 获取鼠标在整个页面（根元素）上的位置event.pageXevent.pageY③ 获取鼠标在屏幕上的位置event.screenXevent.screenY④ 获取鼠标在目标元素上的位置event.offsetXevent.offsetY