Javascript绑定事件的两种方式的区别
程序员文章站
2024-01-01 16:17:22
命名函数 匿名函数 以前一直以为两种方式的区别不大,直到今天遇到这段代码 运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。 顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了? 原来是我搞混了,两种绑定方式的区别。 命名 ......
命名函数
<input type="button" onclick="check()" id="btn"/> <script type="text/javascript"> function check(){ //code } </script>
匿名函数
<input type="button" id="btn"/> <script type="text/javascript"> window.onload = function(){ //先获取元素对象,再绑定事件,绑定的是匿名函数不可重用 var btn = document.getelementbyid("btn"); btn.onclick = function(){ //code } } </script>
以前一直以为两种方式的区别不大,直到今天遇到这段代码
<img src="/path" id="img" onclick="change()"/> <script type="text/javascript"> //每次点击给图片地址后面加随机的查询参数 function change(){ this.src = "/path?num="+math.random(); } </script>
运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。
顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了?
原来是我搞混了,两种绑定方式的区别。
命名函数声明是窗口的对象中,this代表窗口对象。
匿名函数声明实际是在标签对象内部,this代表标签对象。
如果要在命名函数中拿到对应的元素对象,可以这样写
<input type="button" value="btn" onclick="change(this)"> <script type="text/html"> function change(element){ element.value = "new_btn"; } </script>
推荐阅读
-
Javascript绑定事件的两种方式的区别
-
JavaScript中多种绑定事件方式的区别讲解
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
具体介绍javascript使用两种方式动态生成css代码的详情
-
javascript - jQuery给动态添加的元素绑定事件的问题?
-
javascript数组输出的两种方式_javascript技巧
-
Javascript循环绑定事件的示例代码_javascript技巧
-
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧
-
jQuery 绑定事件的方式总结
-
浅谈java中String的两种赋值方式的区别