当前位置:首页 > HTML技巧 > 正文

浏览器中5种常用的事件解析

05-20 HTML技巧
本篇文章给大家带来的内容是关于浏览器中常用的事件解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

表单事件

键盘事件

<input>, <textarea> 的值发生变化时触发。此外,打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件。input 事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件。

此类事件包括: keydown, keyup,

鼠标事件

select 事件当在<input>, <textarea>中选中文本时触发

change 事件当<input>, <select>, <textarea>的值发生变化时触发。它与 input 事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发,而且input事件必然会引发change事件。具体来说,分成以下几种情况:

  • 激活单选框(radio)或复选框(checkbox)时触发。

  • 用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。

  • 当文本框或textarea元素的值发生改变,并且丧失焦点时触发。

  • reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。

  • submit事件当表单数据向服务器提交时由form元素触发。

  • 文档事件:

    beforeunload

    beforeunload 事件当窗口将要关闭,或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中,调用了 event.preventDefault(),或者对事件对象的 returnValue 属性赋予一个非空的值,就会自动跳出一个确认框,让用户确认是否关闭网页。如果用户点击“取消”按钮,网页就不会关闭。监听函数所返回的字符串,会显示在确认对话框之中:

      window.addEventListener('beforeunload', function(event) {
        if(event.preventDefault){
          event.preventDefault();
        } else {
          event.returnValue = '你确认要离开吗?';
        }
      });

    unload 与 load

    unload 事件在窗口关闭或者 document 对象将要卸载时触发,发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发,换言之,如果通过按下“前进/后退”导致页面卸载,并不会触发 unload 事件。当 unload 事件发生时,document 对象处于一个特殊状态。所有资源依然存在,但是对用户来说都不可见,UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误,也不能停止文档的卸载。

    load事件在页面加载成功时触发,error事件在页面加载失败时触发。注意,页面从浏览器缓存加载,并不会触发load事件。

    这两个事件实际上属于进度事件,不仅发生在 document 对象,还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程,图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象,都会触发 load 事件和 error 事件。

    pageshow 与 pagehide

    pageshow事件,pagehide事件: 默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进/后退”按钮时,浏览器就会从缓存中加载页面。
    pageshow 事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load 事件不会触发,因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性,返回一个布尔值。页面第一次加载时,这个属性是false;当页面从缓存加载时,这个属性是true。

    document.onpageshow = function(event){}
      if(event.persisted){
        //如果存缓存加载
      }
    }

    同样的,将这个属性设为 true,就表示页面要保存在缓存中;设为 false ,表示网页不保存在缓存中,这时如果设置了 unload 事件的监听函数,该函数将在 pagehide 事件后立即运行。如果页面包含 frame ,则 frame 页面的 pageshow 事件和 pagehide 事件,都会在主页面之前触发。

    DOMContentLoaded 和 readystatechange

    DOMContentLoaded 事件当 HTML 文档下载并解析完成以后,就会在 document 对象上触发 DOMContentLoaded 事件。这时,仅仅完成了 HTML 文档的解析(整张页面的DOM生成),所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说,这个事件比 load 事件,发生时间早得多。注意,网页的 JavaScript 脚本是同步执行的,所以定义 DOMContentLoaded 事件的监听函数,应该放在所有脚本的最前面。否则脚本一旦发生堵塞,将推迟触发 DOMContentLoaded 事件。此外,IE8 不支持 DOMContentLoaded 事件,可以使用 readystatechange 事件代替。

    readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象,当它的 readyState 属性发生变化时触发。

    其他文档级事件

    上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件,此外还有一下事件:

  • onafterprint: 文档打印之后运行的脚本

  • onbeforeprint: 文档打印之前运行的脚本

  • onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)

  • onerror: 在错误发生时运行的脚本

  • onhaschange: 当文档已改变时运行的脚本

  • onload: 页面结束加载之后触发(上文已涉及)

  • onmessage: 在消息被触发时运行的脚本

  • onoffline: 当文档离线时运行的脚本

  • ononline: 当文档上线时运行的脚本

  • onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)

  • onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)

  • onpopstate: 当窗口历史记录改变时运行的脚本

  • onredo: 当文档执行撤销(redo)时运行的脚本

  • onresize: 当浏览器窗口被调整大小时触发

  • onstorage: 在 Web Storage 区域更新后运行的脚本

  • onundo: 在文档执行 undo 时运行的脚本

  • onscroll: 事件在文档或文档元素滚动时执行脚本

  • 鼠标事件 与 MouseEvent对象

    new MouseEvent(typeArg, mouseEventInit);

    内置的鼠标事件包括:

    1. mousedown: 按下鼠标

    2. mouseup: 鼠标抬起

    3. click: 点击

    4. dblclick: 双击

    5. mousemove: 鼠标移动

    6. mouseover: 鼠标移入,冒泡

    7. mouseout: 鼠标移出,冒泡

    8. mouseenter: 鼠标移入,不冒泡

    9. mouseleave: 鼠标移出,不冒泡

    10. contextmenu: 右键菜单

    11. wheel: 滚轮事件

    其具有如下常用属性:

  • altKey,ctrlKey,metaKey,shiftKey属性返回一个布尔值,表示鼠标事件发生时,是否按下某个键;

  • button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值),2(右键),可通过switch来选择执行分之);

  • buttons 属性返回一个3个比特位的值,表示同时按下了哪些键

  • clientX,clientY 返回鼠标位置相对于浏览器窗口左上角的坐标,单位为像素

  • screenX,screenY 返回鼠标位置相对于屏幕左上角的坐标,单位为像素

  • 版权保护: 转载请保留链接: http://www.jinfanpack.com/5105.html

  •