Javascript动态绑定
<div onclick="test()"></div>
<script>
function test(){
//code
}
</script>
上面这种方法是很low逼的,用了这种方法工资就涨不上去你信不信?下面这种也是...
<div id="test"></div>
<script>
var test = document.getElementById("test");
test.onclick = function(){
//code
};
</script>
能不能用一个稍微有点逼格的方法?
<div id="test"></div>
<script>
var test = document.getElementById("test");
test.addEventListener("click",function(){
//code
});
</script>
addEventListener() 还能解绑
<div id="test"></div>
<script>
var test = document.getElementById("test");
function testFunction(){
//code
}
test.addEventListener("click",testFunction);
test.removeEventListener("click",testFunction);
</script>
听说这个方法对IE8无法向下兼容?没关系,我们还有attachEvent/detachEvent
<div id="test"></div>
<script>
var test = document.getElementById("test");
function testFunction(){
//code
} //绑定
if (test.addEventListener) {
test.addEventListener("click", testFunction);
} else if (test.attachEvent) {
test.attachEvent("onclick", testFunction);
} //解除
if (test.removeEventListener) {
test.removeEventListener("click", testFunction);
} else if (test.detachEvent) {
test.detachEvent("onclick", testFunction);
}
</script>
有一种库叫做jQuery...你可以用bind(),这么写...
<div id="test"></div>
<script>
$("#test").bind("click",function(){
//code
});
$("#test").unbind("click");
</script>
这么写...
<div id="test"></div>
<script>
$("#test").bind("click mousemove",function(){
//code
});
</script>
这么写...
<div id="test"></div>
<script>
$("#test").bind({
"click":function(){
//code
},
"mousemove":function(){
//code
}
});
</script>
还可以用live(),向当前或未来的匹配元素添加一个或多个事件处理器。可以这样写...
<div id="test"></div>
<script>
$("#test").live("click",function(){
//code
});
$("#test").die("click");
</script>
还可以这样写...
<div id="test"></div>
<script>
$("#test").live("click mousemove",function(){
//code
});
</script>
换着姿势写...
<div id="test"></div>
<script>
$("#test").live({
"click":function(){
//code
},
"mousemove":function(){
//code
}
});
</script>
还可以用delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,适用于当前或未来的元素(比如由脚本创建的新元素)。
<div class="test">
<div id="test_inside"></div>
</div>
<script>
$(".test").delegate("#test_inside","click",function(){
//code
});
</script> <script>
$(".test").delegate("#test_inside","click mousemove",function(){
//code
});
</script> <script>
$(".test").delegate("#test_inside",{
"click":function(){
//code
},
"mousemove":function(){
//code
}
});
</script>
可是人家官网说了...
自从jquery1.7版本以后bind()函数推荐用on()来代替
live()只被jquery1.9版本以下支持,jquery1.9及其以上版本删除了这个方法,jquery1.9以上版本用on()方法来代替。
delegate()倒是一直保留着,可适用于jquery1.4.2及其以上版本,但是名字太丑了。
于是就这样...
<div class="test">
<div id="test_inside"></div>
</div>
<script>
$(".test").on("click", "#test_inside", function () {
//code
});
$(".test").off("click");
</script>
就这样...
<div class="test">
<div id="test_inside"></div>
</div>
<script>
$(".test").on("click mousemove","#test_inside",function(){
//code
});
</script>
就这样...
<div class="test">
<div id="test_inside"></div>
</div>
<script>
$(".test").on({
"click":function(){
//code
},
"mousemove":function(){
//code
}
},"#test_inside");
</script>
就这样被你征服...
注意:on()和delegate()两个参数的位置正好相反...城里人真会玩!Orz~~
补充说明:
bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置
<div class="test"></div>
<script>
//利用bind()方法,给P标签设置click方法 ======失败 没有任何反应=======
$(".test p").bind("click", function () {
alert("bind()添加单击事件成功!");
}); //利用live()方法.给P标签设置click方法 =======成功调用方法============
$(".test p").live("click", function () {
alert("live()添加单击事件成功!");
}); //利用delegate()方法.给P标签设置click方法 =======成功调用方法============
$(".test").delegate("p", "click", function () {
alert("delegate()添加单击事件成功!");
}); //利用on()方法.给P标签设置click方法 =======成功调用方法============
$(".test").on("click", "p", function () {
alert("on()添加单击事件成功!");
});
$(".test").append("<p>test</p>");
</script>
写在结尾
关于版本问题,这个事情不得不说。
bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+。
这是个让人纠结的问题,当一个天秤座的强迫症患者面对不同版本的jQuery和不同版本时代的方法的时候,选择成为了一个大问题。
但是如果你去看一看现在主流的js框架的源码你会发现,
怎么这么多on()啊啊啊啊啊啊啊啊
所以,用on()就对了!
其他的方法,封装了半天,最后底层代码还是调用onclick()什么的!
诚然,我也很讨厌废话,
写了那么长,有2/3都是在放屁!
可是总结就是这样,
做笔记就是这样,
来龙去脉要搞清楚,
因为我是一个天秤座的强迫症患者!
Javascript动态绑定的更多相关文章
- javascript绑定时间 含(IE)
script language = "javascript" type = "text/javascript"> function test(){ win ...
- 常见的原生javascript DOM操作
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
- js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
- (转)Jquery+Ajax实现Select动态定数据
解决思路: 在数据库中建立类型字典式表.将下拉框需要添加的项,在数据库表里中文.英文名称对应起来. 下拉框动态绑定数据库表中需要字段. <div id="bgDiv" sty ...
- Web_javaScript
JavaScript 的使用 第1章 JavaScript起源 1.1 起源 N年前 拨号上网,网速很慢,数据提交到服务器端验证,体验很差 于是,就有人在想:能不能让这些数据在浏览器端验证呢? 20世 ...
- javascript下动态this与动态绑定实例代码
this 的值取决于 function 被调用的方式,一共有四种, 如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象. 如果 function ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- Javascript 严格模式详解
转自http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第二 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
随机推荐
- 关于在eclipse Oxygen 2017环境下spring3.2 asm的异常
今天在oxygen 2017下构建spring3.2+mybatis项目时,发生异常,大概是说无法解析我mapper.class文件,错误发生在core.asm中<unknow:source&g ...
- 未能加载文件或程序集“log4net, Version=1.2.10.0, Culture=neutral, PublicKeyToken=1b44e1d426115821”或它的某一个依赖项。系统找不到指定的文件。
在网上找了很久,很多个地方让修改配置文件,也有重装log4net的. 如文章:使用Common.Logging与log4net的组件版本兼容问题 我检查下发现项目中的package包中的Log4net ...
- Chrome浏览器超强调试工具
原文:http://lizanhong2011.blog.163.com/blog/static/18028516720117301312729/ 在Google Chrome浏览器出来之前,我一直使 ...
- 03_Java基础语法_第3天(Scanner、Random、流程控制语句)_讲义
今日内容介绍 1.引用类型变量的创建及使用 2.流程控制语句之选择语句 3.流程控制语句之循环语句 4.循环高级 01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scan ...
- jstack笔记
遇到java程序跑不动怎么办,jstack是比较容易想到的一个工具,利用jstack来dump出一个线程堆栈快照,然后具体分析. 一般的堆栈大概是由下面的部分组成的: "resin-2212 ...
- Django之logging日志
简介 Django使用python自带的logging 作为日志打印工具.简单介绍下logging. logging 是线程安全的,其主要由4部分组成: Logger 用户使用的直接接口,将日志传递给 ...
- webgl 深度缓冲
传统的画2d画布就是后画的会盖在先画的上面,但是在画一些三维图形时,这很难控制 深度缓冲区的作用就是区分颜色所在的层次,防止把被遮挡住的颜色显示出来. 深度缓冲很强大,用起来很简单 开启深度缓冲(测试 ...
- struct和class的联系与区别
C++支持另一个关键字struct,它也可以定义类类型.struct关键字是从C语言继承过来的. 默认初始访问级别不同: 如果使用class关键字来定义类,那么定义在第一个访问标号前的任何成员都隐式指 ...
- postman 上一个接口返回值传给下一个接口
问题:如何将A请求responseBody中的token传入B请求中的request中 把A请求中的token设置为环境变量,如下: tests["Status code is 200&qu ...
- ubuntu成功安装搜狗输入法
在安装之前,我们要先了解一个事实,那就是linux下安装软件和Windows是非常不同的,并不是简单地双击安装包就可以安装了.linux很多软件都有自己的一个依赖源,如果不先安装好这些依赖源,你是无法 ...