<!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. 简述amixer及其用法

    最近接触到amixer,大概明白了其意思和具体用法,简述如下. alsamixer是Linux 音频架构ALSA中的Alsa工具的其中一个,用于配置音频的各个参数. alsamixer是基于文本下的图 ...

  2. 结对作业——四则运算 Part2. 封装与对接相关问题

    结对作业——四则运算 Part2. 封装与对接相关问题 PB15061303 刘梓轩PB16061489 艾寅中 GITHUB 地址 戳这里 目录 Part 1. Core代码编写部分Part 2. ...

  3. Spring中Aspect的切入点的表达式定义细节

    用过很多次切面aspect了,对于表达式总是记得很模糊,今天总结一下. 1.切面做如下设置则只会拦截返回值为String类型的方法 @Aspect public class MyInterceptor ...

  4. servicestack.redis工具类

    using System;using System.Collections.Generic;using System.Linq;using ServiceStack.Redis;using Servi ...

  5. 商业级别Fortify白盒神器介绍与使用分析

    转自:http://www.freebuf.com/sectool/95683.html 什么是fortify它又能干些什么? 答:fottify全名叫:Fortify SCA ,是HP的产品 ,是一 ...

  6. 一步步来用C语言来写python扩展-乾颐堂

    本文介绍如何用 C 语言来扩展 python.所举的例子是,为 python 添加一个设置字符串到 windows 的剪切板(Clipboard)的功能.我在写以下代码的时候用到的环境是:window ...

  7. idea 删除代码的注释

      搜索栏使用 正则表达式搜索 (/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/|[ \t]*//.*)   会搜索出来所有注释的代码 用空格replace替换掉就 ...

  8. （转） c/c++调用libcurl库发送http请求的两种基本用法

    libcurl主要提供了两种发送http请求的方式,分别是Easy interface方式和multi interface方式,前者是采用阻塞的方式发送单条数据,后者采用组合的方式可以一次性发送多条数 ...

  9. yii2项目实战-访问控制过滤器ACF讲解

    作者:白狼 出处:http://www.manks.top/document/yii2-filter-control.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明 ...

  10. python切片、列表解析、元组

    1.列表解析 test = [x**2 for x in range(1,11)] 2.切片 test1 = ["a","b","c",&q ...