爱站程序员基地<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\”Content-Type\” content=\”text/html; charset=utf-8\”>
<script src=\”http://libs.baidu.com/jquery/1.7.2/jquery.min.js\”></script>
<!–<script src=\”http://libs.baidu.com/jquery/1.6.4/jquery.min.js\”></script>–>
<!–<script src=\”http://libs.baidu.com/jquery/1.5.2/jquery.min.js\”></script>–>
<!–<script src=\”http://libs.baidu.com/jquery/1.4.4/jquery.min.js\”></script>–>
<!–<script src=\”http://libs.baidu.com/jquery/1.3.2/jquery.min.js\”></script>–>
<!–<script src=\”http://libs.baidu.com/jquery/1.2.3/jquery.min.js\”></script>–>
<style type=\”text/css\”>
</style>
</head>
<body>
<div id=\”div1\”>
<a href=\”#\”>1111111111</a>
</div>
</body>
</html>
<script type=\”text/javascript\” language=\”javascript\”>
//bind 根 on的区别 自己认为bind 跟on的区别其实不大
//下边的代码测试要先把其他代码注释掉 不然后绑定事件会影响前边绑定的事件
/*
* 最基础的应用
* 像下边这2中绑定方式 如果后期添加到div1下边新的a标签 新添加的a标签是没有click事件的
* 可以打开本页面 点击1111111111 控制台会输出1111111111
* 点击新添加的222222 是没有反应的
* */
$(\”body #div1 a\”).bind(\”click\”, function() {
console.log($(this).html());
});
$(\”body #div1 a\”).on(\”click\”, function() {
console.log($(this).html());
});
$(\”#div1\”).append(\”<a href=\’#\’>222222</a>\”);
/*
* 增强版
* bind可以传递参数到调用的方法 例子如下
* */
$(\”body #div1 a\”).on(\”click\”, \”我是参数 我是参数！\”, function(data) {
//这里data.data 属性就是我是参数 我是参数！
console.log(data.data);
});
/*
* 超级增强版
* on可以给未来标签添加事件
* 什么叫给未来标签添加事件 比如说刚进来页面就一个a标签1111111111 我用on绑定了click事件
* 后来又动态添加了222222 这个a标签也会有click事件 具体代码是这样实现的
*
* */
$(\”body #div1\”).on(\”click\”, \”a\”, function(data) {
//这里data.data 属性就是我是参数 我是参数！
console.log($(this).html());
});
$(\”#div1\”).append(\”<a href=\’#\’>222222</a>\”);
/*
* 超级超级 超级超级增强版
* on可以给未来标签添加事件 而且还可以传递参数
*
* */
$(\”body #div1\”).on(\”click\”, \”a\”, \”我是参数 on也可以传递参数！\”, function(data) {
//这里data.data 属性就是我是参数 我是参数！
console.log(data.data);
});
$(\”#div1\”).append(\”<a href=\’#\’>222222</a>\”);
</script>
