JS-图片其他事件-Event对象-事件委托-DOM对象
2024-04-13 01:07:45
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 同 keyCode
key 获取按键对应的字符值
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
JS-图片其他事件-Event对象-事件委托-DOM对象相关推荐
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- jquery对象PHP转换,JavaScript_jQuery对象与DOM对象之间的相互转换，1、jQuery对象转换成DOM对象
jQue - phpStudy...
jQuery对象与DOM对象之间的相互转换 1.jQuery对象转换成DOM对象 jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法 ...
- 关于jQuery对象（类数组对象）以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]
之前在某官网课程上看有关jQuery和bootstrap的相关教程,有一节课是教我们如何制作价格菜单的按钮以及总价问题 选中按钮,按钮样式会发生变化,右上角价格会自动运算 6个菜单的html结构差不多 ...
- 如何把Dom对象转换成jQuery对象，如何把jQuery对象转换成Dom对象
1.Dom对象 DOM解析HTML页面,将页面元素解释为元素节点.属性节点和文本节点.而通过DOM解析HTML页面元素,所得到的DOM元素就是DOM对象. 2.jQuery对象 (1) jQuery对 ...
- Java 创建事件Event、事件监听EventListener、事件发布publishEvent
一.概述 个人认为,事件机制一般可由:事件源source,事件对象Event,事件监听EventListener,事件发布publishEvent组成 事件源:引起事件发生的源: User用户信息, ...
- JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
1.概念: Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作. 通过 HTML D ...
- table取tr对象 vue_javascript的DOM对象终极总结：你必看的js面向对象
<大数据和人工智能交流>头条号向广大初学者新增C .Java .Python .Scala.javascript 等目前流行的计算机.大数据编程语言,希望大家以后关注本头条号更多的内容.作 ...
- html dom对象简写,HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- JavaScript一步一步：JavaScript 对象和HTML DOM 对象
JavaScript 对象 点击以下链接,可以获得以下对象的更多信息,包括它们的集合.属性.方法以及事件.其中包含大量实例! 对象 描述 Window J ...
最新文章
- 使用JavaScript在下拉列表中获取选定的值
- python真的超过java了吗-Python为什么突然就火了呢?竟然还超过了java
- DVWA手记——取消登录
- hls fifo_【正点原子FPGA连载】第一章HLS简介--领航者ZYNQ之HLS 开发指南
- PHP的xdebug五个按钮的说明
- SAP UI5和CRM WebUI的View和Controller是如何绑定的
- 肖仰华 | 基于知识图谱的问答系统
- web performance in action学习前言
- 利用Socketserver实现简单的文件上传
- NetApp集群模式Data ONTAP展露新颜
- 如何安装mysql5.7.25_Centos7 yum安装MySQL5.7.25
- 无限循环小数四则运算_狐狸笔记 | 0.999999无限循环下去，就等于1吗？
- 利用CSS边框合并属性打造table细边框
- 在Linux系统下更改或更新SSH密钥密码的方法
- Introducing and integrating Hibernate(Chapter 2 of Hibernate In Action)
- Eclipse创建Java项目时提示Open Associated Perspective？
- iOS应用程序瘦身的静态库解决方案
- HTML5移动端最新兼容问题解决方案
- 等价划分测试c语言测试三角形,三角形等价划分法测试用例
- PS：PS将彩色相片变成纯黑白色