首页 > 编程语言 >JavaScript原生兼容大全-持续更新

JavaScript原生兼容大全-持续更新

时间:2023-05-08 11:11:35浏览次数:33  
标签:function eventType JavaScript attachEvent element callback 兼容 event 大全

JavaScript兼容-持续更新

1.css非行内样式操作

// currentStyle用于IE低版本 getComputed用于主流浏览器
// element 目标元素   attribute 目标属性
function getStyle(element, attribute) {
  return element.currentStyle ? element.currentStyle(attribute) : getComputed(element)[attribute];
}

2.事件添加删除

// attachEvent/detachEvent用于IE低版本 addEventListener/removeEventListener用于主流浏览器

// element 事件源(目标元素)    eventType 事件类型    callback 事件行为
// 添加
function addEvent(element, eventType, callback) {
  // element.attachEvent ? element.attachEvent(`on${eventType}`, callback) : element.addEventListener(eventType, callback);
  if (ele.attachEvent) {
    ele.attachEvent('on' + type, callback);
  } else {
    ele.addEventListener(type, callback);
  }
}

//删除
function removeEvent(element, eventType, callback) {
  // element.detachEvent ? element.detachEvent(`on${eventType}`, callback) : element.removeEventListener(eventType, callback);
  if (ele.attachEvent) {
    ele.detachEvent('on' + type, callback);
  } else {
    ele.removeEventListener(type, callback);
  }
}

3.事件对象

// window.event用于IE低版本 event用于主流浏览器
element.onEventType = function(event) {
  var e = event || window.event;
}

4.阻止冒泡

// cancelBubble = true用于IE低版本 stopPropagetion用于主流浏览器
element.onEventType = function(event) {
  var e = event || window.event;
  // e.stopPropagetion ? e.stopPropagetion() : e.cancelBubble = true;
  if (e.stopPropagetion) {
    e.stopPropagetion();
  } else {
    e.cancelBubble = true;
  }
}

5.键盘keyCode

// which用于IE低版本 keyCode用于主流浏览器
element.onEventType = function(event) {
  var e = event || window.event;
  var code = e.keyCode || e.which;
}

6.取消默认行为

// returnValue用于IE低版本 preventDefault用于主流浏览器
element.onEventType = function(event) {
  var e = event || window.event;
  e.preventDefault ? e.preventDefault() : e.returnValue;
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue;
  }
  // return false 写在函数最后 也可以阻止默认事件 没有兼容问题
}

标签:function,eventType,JavaScript,attachEvent,element,callback,兼容,event,大全
From: https://www.cnblogs.com/SpicyPeper/p/17381111.html

相关文章

  • JavaScript fromCharCode() 方法
    fromCharCode()方法返回指定的Unicode编码对应的字符。语法格式:String.fromCharCode(n1,n2,...)参数:n1,n1,..表示指定的Unicode编码。示例:(1)返回指定Unicode编码的字符:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">&......
  • JavaScript 笔记
    JavaScript简介JavsScript于1995年由BrendanEich用时10天写出,用于网景浏览器。最初的名字叫LiveScript,也被部分员工称为Mocha。那时Java语言很流行,出于商业化的考量,更名为JavaScript,但两者之间没有关联。最早的JS作为脚本语言给浏览器增加一些诸如鼠标跟随等交......
  • 使用 JavaScript连接Oracle 数据库(js连接oracle)
    原文链接 在建立Web交互应用程序时,一般使用JavaScript语言作为表现层,而Oracle作为背后真正的数据库。连接JavaScript和Oracle数据库需要一组技术,可以实现将JavaScript执行的数据请求发送到服务器上的Oracle数据库,这样就可以访问和操作Oracle数据库中的相关内容。 在建立Web......
  • JavaScript实训
    程序结构分支结构if分支任务1设计程序界面如下图所示,在文本框输入整数,使用if分支,先判断它是否是数字,如果是,再判断它的奇偶性,结果在弹出窗口(alert)中显示。提示:isNaN(<字符串>)用来判断<字符串>是否不是数字,如果不是数字,该函数返回true,否则返回false。点击查看代码<!D......
  • 操作系统镜像文件大全(ISO)
    关键字:操作系统镜像文件大全(ISO)下面是操作系统的镜像文件下载地址,希望能对大家提供帮助,谢谢:http://hi.baidu.com/eastenh/blog/item/0dba8d10545dc36bca80c4ca.html......
  • JavaScript封装大全
    JavaScript封装大全-持续更新Ajax封装//使用该封装需注意//Ajax(method(默认GET),url(网址必传),success(res){(成功时数据处理函数必传)},error(res)(失败时数据处理函数),data(网址中qurey部分用对象形式存储默认为空))//使用ES6语法classAjax{//解构传......
  • javaScript 常用去除 ‘console
    javaScript常用去除‘console.log’办法手动注释掉console.log语句:可以手动在代码中注释掉所有console.log语句,但是这种方法比较繁琐,并且需要手动维护,不太适合大型项目。使用Babel插件去除console.log:Babel是一个JavaScript编译器,它可以将ES6+的代码转换成......
  • Mac M系列芯片 vue前端node-sass兼容问题解决
    0、由于M系列芯片是arm架构,在使用brew安装node时都是arm的node,但是[email protected]版本中不支持arm架构的出现如下报错:Error:NodeSassdoesnotyetsupportyourcurrentenvironment:OSXUnsupportedarchitecture(arm64)withUnsupportedruntime(88)Formoreinfor......
  • JavaScript 面试题
    一、event.stopPropagation和 event.preventDefault的区别1、event.stopPropagation(停止传播)   用于阻止捕获和冒泡事件的进一步传播。但是不能阻止同一Dom节点上的其它事件被调用。2、event.preventDefault(阻止默认)   方法可防止元素的默认行为。比如a标签的......
  • 查看Linux系统版本内核命令大全
    目录命令一:查看当前系统发行版本详细信息命令二:查看当前系统内核信息命令三:查看当前系统版本信息命令四:查看CPU相关信息命令五:查看系统位数Linux系统内核、发行版本有很多,那么如何查看当前Linux系统的内核信息、Linux系统发行版本等信息呢?Linux百科网分享查询Linux系统详细信息的方......