js函数总结(2)

二十一、键盘事件

onkeydown 键盘按下的事件,长按就一直触发
onkeyon 键盘弹起事件,只触发一次

(以回车键为例)
js函数总结(2)_第1张图片
obj.offsetTop obj距离上方或上层控件的位置、整型、单位像素
obj.offsetLeft obj距离左方或上层控件的位置、整型、单位像素
obj.offsetWidth obj控件自身的宽度、整型、单位像素
obj.offsetHeight obj控件自身的高度、整型、单位像素
js函数总结(2)_第2张图片

js函数总结(2)_第3张图片

二十二、冒泡事件

js函数总结(2)_第4张图片

js函数总结(2)_第5张图片
当点击红色方框的时候触发它原本的事件,但当点击那个按钮的时候,它不仅触发了自己的事件,同时也触发了它外面方框的事件。
当我们只想要触发按钮那个事件时,这就用到了组织冒泡事件
js函数总结(2)_第6张图片
当增加了阻止冒泡事件时,只点击按钮的时候就会只执行它本身的事件。

阻止默认事件
js函数总结(2)_第7张图片
正常情况下,一点击跳转就会跳转到里面所连接的那个页面中,但如果加上阻止默认事件的话,你再怎么点击都不会跳转:

js函数总结(2)_第8张图片
(跳转颜色变红是因为点击的缘故)

这就是阻止默认事件,下面那个return是阻止默认事件的另一种方式。

二十三、事件委托

1、高亮

js函数总结(2)_第9张图片
2、添加

js函数总结(2)_第10张图片
3、事件委托

新创建的内容无法触发点击事件,把点击事件赋给已经写死再页面里的父节点去触发(原理:冒泡)

js函数总结(2)_第11张图片

二十四、BOM

BOM:浏览器对象模型
通过window对象来控制浏览器的相关操作

document:window对象的document属性

location对象
href属性:控制浏览器的地址
reload方法:刷新页面

history(用户跳转的历史记录)
back方法:回退到上一页
forward:下一页
go(num):参数
num > 0 跳转num页
num < 0 回退num页
length:获取历史记录的个数

screen 屏幕
navigator 浏览器
frams 框架

二十五、事件绑定

在这里插入图片描述
js函数总结(2)_第12张图片

这是两种绑定事件的方式,一种是直接在标签里面添加,一种是在js里面添加。
由上图可以看出,当绑定两个事件的时候,下一个事件就会把上一个事件给覆盖掉,不能同时存在。
所有当我们要想将两个事件同时绑定在同一个标签中,就需要用到事件监听。

事件监听

addEventListener 事件监听

js函数总结(2)_第13张图片
removeEventListener 移除事件监听

js函数总结(2)_第14张图片

二十六、定时器与延时器

延时器

setTimeout()

在这里插入图片描述

定时器

setInterval()

js函数总结(2)_第15张图片
取消定时器

clearInterval()

在这里插入图片描述在这里插入图片描述
js函数总结(2)_第16张图片

你可能感兴趣的:(js)