利用bindEvent() unBindEvent()检测用户浏览器类型

该事件绑定函数具有如下特点:

1、在事件函数中,this指向的是当前元素

2、每个事件其实是一个有序列,按顺序执行这个序列。

3、正确的传递了event对象。对于event对象在w3c标准与ie中的不同之处可以做出修复,本例修复了事件冒泡与阻止默认行为。

4、本机测试通过ie、firefox、chrome、opera、safari(可以说通用主流浏览器)

5、支持删除事件绑定

 

// ---------- 事件绑定与删除绑定 ---------- //
function bindevent(element, eventname, func) {
    var events = element['the'+eventname];    //用于保存某个事件序列
    if(!events) {  //如果不存在一个序列,则创建它,并加入html标记当中的onevent = function(){}形式的绑定
        events = element['the'+eventname] = [];
        if (element['on'+eventname]) { events.push(element['on'+eventname]); }
    }
   
    //检测是否为重复绑定
    for(var i=0; i<events.length; i++) {
        if(events[i] === func) { flag = true; break; }
    }
   
    // 非重复绑定,则加入该函数事件
    if(i >= events.length) { events.push(func); }
   
    // 重新定义这个事件的执行方式
    element['on'+eventname] = function(event) {
        event = event || (function() { //修复ie的事件对象
            var e = window.event;
            e.preventdefault = function() { e.returnvalue = false; }
            e.stoppropagation = function() { e.cancelbubble = true; }
            //根据需要继续修复
            return e;
        })();
        //顺序执行这些函数
        for(var i=0; i<events.length; i++) { events[i].call(element, event); }
    }
}

// 删除事件绑定
function unbindevent(element, eventname, func) {
    var events = this['the'+eventname];
    //如果不存在一个事件序列
    if(!events) { return false; }
   
    //检测该函数是否存在该事件序列当中
    for(var i=0; i<events.length; i++) {
        if(func === events[i]) {
            [].splice.call(events, i, 1);
            return true;
        }
    }
   
    // 函数不存在该事件序列当中
    return false;
}

测试代码

<script type="text/网页特效" src="event.js"></script>
<script type="text/javascript">
bindevent(window, 'load', function() {
    var ul = document.getelementbyid("test");
    var a = document.getelementbyid("baidu");
   
    bindevent(ul, 'click', function(e){
        alert("我是" + this + "元素, 你点击了我!");
    });
   
   
    bindevent(a, 'click', function(e) {
        alert("我是" + this + ",你点击了我!");
    });
   
});
</script>
</head>

<body>
<ul id="test">
  <p class="t">hello,world!</p>
  <p>hello,<a href="http://www.111cn.net" id="baidu">百度</a>!</p>
  <li id="haha" class="t">afasdfsa</li>
  <li>sfk</li>
  <li class="t">sdklfajsfjk</li>
  <li>end</li>
  <li class="te">of</li>
</ul>
<ol id="test2">
  <li class="t">附加的第一项</li>
  <li class="t">附加的第二项</li>
  <li class="t">附加的第三项</li>
</ol>

上面代码测试可以通过现在主流的浏览器如有本机测试通过ie、firefox、chrome、opera、safari(可以说通用主流浏览器)

时间: 2024-09-12 06:59:13

利用bindEvent() unBindEvent()检测用户浏览器类型的相关文章

js检测用户浏览器类型

提示:您可以先修改部分代码再运行 浏览器名称: 版本号: 代码名称: 用户代理标识: 提示:您可以先修改部分代码再运行

javascript userAgent 获取用户浏览器类型

网页特效 useragent 获取用户浏览器类型 var useragent = navigator.useragent.tolowercase(); useragent属性语法 navigator.useragent; useragent属性说明 属性   描述   appcodename   获取浏览器的代码名称.   appminorversion   获取应用程序的次版本值.   appname   获取浏览器的名称.   appversion   获取浏览器运行的平台和版本.   br

js判断用户浏览器类型

js判断用户浏览器类型 var lang = new Array(); var userAgent = navigator.userAgent.toLowerCase(); var is_opera = userAgent.indexOf('opera') != -1 && opera.version(); var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('f

js根据用户浏览器类型调用不同菜单效果

js根据用户浏览器类型调用不同菜单效果 <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- var bV=parseInt(navigator.appVersion); var NS4=(document.layers) ? true : false; var IE4=((document.all)&&(bV>=4))?true:false; var ver4 = (NS4

php判断用户浏览器类型是否为微信浏览器

PHP方法:利用PHP的"_SERVER "数组"HTTP_USER_AGENT"项,获取该页面的用户代理的信息,来完成这个工作.  代码如下 复制代码 <?php echo $_SERVER["HTTP_USER_AGENT"]; ?> [winows/chrome] 输出结果: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Ch

JavaScript教程:JavaScript如何判定用户浏览器类型和版本号?

function userAgent(){   var ua = navigator.userAgent;   ua = ua.toLowerCase();  var match = /(webkit)[ \/]([\w.]+)/.exec(ua) ||    /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||   /(msie) ([\w.]+)/.exec(ua) ||   !/compatible/.test(ua) && /(mozil

js判断用户浏览器类型并判断支持事件

var isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined'); var isIE = window.ActiveXObject ? true : false; var isFirefox = (navig

js检测用户浏览器支持flash版本号实现代码

 代码如下 复制代码 (function(){ ver has=0, ver=0; try{ has=new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if(has) { ver = +(has.GetVariable("$version").match(/d+/)); } } catch(e){ has=navigator.plugins["Shockwave Flash"]; if(has) { ver =

asp 判断用户浏览器类型程序

Thesoft=Request.ServerVariables("HTTP_USER_AGENT") If instr(thesoft,"Windows NT 5.0") Then  vOS="Win2000" ElseIf instr(thesoft,"Windows NT 5.2") Then  vOs="Win2003" ElseIf instr(thesoft,"Windows NT 5.