JavaScript中的事件与事件类型

最新推荐文章于 2023-03-12 23:46:01 发布

原创最新推荐文章于 2023-03-12 23:46:01 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了事件处理的基本概念，包括事件源、事件处理程序和事件对象，并讲解了不同类型的DOM事件，如onload、onscroll、焦点事件及各种鼠标事件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4. 事件

事件处理程序中的 this, 是指前面的事件源对象.

4.1 事件的三要素:

事件源:事件发生在哪个元素上
事件处理程序:给事件赋的函数
事件对象 (包含事件发生的所有的信息: 事件源是谁, 发生的坐标, 什么阶段....)

DOM0级事件处理:

var div = document.querySelector("div");
div.onclick = function (){
    ......
}

DOM0事件处理程序一个元素对同一个事件类型只能添加一个事件处理.

4.2 事件类型

onload事件
- 用来页面加载完成后触发函数
  - window.onload = function(){}
- 用来图片加载完成后触发函数
  - img.onload = function(){}

onscroll事件

滚轮事件,一般也是监听window

window.onscroll = function(){}

滚轮中可以使用scrollTop来检查距离当前滚轮与最上侧的距离,使用这个属性可以时刻监测滚轮跟随文字的增多而滚动

function ulScroll() {
   var timeId = setInterval(function fun() {
   var top1 = bottom.scrollTop;   //监测最开始的滚轮距离
   bottom.scrollTop += 3;     //滚轮一次滚动3个像素   不用带单位
   var top2 = bottom.scrollTop;  //监测滚轮滚动后的像素
       if(top1 == top2){        //一旦两个数相等证明已经到了末端
           clearInterval(timeId);
        }
   },20)
  }

焦点事件

一般用于input
onfocus  获取焦点事件
onblur   失去焦点事件

鼠标事件包括单击 onclick
双击 ondblclick
按下任意的鼠标按钮 onmousedown
释放鼠标按钮 onmouseup
移动到某一个元素上 onmouseover
从某一个元素上移走 onmouseout
在某一个元素内部移动 onmousemove 只要移动会循环触发