JavaScript学习笔记27

一、事件分类

1、键盘事件

1、keydown,keyup,keypress
2、触发顺序是 keydown > keypress > keyup
3、keydown 和 keypress 的区别



1)keydown 可以响应任意键盘按键,keypress 只可以相应字符类键盘按键

检测字符类不准确,keypress 检测字符很准。但是 keydown 能监控所有,包括上下左右都能监控,但是 keypress 只能监视字符。

用法:如果你想监控字符类按键,并想区分大小写,就用 keypress,如果是操作类按键的话,就用 keydown(which:39 是给按键牌号 39,不是 asc 码)



2)keypress 返回 ASCII 码,可以转换成相应字符

例 连续按键盘按键的时候就是连续触发 keydown 和 keypress,松开触发 keyup

JavaScript学习笔记27_第1张图片
JavaScript学习笔记27_第2张图片

注意:游戏触发设置在 keydown 上,机械键盘抬起速度快反馈力量大,对游戏没用

小写的 a 的 charCode 返回的是



例 利用下面,把 Unicode 编码转成对应值

在这里插入图片描述



2、文本操作事件

input,change,focus,blur



例 框里面所有变化(增删改)都会触发 input 事件

JavaScript学习笔记27_第3张图片
JavaScript学习笔记27_第4张图片
JavaScript学习笔记27_第5张图片


例: change 对比鼠标聚焦,或失去焦点的时,两个状态是否发生改变,如果两个状态没有改变就不触发,如果发生改变就触发

在这里插入图片描述



例 focus,blur 聚焦和失去焦点

在这里插入图片描述

3、窗体操作类(window 上的事件) scroll,load

例: scroll 当滚动条一滚动,scroll 事件就触发了

在这里插入图片描述

ie6 没 fixed 定位,就用 position 的 top=原来的 top+滚动条的位置来写。
absolute 定位相对于文档定位,用 absolute 定位模拟 fixed 定位,挪动距离加载 absolute 的 top 上,读到 js 的时候就阻断页面,所以必须把 js 写在下面才能把上面的东西读出来。



例: load 重要但是不用。window.onload 发生在什么时候

在这里插入图片描述
JavaScript学习笔记27_第6张图片
在这里插入图片描述

利用了 onload 就能操作写在下面的 div 了,但是我们不能这样用。



理由:html 和 css 是一起解析的,在解析的时候会有 html 有 domTree,css 有 cssTree,生成(树形图的顶底是document,然后是 html,然后是 head,body),两个树拼在一起是 renderTree。

JavaScript学习笔记27_第7张图片

什么时候把节点放在树里?dom 节点解析,如确定是 img 标签就把他放到树里。(先解析完 img,同时开启一个线程异步的去下载里面的内容,后下载完)。

我们把 js 的 script 标签写在最下面的好处是,这些刚刚解析完 js 就能操作页面了,就更快了。

而 window.onload 要等整个页面解析完,下载完才能操作 js,才能触发事件(效率很差)。

onload 能提醒我们什么时候整个页面解析完毕。在设计广告时,就要用 onload,等整个页面下载完了才开始用,但是 onload 绝对用于主程序里面。

JavaScript学习笔记27_第8张图片

小练习:fixed 定位 js 兼容版 //ie6 没有 fixed 定位,用 position:absolution 是相对于文档定位。
模拟fixed定位,跟着解决文档拖的问题。position-top= 原来的position-top + 滚动条的位置

JavaScript学习笔记27_第9张图片
在这里插入图片描述

你可能感兴趣的:(JavaScript,学习笔记,js,javascript,dom,bom)