一、事件对象的属性

1、键盘事件：只有window,document,表单元素可以触发

keydown 按键按下

keypress 按键按住

keyup(触发一次) 按键弹起

2、键盘事件的事件对象的属性

事件对象包含一系列的信息:

1、事件源头

2、事件类型

3、按下哪个键(ev.keyCode:返回数字，每个键对应不同的数字，回车键对应13)

4、是否按下Ctrl键

(ev.ctrlKey:返回true代表按了Ctrl,返回false代表没有按Ctrl)

(ev.altKey:返回true代表按了Alt,返回false代表没有按Alt)

二、元素的各种大小和位置

1. 获取元素的大小

1.1 元素的可视宽（不包含边框） odiv.clientWidth

1.1 元素的占位宽（包含边框） odiv.offsetWidth

2. 获取浏览器窗口的宽度

1.1 window.innerWidth(包含滚动条)

1.2 document.body.clientWidth(不包含滚动条)

3. 元素.offsetLeft:

获取距离它最最近的具有定位的父级元素的左偏移量，父级没有定位，会相对于body来获取

【注意】元素（绝对定位的）

4.元素.offsetTop:

获取距离它最最近的具有定位的父级元素的上偏移量，父级没有定位，会相对于body来获取

【注意】元素（绝对定位的）

三、事件流(事件传播)：描述页面接收事件顺序

事件发生时，会在元素节点之间传播的顺序

1、网景公司：

事件捕获==>事件发生时，从最不具体元素，依次向下传播到最具体的元素（由外向内传播）

2、微软公司：

事件冒泡==>事件发生时，从具体元素，依次向上传播到最不具体的元素（由内向外传播）

3、W3C规定：事件传播有3个阶段

3-1捕获阶段(由外向内)

3-2目标阶段(具体点击的是谁 ev.target)

3-3冒泡阶段(由内向外)

【注】DOM2级可以支持捕获，DOM0级不支持捕获写法

事件源.addEventListener('事件类型',事件处理函数,布尔值true/false)

【注】true代表事件捕获，false代表事件冒泡(不写默认值false)

四、this和target

1、ev.target:获取点击的具体元素

2、ev.srcElement:获取点击的具体元素IE写法

3、this指的是绑定事件的那个元素

五、事件委托

给每一个li添加点击事件

1、获取li

2、遍历li

3、给给一个li添加点击事件

缺点：每一个li身上都有一个onclick，占用系统内存，资源消耗大

事件委托可以解决这个问题

1、把绑定事件委托父元素来处理

2、利用的是冒泡元素

优点：资源消耗少，降低内存占用，新增元素也会获得父元素的事件

【12-16】事件对象相关推荐

后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
第53天：鼠标事件、event事件对象
-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果一.鼠标事件 onclick ---------------鼠 ...
jQuery慢慢啃之事件对象（十一）
1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) {alert( event.current ...
Js事件对象EventUtil
1 var EventUtil = { 2 getEvent: function(event){ //获取事件对象 3 return event ? event : window.event; 4 } ...
Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
104_鼠标事件对象
1. 当发生mousedown.mouseup.dblclick.mouseover.mouseenter.mousemove.mouseout和 mouseleave事件时, 它们的执行函数都会传递 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...

【12-16】事件对象

一、事件对象的属性

1、键盘事件：只有window,document,表单元素可以触发

2、键盘事件的事件对象的属性

二、元素的各种大小和位置

1. 获取元素的大小

2. 获取浏览器窗口的宽度

3. 元素.offsetLeft:

4.元素.offsetTop:

三、事件流(事件传播)：描述页面接收事件顺序

1、网景公司：

2、微软公司：

3、W3C规定：事件传播有3个阶段

四、this和target

五、事件委托

【12-16】事件对象相关推荐

最新文章

热门文章

【12-16】事件对象

一、事件对象的属性

1、键盘事件： 只有window,document,表单元素可以触发

2、键盘事件的事件对象的属性

二、元素的各种大小和位置

1. 获取元素的大小

2. 获取浏览器窗口的宽度

3. 元素.offsetLeft:

4.元素.offsetTop:

三、事件流(事件传播)：描述页面接收事件顺序

1、网景公司：

2、微软公司：

3、W3C规定：事件传播有3个阶段

四、this和target

五、事件委托

【12-16】事件对象相关推荐

最新文章

热门文章

1、键盘事件：只有window,document,表单元素可以触发