原生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) 描述:为每一个匹配元 ...
随机推荐
- 合并Spark社区代码的正确姿势
原创文章,转载请保留出处 最近刚刚忙完Spark 2.2.0的性能测试及Bug修复,社区又要发布2.1.2了,国庆期间刚好有空,过了一遍2.1.2的相关JIRA,发现有不少重要修复2.2.0也能用上, ...
- SqlServer和Oracle中一些常用的sql语句5 流程控制语句
--在sql语句中 begin...end 用来设定一个程序块 相关于c#中的{} declare @yz real,@w int --声明变量 set @w=120 --为变量赋值 if @w< ...
- 江西省移动物联网发展战略新闻发布会举行-2017年10月江西IDC排行榜与发展报告
编者按:当人们在做技术创新时,我们在做“外包产业“:当人们在做制造产业,我们在做”服务产业“:江人们在做AI智能时,我们在做”物联网“崛起,即使有一个落差,但红色热土从不缺少成长激情. 本期摘自上月初 ...
- asp.net mvc CodeFirst模式数据库迁移步骤
利用Code First模式构建好基本的类后,项目也开始搭建完毕并成功运行,而且已经将数据库表结构自动生成了. 但是,我有新的类要加入,有字段需要修改,那怎么办呢,删库,跑路 ? 哈哈 利用数据库迁 ...
- 学习笔记之CSS样式(选择器背景字体边框绝/相对、固定位置and分层流等)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端笔记----jquery入门知识点总结
一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...
- Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- win10 UWP 圆形等待
看到一个圆形好像微软ProgressRing 我们可以用自定义控件 按ctrl+shift+a 用户控件 我们可以用Rectangle做圆形边 只要Rectangle RadiusX>0圆角 因 ...
- GTK主题黑边问题
Linux就是这样,上游一出点什么奇怪的变动,下游程序就要受影响..最近滚了一下后,不知道mesa还是xf86-intel-video哪个玩了什么新花样,所有gtk应用[主要是gnome组件]全部自带 ...
- QT:用QWebSocket实现webchannel,实现C++与HTML通信
基本原理是通过channel将C++对象暴露给HTML,在HTML中调用qwebchannel.js.前提是建立transport,QT只提供了一个抽象基类QWebChannelAbstractTra ...