【JavaScript 】事件

基本概念

  • 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到的行为。
  • 网页中的每个元素都可以产生某些事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。

事件处理(添加事件)

  • (HTML事件处理)内联方式添加事件将事件看做标签的一个属性,与HTML混写,代码多时不容易管理
  • (DOM0级事件处理)脚本方式添加事件,实现了HTML和JS的分离
  • DOM2级事件处理
    • ele.addEventListener()
    • ele.removeEventListener()
    • IE8及其以下需要使用IE事件处理程序attachEvent/detachEvent

常用的事件类型(事件处理函数)

    鼠标事件

    • onclick 鼠标点击某个对象 (单击)
    • ondblclick 当用户双击某个对象时调用的事件句柄。(双击)
    • oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发(右键单击)
    • onmousedown 鼠标按钮被按下。(按下)
    • onmouseup 鼠标按键被松开。(松开)
    • onblur 失去焦点时(比如说同步文本框的内容)
    • onchange 事件会在域的内容改变时发生。
    • onmousemove 鼠标被移动。
    • onmouseout 鼠标从某元素移开。(移开)
    • onmouseover 鼠标移到某元素之上。(移进)
    • ......

    键盘事件

    • onkeydown 某个键盘按键被按下。
    • onkeyup 某个键盘按键被松开。
    • onkeypress 某个键盘按键被按下并松开。

    • onkeydown与onkeypress的区别
      • 一个放开一个没有放开,onkeydown 先于 onkeypress 发生。
      • 我们没敲击一下键盘这三个事件会依次发生:onkeydown--onkeypress--onkeyup
      • onkeypress 事件不是适用于系统按钮(如: ALT, CTRL, SHIFT, ESC)。
      • onkeydown 是在用户按下任何键盘键时发生。 监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。
      • 键盘事件的event对象中包含一个keyCode属性,onkeydown和onkeyup表示你按下的具体的键,而onkeypress表示你按下的字符。
    • ......

    其他事件

    • onload 一个页面或一幅图像完成加载
    • onunload 用户退出页面。存在兼容性问题;

      IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行.
      IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行;
      Opera、Chrome 任何情况都不执行。

    • onblur 元素失去焦点。
    • onfocus 元素获得焦点。
    • onselect 文本被选中。
    • onabort 图像的加载被中断
    • onchange 域的内容被改变。
    • onerror 在加载文档或图像时发生错误。
    • onreset 重置按钮被点击。
    • onscroll 当文档被滚动时发生的事件。
    • ......

事件的对象

    在触发某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。

  • type:获取事件类型
  • target:获取事件目标
  • clientX 返回当事件被触发时,鼠标指针的水平坐标。
  • clientY 返回当事件被触发时,鼠标指针的垂直坐标。
  • screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
  • screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
  • keyCode 事件属性 keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。
  • which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。
  • 注意:IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是, keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。
    var x = event.which || event.keyCode; // 使用 which 或 keyCode, 这样可支持不同浏览器

  • ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
  • altKey 返回当事件被触发时,"ALT" 是否被按下。
  • shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。
  • button 返回当事件被触发时,哪个鼠标按钮被点击。

    button 事件属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击。event.button=0|1|2
    0 1 2分别代表左中右三个键,但是再IE里左中右三个键对应的数字为1 4 2

  • ......

事件的冒泡和捕获

  • 事件的冒泡:事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。

    事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

  • 事件的捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。

    事件捕获时,父级元素先触发,子级元素后触发

  • 可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
  • IE9以前的版本只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

  • 不是所有的事件都能冒泡,例如:blur、focus、load、unload
  • stopPropagation():阻止事件冒泡
  • preventDefault():阻止事件的默认行为
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注