原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了。
需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件。贴上代码,这个是可以运行的,兼容 IE FF chrome
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js绑定和解绑事件</title>
</head>
<body>
选择
<select id="sel1">
<option>--请选择--</option>
</select> <br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
选择2
<select id="sel2">
<option>--请选择--</option>
</select> <script type="text/javascript"> var _obj = {}; // 事件绑定
_obj.bindHandler = (function() {
return function(obj,type,fn){
var func = function(){
fn.call(obj); //这里主要是想将obj这个哥们传到我们后期要调用的函数中,所以可以将参数绑定在这个哥们身上
};
obj.fnn = func; //这里主要是为了在解绑的时候取到函数名
obj.addEventListener ? obj.addEventListener(type,func,false) : obj.attachEvent("on"+type,func);
}
})(); // 事件解除
_obj.removeHandler = (function() {
return function(obj,type,fn){
obj.removeEventListener ? obj.removeEventListener(type,fn,false) : obj.detachEvent("on"+type,fn);
}
})(); _obj.selEvent=function(){
var id = this.id;
//添加option
for(var j=0;j<5;j++){
this.options[this.length]=new Option("tl"+j,"值"+j);
} //解除绑定
_obj.removeHandler(this,'mouseover',this.fnn); //如果 id = sel1
if("sel1"==id){
//移除sel2的绑定
var sel2 = document.getElementById('sel2');
_obj.removeHandler(sel2,'mouseover',sel2.fnn);
}
} _obj.init=function(){
//绑定事件
var sels = document.getElementsByTagName("select");
for(var i=0;i<sels.length;i++){
_obj.bindHandler(sels[i],'mouseover',_obj.selEvent);
}
} _obj.init(); </script> </body>
</html>
原生js绑定和解绑事件,兼容IE,FF,chrome的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- bind,unbing,on,live,delegate绑定和解绑事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- 11-jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- jQuery的事件绑定和解绑
1.绑定事件 $('获取的标签对象').bind('要操作的方法, {操作的内容 是字典的形式},function(){} ') 语法: bind(type,data,fn) 描述:为每一个匹配元 ...
随机推荐
- Python 基础系列一:初识python
为什么是Python而不是其他语言? C 和 Python.Java.C#等 C语言: 代码编译得到 机器码 ,机器码在处理器上直接执行,每一条指令控制CPU工作. 其他语言: 代码编译得到 字节码 ...
- ZOJ-2091-Mean of Subsequence (反证法的运用!!)
http://blog.csdn.net/u014355480/article/details/40862041 ZOJ2091 题意:其实就是找后几个数的平均值的最大值!! (贪心策略!要找对) k ...
- 关于Struts与Ajax整合时的异常处理
关于Struts与Ajax整合时的异常处理问题: 问题还原: 从而当有异常发出时,会将异常信息发送到页面上.如下图所示:这是一个比较经典的过程: 错误提示页面: 由于sendError()方法里 ...
- 使用siege对web接口进行post方式的压力测试
为了达到压力测试的效果,需要申请一台线上机器,并且安装压力测试的工具siege. 安装新版siege.资料说yum安装的版本2.70对于post方式支持的不好,验证后发现请求可以正常发过去,但是打开d ...
- 苹果 AR 新专利马上登陆 Facetime|Facebook 要用 VR 玩直播
附上VR技术福利视频 链接: https://pan.baidu.com/s/1boGGVs7 密码: viy8 点击关注有更多VR技术资源哦 苹果 AR 新专利马上登陆 Facetime ,使用光场 ...
- java基础---java语言概述
一.计算机编程的两种范型 1.面向过程的模型---具有线性执行特点,认为是代码作用于数据. 2.面向对象的模型---围绕它的数据(即对象)和为这个数据定义的接口来组织程序:实际上是用数据控制代码的访问 ...
- win10 uwp 如何让WebView标识win10手机
本文主要:如何让WebView访问的网页设别为手机,当然这句话我说不好,换个,如何让WebView设别为手机.上面两句话都是错的,因为是服务器识别,不是网页,第二句话应该是让服务器而不是WebView ...
- PHP 页面静态化/纯静态化/伪静态化
个人博客迁移至独立博客:https://blog.plcent.com/,欢迎大家访问 概念 PHP静态化分为:纯静态化 和 伪静态化:纯静态化又分为:局部静态化 和 完全静态化 纯静态化:是把PHP ...
- mb_substr函数
定义和用法 mb_substr() 截取字符串中指定长度字符 注:常用于中文截取,可以避免截取时候出现乱码,即截取半个字符的情况. 类似函数 substr(),iconv_substr() 语法 mb ...
- SpringMVC Spring MyBatis整合配置文件
1.spring管理SqlSessionFactory.mapper 1)在classpath下创建mybatis/sqlMapConfig.xml <?xml version="1. ...