<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>如何绑定事件处理函数</title>

    <style type="text/css"></style>

</head>

<body>

<div style="width: 100px;height: 100px; background-color: red;"></div>

<script type="text/javascript">

    function addEvent(elem,type,handle) {

        if(elem.addEventListener){

            elem.addEventListener(type,handle,false);

        }else if(elem.attachEvent){

            elem.attachEvent('on'+type,function () {

                handle.call(elem); //.call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)

            })

        }else{

            elem['on'+type] = handle;

        }

    }

    var div = document.getElementsByTagName('div')[0];

    addEvent(div,'click',function () {

        console.log('aaa')

    })

    addEvent(div,'click',function () {

        console.log('bbb')

    })

</script>

</body>

</html>

<strong>代码说明</strong>

<div><b>1.</b>obj.addEventListener(type,fn,false)IE9以下不兼容，可以为一个事件绑定多个处理程序</div>

<div><b>2.obj.attachEvent('on'+type,fn)</b>IE独有，一个事件同样可以绑定多个处理程序</div>

<div><b>3.</b>ele.onxxx=function(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序；基本等同于写在HTML行间上</div>

效果图：使用原生js，addEventListener,给每个li元素绑定一个click事件，输出他们的顺序?

1.obj.addEventListener(type,fn,false);

 div.addEventListener(事件类型，处理函数，false);

如：div.addEventListener('click',function(){},false)

javascript点击兼容所有浏览器封装的更多相关文章

  1. 原生JavaScript拖动div兼容多种浏览器

    说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...

  2. [代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）

    其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已. 加入收藏: /* * author : 2010-12-27 11 ...

  3. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  4. javascript 兼容各个浏览器的事件

  5. 【Selenium05篇】python+selenium实现Web自动化：读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...

  6. JavaScript 图片的上传前预览（兼容所有浏览器）

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  7. JavaScript文件下载 兼容所有浏览器 不可跨域

    前端文件下载 兼容所有浏览器 download.js文件下载,几乎支持所有类型下载,详细内容参考官网 http://danml.com/download.html 引入文件 <script sr ...

  8. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  9. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

随机推荐

  1. web前端整套面试题(一)--js相关

    一.单选 1.以下哪条语句会产生运行:(A) A.var obj = ( ); B.var obj = [ ]; C.var obj = { }; D.var obj = / /; B代表数组,C代表 ...

  2. [hdu1823]Luck and Love(二维线段树)

    解题关键:二维线段树模板题(单点修改.查询max) #include<cstdio> #include<cstring> #include<algorithm> # ...

  3. Eclipse设置Tab键缩进4个空格的步骤,也就是按一下Tab键输出四个空格

    Eclipse设置Tab键缩进4个空格的步骤,也就是按1下Tab键输出4个空格,步奏如下 1.点击 window->preference-,选择 General->Editors-> ...

  4. 使用zTree展开节点后,覆盖了下一个节点

    如图所示,结果是zTree与<fieldset>标签不兼容....我去!!! 也就是说Ztree不能放在<fieldset>标签中..

  5. selenium+python—实现基本自动化测试

    安装selenium 打开命令控制符输入:pip install -U selenium 火狐浏览器安装firebug:www.firebug.com,调试所有网站语言,调试功能 Selenium I ...

  6. 解题报告Best Time to Buy and Sell Stock with Cooldown

    题目 Say you have an array for which the ith element is the price of a given stock on day i. Design an ...

  7. Oracle VM VirtualBox 部署CS devcloud2 开发环境

    Setting up (VirtualBox) 1. Get the new DevCloud 2.0 virtual appliance. The new image was created usi ...

  8. 13-Oulipo(kmp裸题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1686 Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memo ...

  9. SuperWebSocket

    SuperWebSocket: 概述:SuperWebSocket是WebSocket服务器的.NET实现. 简介:WebSocket是通过单个传输控制协议(TCP)插座提供双向,全双工通信信道的技术 ...

  10. Python下Pip的安装【get-pip】

    1.下载 下载https://bootstrap.pypa.io/get-pip.py 如果不能下载,可下载:http://files.cnblogs.com/files/zhangzhiming/g ...