<!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. 阿里巴巴Java开发规约扫描插件－Alibaba Java Coding Guidelines 在idea上安装使用教程

    经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件!该插件由阿里巴巴P3C项目组研发.P3C是世界知名的反潜机,专门对付 ...

  2. Apache Hive （四）Hive的连接3种连接方式

    转自:https://www.cnblogs.com/qingyunzong/p/8715925.html 一.CLI连接 进入到 bin 目录下,直接输入命令: [hadoop@hadoop3 ~] ...

  3. Kafka核心概念(转)

    转自:https://blog.csdn.net/liyiming2017/article/details/82805479 1.Kafka集群结构 实际上kafka的结构图是有些区别的,现在我们看下 ...

  4. 【FZU2178】礼物分配

    题意 在双胞胎兄弟Eric与R.W的生日会上,他们共收到了N个礼物,生日过后他们决定分配这N个礼物(numv+numw=N).对于每个礼物他们俩有着各自心中的价值vi和wi,他们要求各自分到的礼物数目 ...

  5. Python3 模块与包

    一.模块介绍 什么是模块? 常见的场景:一个模块就是一个包含了一组功能的Python文件,比如spam.py,模块名为spam,可以通过import spam使用. 在Python中,模块的使用方式都 ...

  6. [Training Video - 6] [File Reading] [Java] Read Properties file

    package com.file.properties; import java.io.FileInputStream; import java.util.Properties; public cla ...

  7. GitLab服务器IP地址修改

    gitlab安装介绍:https://about.gitlab.com/downloads/#centos7 刚搭建好的gitlab在GitLab上新建一个项目test_gitlab,刚开始仓库地址是 ...

  8. 将std::string当字节流使

    string是C++标准定义的字符串类,它不但支持文本,而且支持二进制字节流.给一个string变量赋值有多种方法: 1) 拷贝构造函数 2) 等号赋值函数 3) append成员函数 4) push ...

  9. android在更新ADT以后报java.lang.NoClassDefFound的解决办法

    Android不是很熟.从网上找到了想要的代码后兴高采烈的导入workspace中,直接开Run. but在真机的时候Console.LogCat下都没显示什么有用的东西,就是写NDK编译完Nativ ...

  10. Postman -- HTTP请求的Chrome插件

    摘要 : Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网 ...