JavaScript中的跨浏览器事件操作的基本方法整理

2024-04-02 12:23:13

绑定事件

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理，IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加'on'
    //IE9也可以这样绑定
    element.attachEvent('on' + type,handler);
  }
  //DOM0级事件处理步，事件流也是冒泡
  else{
    element['on' + type] = handler;
  }
};

取消绑定事件
和绑定事件的处理基本一致，有一个注意点：
传入的handler必须与绑定事件时传入的相同（指向同一个函数）

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent('on' + type,handler);
  }
  else{
    //属性置空就可以
    element['on' + type] = null;
  }
};

跨浏览器添加事件

  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent('on'+type,fn);
    }
  }

跨浏览器移除事件

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent('on'+type,fn);
  }
}

跨浏览器阻止默认行为

function preDef(ev){
    var e = ev || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue =false;
    }
  }

跨浏览器获取目标对象

function getTarget(ev){
  if(ev.target){//w3c
    return ev.target;
  }else if(window.event.srcElement){//IE
    return window.event.srcElement;
  }
}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll position
  function getSP(){
    return{
      top: document.documentElement.scrollTop || document.body.scrollTop,
      left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
  }

跨浏览器获取可视窗口大小

     function getWindow () {
      if(typeof window.innerWidth !='undefined') {
        return{
          width : window.innerWidth,
          height : window.innerHeight
        }

      } else{
        return {
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
        }
      }
    },

JavaScript中解决多浏览器兼容性23个问题的快速解决方法

一.document.formName.item("itemName") 问题问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa
js阻止浏览器默认行为的简单实例

js阻止浏览器默认行为的简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a> <script> fun
js判断主流浏览器类型和版本号的简单实现代码

如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及使用的版本是多少,并根据返回值,给予一定的提示,下面,我就简单的介绍一种判断用户浏览器的使用情况的代码. var distinguishBrowser= function browserInfo() { var browser = { // IE浏览器 msie: false, // 谷歌浏览器 c
js 浏览器版本及版本号判断函数2009年

js判断浏览器版本及版本号 window["MzBrowser"]={};(function() { if(MzBrowser.platform) return; var ua = window.navigator.userAgent; MzBrowser.platform = window.navigator.platform; MzBrowser.firefox = ua.indexOf("Firefox")>0; MzBrowser.opera = ty
js阻止浏览器默认行为触发的通用方法(推荐)

js阻止浏览器默认行为触发的通用方法(推荐) //阻止浏览器默认行为触发的通用方法 function stopDefault(e){ //防止浏览器默认行为(W3C) if(e && e.preventDefault){ e.preventDefault(); } //IE中组织浏览器行为 else{ window.event.returnValue=fale; } return false; } 以上这篇js阻止浏览器默认行为触发的通用方法(推荐)就是小编分享给大家的全部内容了,希望能给
js阻止默认浏览器行为与冒泡行为的实现代码

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1. 阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault(); } else { //IE中阻止函数器默认动作的方式 window.event.returnVa
javascript 浏览器类型和版本号检测代码(兼容多浏览器)

javascript检测浏览器类型和版本号(兼容各浏览器) var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) { browserType = "Opera"; } else if (uA.indexOf("Safari") > -1) { browserType = "Safar
JavaScript中的跨浏览器事件操作的基本方法整理

绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /
JavaScript中防止微信浏览器被整体拖动的方法

在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出"该网页由XXX提供"的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验.
javascript Range对象跨浏览器常用操作第1/2页

开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/
javascript中兼容主流浏览器的动态生成iframe方法

以下代码在IE8下运行通过,在IE9中出错: 复制代码代码如下: document.createElement('<iframe id="yige-org-iframe" src="yige.org.logo.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>'); 错误提示:excep
探究JavaScript中的五种事件处理程序方式

我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数. 我们又把事件处理程序称为事件侦听器. 事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在JavaScript中大致有五种,下面会根据这五种
JavaScript中BOM,DOM和事件的用法详解

目录 BOM 概念对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分核心DOM模型 HTML DOM 事件监听机制概念常见的事件事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo
javascript 中select框触发事件过程的分析

javascript 中select框触发事件过程的分析我们书写了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了select上面,模拟客户选择相关事件的触发流程: 最后发现,触发的过程基本上一样,如果没有选择或者选择的是当前显示的option的话,不会触发change事件,只有在选择不同的option时候才会触发change事件.下面是选择了不同的option后触发事件的截图: 我们可以发现,做出改变了
JavaScript中iframe实现局部刷新的几种方法汇总

Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新. Iframe的用法与普通的标签元素DIV类似,可以指定在页面中嵌入的位置.颜色.界面布局等一.iframe实现局部刷新方法一 <script type="text/javascript"> $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $(&q
javascript中利用柯里化函数实现bind方法【推荐】

• 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

JavaScript中的跨浏览器事件操作的基本方法整理

相关推荐

随机推荐