兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8"/>
    <title>测试事件绑定函数</title>
    <script>
        window.onload = function(){
            var liObj, ulObj;
            ulObj = document.getElementsByTagName(‘ul‘)[0];
            addEvent(ulObj, ‘click‘, clickObjLi)

        };

        //兼容IE和非IE浏览器
        function addEvent(ele, event_name, func){
            if(window.attachEvent){
                ele.attachEvent(event_name, func);
            }
            else{
                event_name = event_name.replace(/^on/, "");
                ele.addEventListener(event_name, func, false);    //默认事件是冒泡
            }
        }

        function clickObjLi (event){
            var currTarget = event.target;
            alert(currTarget.innerHTML);
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li class="item1">测试事件绑定1</li>
            <li class="item2">测试事件绑定2</li>
            <li class="item3">测试事件绑定3</li>
            <li class="item4">测试事件绑定4</li>
        </ul>
    </div>
</body>
</html>
时间: 2024-08-26 15:50:20

兼容IE9以下和非IE浏览器的原生js事件绑定函数的相关文章

Javascript:兼容ie的事件绑定函数

<script type="text/javascript"> function addEvent(obj,ev,fn){ if(window.addEventListener){ obj.addEventListener(ev,fn,false); }else{ obj.attachEvent("on"+ev,fn); } } addEvent(document,"click",function(){ alert('a'); });

placehoder不兼容ie9以下和opero12以下

颜色设置 解决方案一: ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999; } :-ms-input-placeholder { /* Internet Explorer 1

兼容低版本IE和非IE浏览器的事件绑定函数

我们知道为元素绑定事件可以使用addEventListener方法,但是低版本IE下是没有这个方法,这时我们就要使用attachEvent方法去兼容,可以写成下面这样: 1 /* 2 兼容低版本IE,ele为需要绑定事件的元素, 3 eventName为事件名(保持addEventListener语法,去掉on),fun为事件响应函数 4 */ 5 6 function addEvent(ele,eventName,fun){ 7 if(ele.addEventListener){ 8 ele.

兼容主流浏览器的事件绑定函数

标准dom添加事件是用addEventListener,ie6-8则是attachEvent. 今天写了一个兼容两者的添加事件函数,并且支持同时绑定多种事件类型,代码如下: 1 var addEvent = (function() { 2 if(window.addEventListener) { 3 return function(elem, type, fn, capture) { 4 if(type.indexOf(",") !== -1) { 5 var types = typ

MFC 模态、非模态窗口引发的系列事件及函数

标题一:创建模态窗口 CAdditionDlg dlg; // 定义对话框类CAdditionDlg的对象dlg INT_PTR nResponse = dlg.DoModal();//获取子窗口的结束方式 switch(nResponse) { case IDOK: case IDCANCEL: case IDDESTROY: } 标题二:创建非模态子窗口(完美解决非模态窗口单例问题) 步骤一:创建子窗口指针类型的公有成员 public: CMyTip* m_mytip; 步骤二:父类通过按钮

【js事件详解】js事件封装函数,js跨浏览器事件处理机制

一.事件流 事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档).2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 相关知识链接:js的事件冒泡和事件捕获 二.事件处理程序 1.HTML事件处理程序2.DOM0级事件处理程序3.DOM2级事件处理程序 DOM2级事件定义了两个方法

非框架, 纯原生JS “商品详情跳转到商品列表,并记录高度“ 的写法思路

这里只讲思路,不提供代码. 写之前,我要先吐槽一种非常奇葩的写法.    下面是他的写法思路(虽不提倡,但可借鉴): 一个商品列表,然后把商品详情写在商品列表里. 这是一个页面,两个不一样的div标签,一个div标签是商品类表,另一个div标签是商品详情 从商品列表跳转到商品详情的操作是: 请求商品详情接口,请求到后赋值(在jq项目里特地引了个vue来双向绑定), 把当前页面的高度记录下来($document.scrollTop()获取高度), 然后把商品列表div标签隐藏掉,然后再显示商品详情

javascript跨浏览器事件绑定

//跨浏览器事件绑定 function addEvent(obj,type,fn){ //obj目标对象, type事件类型 注意是:"load" ,fn函数回调 if (typeof obj.addEventListener !="undefined"){ //W3C方法 obj.addEventListener(type,fn,false); } else if (typeof obj.attachEvent !="undefined"){

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi