美文网首页
事件(下)

事件(下)

作者: 梨啊梨 | 来源:发表于2018-01-06 18:14 被阅读0次

事件类型

UI事件

load:当页面完全加载后在window上面触发,当所有框架加载完成后在框架集上触发,图像加载完后在<img>上触发

unload:当页面完全卸载后在window上面触发,当所有框架。。。

abort:在用户停止下载过程时,如果嵌入的内容还没有加载完,则在<object>元素上面触发

error:当发生一些错误或者无法加载时触发

select:当用户选择文本框中的一个或多个时触发

resize:当窗口或框架的大小变化时在window或框架上面触发

scroll:当用户滚动,带滚动条的元素中的内容时,在该元素上触发

焦点事件

focus:在元素获得焦点时触发

blur:在元素失去焦点时触发

focusin:在元素获得焦点时触发,他会冒泡

focusout:在元素失去焦点时触发

鼠标与滚动事件(记得前面加on)

click:单机

dblclick:双击

mousedown:鼠标按下时触发

mouseup:鼠标松开始触发

mouseover:鼠标移入时触发

mouseout:鼠标移除时触发

mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发

mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发

mousemove:当鼠标指针在元素内部移动时重复地触发

鼠标双击事件运行的顺序:

mousedown-----mouseuo-----click-----mouseup-----dblclick

滚轮事件

1. 客户区坐标位置

clientX、clientY:事件发生时鼠标指针在视口中的水平和垂直坐标

2. 页面坐标位置

pageX、pageY:事件发生时鼠标光标在页面中的位置。

在页面没有滚动的情况下,pageX和clientX他们的值相等。

3. 屏幕坐标位置

screenX、screenY:鼠标事件发生时鼠标指针相对于整个电脑屏幕的坐标信息

4. 鼠标滚轮事件

mousewheel事件的wheelDelta:wheelDelta是120的倍数,上滚正数,下滚负数,测试的时候,我的竟然是150.。。

5. 触摸设备ios与android

不支持dblclick事件。双击浏览器窗口会放大

轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化,将不再有其他事件发生。如果屏幕没有发生变化,那么会一次进行mousedown、mouseup和click事件。

轻击不可单击元素不会发生变化。

mousemove事件也会触发mouseover和mouseout事件

两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件

键盘与文本事件

keydown:当用户按下键盘上的任意键时触发,如果按住不放则重复触发

keypress:当用户按下键盘上的字符键时触发,如果按住不放则重复触发

keyup:当用户释放键盘上的按键是触发

keyCode:他是一个属性,返回ASCII码中和你按下去的字符相同的值

内存和性能

在页面中添加大量的处理程序,会使内存和性能受到影响。

解决方案——事件委托。

利用事件冒泡,只指定一个事件处理程序,管理整个页面的事件。

思路——switc case。。。。,然后判断点击的是哪个对象,像ul里,只要给ul元素添加一个onclick事件,会冒泡到所有li里面,判断对象class或者id就行。

最适合采用事件委托的事件包括click、mousedown、mouseup、keydown、keyup和keypress

相关文章

  • 事件(下)

    事件类型 UI事件 load:当页面完全加载后在window上面触发,当所有框架加载完成后在框架集上触发,图像加载...

  • 突然事件(下)

    在学校后园区荒废的仓库门口,利停下了脚步。他不知道自己是怎么走到这个以前八辈子都不曾想过会踏足的地方。巨大的空旷场...

  • 减肥事件(下)

    中午沟通的时候,冯姐特别兴奋,告诉我,根据我这几天的反馈,得出了我最终减肥后的数据,会超预期的好,还具体跟我描述了...

  • 鼠标点击事件流

    总结一下鼠标从按下触发的事件,和事件的冒泡情况。 事件类型:mousedown(按下),mousemove(移动)...

  • jQuery事件(2)

    键盘事件 (一)、keydown()(鼠标按下)事件 & keyup()(鼠标弹起)事件 keydown事件:每次...

  • (17.05.03)键盘事件、DOM、jq中的解绑事件、原生和j

    键盘事件    键盘按下事件        onkeydown    键盘抬起事件        onkeyup ...

  • 怎么区分鼠标是单击还是拖动?

    js的鼠标事件 拖拽常用事件 onmousedown 鼠标按下触发事件onmousemove 鼠标按下时持续触发事...

  • 幸运失踪事件(下)

    文/鱼筱豆 01 『滴滴滴~滴滴滴~滴滴滴』闹钟响了,幸运无力地伸出手,摸到了闹钟,把它关掉。她慢慢睁开眼睛,仿佛...

  • JavaScript--事件(下)

    一、注册事件处理程序 注册事件处理程序有两种基本方式: (1)一种是给事件目标对象或文档元素设置属性。 按照约定,...

  • 灵异事件(下)

    第二件事就更奇怪了!而事情仍然和扫墓有关。那年我七十三岁,正是民间所谓的「七十三,八十四什么什么的」。但是,清明祭...

网友评论

      本文标题:事件(下)

      本文链接:https://www.haomeiwen.com/subject/lgajnxtx.html