技术思考 【常用事件】

刀刀小站
129 阅读6分钟

常用事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件可以是浏览器行为，也可以是用户行为。

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

js 中的常用事件

鼠标事件

属性描述
onclick当用户点击某个对象时调用的事件句柄。
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
ondblclick当用户双击某个对象时调用的事件句柄。
onmouseup鼠标按键被松开。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseover鼠标移到某元素之上。
onmouseout鼠标从某元素移开。
onmouseenter当鼠标指针移动到元素上时触发。
onmouseleave当鼠标指针移出元素时触发

注意：

事件 mouseover 、 mouseout 与 mouseenter 、 mouseleave 相比最大的区别是前者会有事件冒泡的影响，后者不会。

键盘事件

属性描述
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。

框架/对象事件

属性描述
onbeforeunload该事件在即将离开页面（刷新或关闭）时触发
onerror在加载文档或图像时发生错误。 ( <object> , <body> 和 <frameset> ) 
onhashchange该事件在当前 URL 的锚部分发生修改时触发。
onload页面结构与图片资源解析完成
onresize窗口或框架被重新调整大小。
onscroll当文档被滚动时发生的事件。
onunload用户退出页面。 ( <body> 和 <frameset> )
DOMContentLoaded页面结构加载完成

注意：

事件 load 与事件 DOMContentLoaded 的区别在于 DOMContentLoaded等页面结构加载完毕就触发回调函数，而 load 还要等待图片、表单等资源解析完毕才触发回调函数。因此 DOMContentLoaded 的速度比 load 要快。

表单事件

属性描述
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select> 和 <textarea>)
onfocus元素获取焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onsearch用户向搜索域输入文本时触发 ( <input="search"> )
onselect用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit表单提交时触发

鼠标/键盘事件对象

属性描述
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
key在按下按键时返回按键的标识符。
keyCode返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
which返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。

js 中的几种 width

如果想要用 js 获取到盒模型的宽度，使用 div.style.width 是无法获取到的，必须使用以下四种方式获取。而每个方法获取到的值又不相同。

scrollWith

获取元素的内容总宽度（内容+内边距）

  1. 不包含滚动条
  2. 不包含边框
  3. 返回值不带单位

clientWidth

获取元素的可见部分宽度（内容+内边距）

  1. 不包含滚动条
  2. 不包含边框
  3. 返回值不带单位

offsetWidth

获取元素的自身宽度（内容+内边距+边框）

  1. 不包含滚动条
  2. 返回值不带单位

pageWidth

取得浏览器可见区域的大小，包括滚动条的宽

  1. 不包含边框
  2. 返回值不带单位

详细讲解：元素大小三大家族

案例

电梯案例

整体效果如下图所示。

电梯.png

点击左侧的导航栏会有一个锚点链接的效果，让页面右侧的主体部分滚动当前对应的内容面板的顶部。

解析思路：

  1. 获取事件源左侧导航栏与右侧主体部分。
  2. 遍历左侧导航栏，点击时触发回调函数：
    1. 点击第几个导航栏则第几个主体模块触顶，因此要利用索引号进行一一对应。
    2. 获取到该索引号的主体模块距离页面顶部的距离， offsetTop 最合适。
    3. 让页面顶部被卷去的距离等于这个 offsetTop 的值就能让该主体模块触顶。
let items = document.querySelectorAll('.item')
let neirongs = document.querySelectorAll('.neirong')

// 为左侧导航项绑定事件--伪数组需要遍历
items.forEach(function(ele, index) {
  ele.addEventListener('click', function() {
    document.querySelector('.item.active').classList.remove('active')
    ele.classList.add('active')

    // 获取与这个导航项对应的内容面板
    let current = neirongs[index]
    // 让页面滚动当前对应的内容面板离顶部的距离
    document.documentElement.scrollTop = current.offsetTop
  })
})

总结：

  1. 获取页面顶部被卷曲距离是用 document.documentElement.scrollTop 来获取。
  2. 三大家族的 top 区别：
    • scrollTop ：获取元素内容往上滚出去看不到的距离，即滚动条往右滚动时左方被卷去文字的长度。
    • offsetTop ：获取元素距离自己定位父级元素的上距离。
    • clientTop ：获取上边框宽度。

固定导航栏案例

整体效果如下所示。

固导.png

一般情况下顶部导航栏模块随着页面滚动而滚动，当页面滚动到导航栏顶部时，导航栏变成固定定位。

解析思路：

  1. 获取事件源顶部导航栏和主体部分。
  2. 获取导航栏距离页面顶部的距离 navTop 与导航栏真实高度。
  3. 为页面绑定滚动事件，滚动页面时触发回调函数：

    1. 获取当前页面被卷曲的距离。

    2. 判断，如果页面被卷曲的距离大于等于 navTop 的值，说明滑动到导航栏那里了，此时把导航栏变为固定定位，让下面的主体模块上外边距为导航栏真实高度。没设置上外边距效果如下图所示。

      没上外.png

    3. 如果不符合，则取消导航栏的固定定位，让主体部分上外边距恢复。

let navBar = document.querySelector('#navBar')
let navTop = navBar.offsetTop
let navHeight = navBar.offsetHeight
let main = document.querySelector('.main')

window.addEventListener('scroll', function() {
    let scrollTop = document.documentElement.scrollTop
    if (scrollTop > navTop) {
        // 把元素变成固定定位会造成元素脱标，导致下面的元素挤到上面
        navBar.classList.add('fixed');
        // 要为下面的元素添加上外边距,值为导航条的高度
        main.style.marginTop = navHeight + 20 + 'px'
    } else {
        navBar.classList.remove('fixed')
        main.style.marginTop = '10px'
    }
})
avatar
文章
阅读
粉丝