javascript点击兼容所有浏览器封装
<!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点击兼容所有浏览器封装的更多相关文章
- 原生JavaScript拖动div兼容多种浏览器
说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...
- [代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）
其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已. 加入收藏: /* * author : 2010-12-27 11 ...
- JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- javascript 兼容各个浏览器的事件
- 【Selenium05篇】python+selenium实现Web自动化：读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行
一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...
- JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
- JavaScript文件下载 兼容所有浏览器 不可跨域
前端文件下载 兼容所有浏览器 download.js文件下载,几乎支持所有类型下载,详细内容参考官网 http://danml.com/download.html 引入文件 <script sr ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- Zclip复制页面内容到剪贴板兼容各浏览器
Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...
随机推荐
- IOS数据持久化存储之SQLite3第三方库FMDB的使用
SQLite是一种小型的轻量级的关系型数据库,在移动设备上使用是非常好的选择,无论是Android还是IOS,都内置了SQLite数据库,现在的版本都是SQLite3.在IOS中使用SQLite如果使 ...
- 详解C++右值引用
C++0x标准出来很长时间了,引入了很多牛逼的特性[1].其中一个便是右值引用,Thomas Becker的文章[2]很全面的介绍了这个特性,读后有如醍醐灌顶,翻译在此以便深入理解. 目录 概述 mo ...
- Hadoop2.2.0安装配置手册
第一部分 Hadoop 2.2 下载 Hadoop我们从Apache官方网站直接下载最新版本Hadoop2.2.官方目前是提供了linux32位系统可执行文件,所以如果需要在64位系统上部署则需要单独 ...
- mybatis+oracle如何批量执行多条update
接口 public void setStatus(List<Columns> columnsList); mapping xmlmapping 中使用foreach,关于标签的使用,资料非 ...
- MySQL多表查询回顾
----------------------siwuxie095 MySQL 多表查询回顾 以客户和联系人为例(一对多) 1.内连接 /*内连接写法一*/ select * from t_custom ...
- 快速上手Runtime（三）之方法交换
开发过程中,我们经常会用到系统类,而它提供的方法又不能完全满足我们开发的需要,那么在此时,我们需要为系统自带的方法扩展一些功能,而且还要保证原有的功能可正常使用.假设咱们现在有这么一个需求,我们在调用 ...
- Docker学习记录常用命令
1. docker ps -a 查看运行中的容器 2. docker images 查看docker镜像 3. docker rm id(容器id) 删除容器(容器id可以通过docker ps查 ...
- code1091 传染病控制
1.读入图,边是双向的 2.递归建树,同时确定每一层的节点 3.dfs按层搜索,先把这一层所有被传染的(die[pa[k]]=true的)的die置为true 然后循环,每次把一个die为true的变 ...
- [operator]ELK6 index pattern的问题
完成了EL/FK的搭建之后,在kibana的主页只能看到默认的索引? 其实这个索引名字的设置是在logstash-smaple.conf(elk6.4)里的设置,比如我这样设置 input { bea ...
- 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)
本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...