html页面调用js文件里的函数报错onclick is not defined问题(作用域问题)

// 多个tr标签<tr>
<td><a href="javascript:void(0);">删除</a></td>
</tr>// 第一种方式 全部在onload范围呢<script>
window.onload = function (){var as = document.getElementsByTagName("a");for (var i = 0; i < as.length; i++) {as[i].onclick = function (){var table = this.parentNode.parentNode.parentNode;var tr = this.parentNode.parentNode;table.removeChild(tr);}}}
</script>// 第二种方式  全部在onload范围内 此处： del = function(obj){}<script>
window.onload = function (){var as = document.getElementsByTagName("a");for (var i = 0; i < as.length; i++) {as[i].setAttribute("onclick","del(this);");}del = function(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}
}
</script>//  第三种方式  此处：function del(obj){}  没有在onload范围内<script>
window.onload = function (){var as = document.getElementsByTagName("a");for (var i = 0; i < as.length; i++) {as[i].setAttribute("onclick","del(this);");}
}
function del(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);
}
</script>

三种方法都可以给a标签加上删除功能。请问，第二种和第三种方法不同之处的原理在哪里？个人猜是作用域问题(onclick和onload) ，但不知道具体是怎么回事。求一个懂的老哥讲明白点

当第二种方法，改为 function del(obj){} ，则报错 del is not defined at HTMLAnchorElement.onclick

而当第三种方法改为 del = function(obj){}，则也可以成功执行功能

我只查到这个：

onclick是要求全局函数在onload里面的算局部函数 (当一个函数在另一个函数内创建，这个函数处于局部作用域中，就和局部变量一样，在全局环境下访问不到)

do = function(){}的写法会把do函数作为全局作用域函数(因为前面没有用变量var接收)，相当于windows对象作为他的作用域，所以可以被调用到。

在函数体外使用var关键字定义的变量和在函数体内未用任何关键字声明的变量是全局变量，在函数体内使用var关键字声明的变量是局部变量。

而方法三中 function del(obj){} 直接定义在script标签里算是全局函数吗（个人猜测）

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）正因如此，JavaScript 函数能够在声明之前被调用，

使用表达式定义的函数不会被提升。

定义函数的方式

1、函数声明

function sum( ){ }

2、函数表达式

var sum=function( ){ }

首先，window.onload事件是在整个页面包括dom结构、图片等等全部加载完成之后才会触发。

其次，HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。

所以，当将function fun(){}写到window.onload()=function(){}内部的时候，需要整个页面加载完成的之后，才声明这个函数，也就意味着，当HTML加载到οnclick="fun()"的时候，window.οnlοad=function(){}里面的函数f还没有被声明，这时候内存中就找不到function fun()，于是就会报错。

那么，将function fun()移到window.onload()=function(){}外，则HTML加载到<head></head>的时候就会声明函数f了，所以进行onclick绑定的时候就能够在内存中找到fun()并进行调用。这是方法3成功的原因

而方法2中的失败，当整个页面加载完毕后，给a标签添加删除按钮，而此时的onclick事件需要一个全局函数，当第二种方法，改为 function del(obj){} 在onload标签，就不再是全局函数，所以报错了

html页面调用js文件里的函数报错onclick is not defined问题(作用域问题)相关推荐

html页面关闭执行函数,html页面调用js文件里的函数报错--方法名 is not defined处理方法...
MEF Parts Sample namespace Microshaoft.MEF.Contracts { using System; public delegate void ExceptionE ...
python调用js库中的函数_Python 调用JS文件中的函数
Python 调用JS文件中的函数 1.安装PyExecJS第三方库 2.导入库:import execjs 3.调用JS文件中的方法 Passwd = execjs.compile(open(r&q ...
html调用外部js报错onClick is not defined at HTMLButtonElement.onclick
在html中调用外部js,实现button的onClick事件,报错,说函数is defined 有的说是路径原因,但是我点击路径可以跳转,路径没问题有的说是不能添加 type="text ...
VC6中调用.dll文件中的函数——傻瓜式教程
决这一问题上的帮助. 先声明下,我此前从未涉及过Windows 下的编程,所以对于懂了这么点东西就要写篇文章, 大家可不要鄙视啊. 实际上,写这篇文章的最主要原因是,我觉得调用.dll 文件里的函数 ...
如何在页面调用JS函数的代码
如何在页面调用JS函数的代码这个所有的人都不能回复啊,只有一个人可以的,晕!我第一次发现JS的功能有"打下来",呵呵! 言归正传: 下面是一个很简单的例子: 首先写一个JS函数, ...
[ASP.NET]动态页面调用JS错误。保存为HTML文件就不报错了。
[ASP.NET]动态页面调用JS错误.保存为HTML文件就不报错了. 郁闷死了.因为调用的JS文件中有中文,不晓得为啥子.要设置编码就可以了. 加上type="text/javascrip ...
html 动态调用php文件,html静态页面调用php文件的方法
html静态页面调用php文件的方法本文实例讲述了html静态页面调用php文件的方法.分享给大家供大家参考.具体方法如下: 静态页面中看上去好像是不能直接调用php文件的,但是却可以使用js调用方 ...
.net页面调用JS时出现乱码
最近在开发大鹏网时调用一个JS文件时,JS文件里的中文都变成了乱码. 主要是GB2312的文件调用了utf-8的js文件时,或utf-8的文件调用了GB2312的js文件才会出现,调用时可以写成如下方 ...
cli vue 外部js 引入文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...
问题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...

html页面调用js文件里的函数报错onclick is not defined问题(作用域问题)

html页面调用js文件里的函数报错onclick is not defined问题(作用域问题)相关推荐

最新文章

热门文章