js绑定事件方法:addEventListener的兼容问题
js的事件绑定方法中,ie只支持attachEvent,而FF和Chrome只支持addEventListener;严格来说:addEventListener只有IE9以上版本的IE浏览器上能够兼容,IE8或者更低的版本是不支持,这时要想能够兼容IE低版本浏览器就需要判断当前浏览器然后针对不同浏览器决定用哪一个。
attachEvent和addEventLitener的不同之处是第二个参数事件名要多加个“on”,比如‘onclick’,而且他的this 指向的是window,在使用的时候需要改变this指向。下面就是一个兼容的写法:
var Event = {};
Event.addEvents = function(target,eventType,handle){
if(document.addEventListener){
Event.addEvents = function(target,eventType,handle){
target.addEventListener(eventTypt,handle,false);
};
}else {
Event.addEvents = function(target,eventType,handle){
target.attachEvent('on'+eventType,function(){
handle.call(target,arguments);
});
}; }
Event.addEvents(target,eventType,handle); }
调用方法:
Event.addEvents(document,"click",function(){
alert(ok)
});
js绑定事件方法:addEventListener的兼容问题的更多相关文章
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...
- JqueryOn绑定事件方法介绍
JqueryOn绑定事件方法介绍 1. 简介 (1) On()方法在被选及子元素上添加一个或多个事件处理程序 (2) 在jquery 版本1.7起,on()方法是bind(),live()和deleg ...
- jQuery绑定事件方法及区别(bind,click,on,live,one)
第一种方式: ? 1 2 3 4 5 $(document).ready(function(){ $("#clickme").click(function(){ alert(& ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS绑定事件和移除事件的处理方法
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...
- js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEv ...
- 学习之js绑定事件
由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招. function addEvent(obj, type, fn){ if(obj.addEventLi ...
- js绑定事件代理的坑
js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑.但是这种方式好像只能是在点击的元素 ...
- [jquery]高级篇--js绑定事件
参考: http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(eve ...
随机推荐
- Impala介绍
Impala介绍 Impala支持的文件格式 Impala可以对Hadoop中大多数格式的文件进行查询.它能通过create table和insert的方式将一部分格式的数据加载到table中,但值得 ...
- Sharepoint2013商务智能学习笔记之使用Current User Filter筛选Excel 数据(六)
Sharepoint自带的filter可以和Excel Web Access互动,下面将制作一个Demo,使用Current User Filter根据当前登录用户自动筛选Excel. 第一步,用Ex ...
- HTTP协议格式及基础
HTTP请求数据: HTTP请求信息由3部分组成: ① 请求方法 URI 协议/版本 ② 请求头(Request Header) ③ 请求正文 HTTP 请求 数据 例子举例: GET/sam ...
- I18N的前后端实现
所需工具: 1.Vue https://cn.vuejs.org/ 2.Vue-I18N https://www.npmjs.com/package/vue-i ...
- Oracle 12c登陆sys用户的方法
本机安装过oracle 12c之后,发现用sql plus执行命令conn sys/change_on_install as sysdba; 提示如下图: 后在网上搜索此问题,需要先登陆system账 ...
- uva11491 奖品的价值(贪心)
uva11491 奖品的价值(贪心) 给你一个n位的整数,请你删除其中的d个数字,使得整数尽可能大.1<=d<n<=1e5. 首先因为前面的数位更重要,所以从左往右将每一位数字加入栈 ...
- vue-cli3.0 脚手架搭建项目
1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 ...
- 基础篇:MySQL系列之三
一.MySQL简介 MySQL原本是一个开放源代码的关系数据库管理系统,原开发者为瑞典的MySQL AB公司,该公司于2008年被Sun公司收购.2009年,Oracle收购sun公司,MySQL ...
- day23作业详解
1.题目 2.题目详解 点击查看详细内容 1. 1-1 封装 把功能封装到类中 class Message(object): def email(self):pass def msg(self):pa ...
- 前端 HTML-CSS 规范
黄金定律 一个项目应该永远遵循同一套编码规范! 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML 语法 用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境 ...