js中事件绑定要注意的事项之如何在方法中自己打印自己的值

时间:2023-03-09 01:31:38
js中事件绑定要注意的事项之如何在方法中自己打印自己的值

下面是错误的js方法绑定,这样写会造成在方法中不能用 调用方法的dom本身的一些 东西,如各种属性或者jq对象等。

 <!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> <body>
<!-- 下面是用纯动态方式生成标签 -->
<div id="d2">
动态生成a标签
</div> <div id="d3">
<input type="button" value="生成a标签" id="btn"/> </div>
</body>
<script>
///错误的写法: var i = 0;
$(function() {
///点击按钮,给d2动态添加标签
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li onclick='show()' num='"+(++i)+"'>Hello</li>").appendTo("#d2");
}); }) function show() {
alert($(this).text());///这样打印出的是空的,没有任何东西,但是方法是会触发的(不能这样打印自己)
alert($(this).attr("num"));///打印的是undefined 因为$(this)不能用
alert("哈哈");
$(this).remove();//方法无效,不能自己删除自己(页面没有效果)
}
</script> </html>

下面才是正确的写法:

 <!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> <body>
<!-- 下面是用纯动态方式生成标签 -->
<div id="d2">
动态生成a标签
</div> <div id="d3">
<input type="button" value="生成a标签" id="btn"/> </div>
</body>
<script>
///正确的写法 var i = 0;
$(function() {
///点击按钮,给d2动态添加标签
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li onclick='show(this)' num='"+(++i)+"'>Hello</li>").appendTo("#d2");
});
////注意:在标签中的绑定方法中加了个参数 this,代表js元素的dom对象本身【注意:只能用this】会传递到方法体中 }) /*在方法定义端,参数中随便加个变量即可,
如obj或者o或者a等任意变量符号都行,且其不用事先用var定义,可以直接用
然后在方法体中就可以用obj.value【原生的js对象的属性使用方法】或者$(obj).val()【jq的对象方法】等来操作dom本身了
*/
function show(obj) {
alert($(obj).text());///这样会政策打印出方法的text即这里的Hello
alert($(obj).attr("num"));///打印属性也没问题
alert("哈哈");
$(obj).remove();//自己删除自己也是好用的
}
</script> </html
<!--
正确的绑定方法和原来错误的方法只有一点小区别,即:
1.在html标签中,绑定方法的时候,方法中加上一个参数 this【只能是this,不能用其他变量】
2.在方法的定义位置,方法的参数中用任意一个变量来接收页面上传递过来的this(即调用当前方法的原生js的dom对象)
3.在方法体中就可以用2中定义的 变量.js原生属性 或者 $(变量).val()等jq封装后的方法来对调用者dom本身进行各种操作了。 当然,如果标签不是拼接时绑定的方法,而是后来动态绑定的,那么可以用live 方法达到同样的效果
【注意:只能用live方法给动态标签绑定事件,在事件中才可以操作标签本身,如果用bind方法是不能操作标签本身相关的】
eg:
///bind方法对于动态添加的标签不好使,其只对已经存在的静态标签好用 ///用live方法才好用,用live时,方法体中可以直接写 this和 $(this)
$('li').live('click', function() {
alert($(this).text());///注意,用live还可以这样写,结果是正常的
alert("haha");
$(this).remove();///用live方法,这都可以,自己删自己 好使.
}); -->