zoukankan      html  css  js  c++  java
  • DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理

    1 /* 
    2  * 功能: 事件对象兼容
    3  * 参数: 表示常规浏览器的事件对象e
    4  */
    5 function getEvent(e) {
    6     // 如果存在e存在,直接返回,否则返回window.event
    7     return e || window.event;
    8 }


    获取事件所对应的目标——兼容处理

     1 /*
     2  * 功能: 获取事件所对应的目标
     3  * 参数: 表示常规浏览器的事件对象e
     4  */
     5 function getTargetByEvent(e) {
     7     // 如果存在e.target,直接返回,否则返回window.event.srcElement
     8     return e.target || window.event.srcElement;
     9 }


    添加事件——兼容处理

     1 /*
     2  * 功能: 添加事件
     3  * 参数:
     4  */
     5 function addEventHandler(element, eventName, handler) {
     6     // 三目(条件)运算符,如果存在document.addEventListener直接调用,否则调用document.attachEvent这个方法
     7     document.addEventListener ? element.addEventListener(eventName, handler, flase) : element.attachEvent('on' + eventName, handler);
     8 }

    阻止默认事件——兼容处理

     1 /*
     2  * 功能: 阻止默认事件
     3  * 参数: 表示要阻止的事件对象
     4  */
     5 function stopDefaultEvent(e) {
     6     // 三目(条件)运算符,如果存在e.preventDefault直接调用,否则使用window.event.returnValue = false;
     7     e.preventDefault ? e.preventDefault() : (window.event.returnValue = false);
     8 }

    阻止冒泡事件——兼容处理

     1 /*
     2  * 功能: 阻止冒泡事件
     3  * 参数: 表示要阻止的事件对象
     4  */
     5 function stopBubbleEvent(e) {
     6     e.stopPropagation ? e.stopPropagation() : (window.event.cancelBubble = true);
     7 }

    以上为一些事件对象所涉及到的兼容处理。
    其实JS的兼容处理比较简单,无非就是判断浏览器是否有此方法(对象),如果有的话,就直接调用(获取),否则使用另外的方法。

  • 相关阅读:
    bzoj 2216 Lightning Conductor
    一些有趣的问题合集
    Codeforces 40E Number Table
    Codeforces 37D Lesson Timetable
    bzoj 4289 Tax
    bzoj 2844 albus就是要第一个出场
    bzoj 2115 Xor
    luogu 3790 文艺数学题
    bzoj 1420 Discrete Root
    Lucas定理学习笔记
  • 原文地址:https://www.cnblogs.com/wuyuchang/p/3905301.html
Copyright © 2011-2022 走看看