在html标签中使用onclick绑定事件时报错 Uncaught ReferenceError: handleClick is not defined

最新推荐文章于 2024-03-26 10:26:45 发布

竹苏

最新推荐文章于 2024-03-26 10:26:45 发布

阅读量1.3w

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JZH20/article/details/109572181

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在html标签中使用onclick绑定事件时报错 Uncaught ReferenceError: handleClick is not defined at HTMLButtonElement.onclick

在html标签中使用onclick如何绑定事件

<body>
    <button onclick="handleClick();">点击事件</button>
</body>
<script>
    function handleClick() {
        console.log("--handleClick()")
    }
    // 或
    // var handleClick = function () {
    //     console.log("--handleClick()--")
    // }
</script>

接下来先看一下导致报错的代码

<body>
    <button onclick="handleClick();">点击事件</button>
</body>
<script>
    !(function (window) {
        function handleClick() {
            console.log("--handleClick()--")
        }
        // 或
        // var handleClick = function () {
        //     console.log("--handleClick()--")
        // }
    })(window)
</script>

这里导致报错的原因是因为我们这个使用立即执行函数（作用域）

!(function () {

})()

其实这里报错信息已经给了我们提示 Uncaught ReferenceError: handleClick is not defined
这里告诉我们 handleclick这个方法未定义

在html标签中绑定事件，这个事件的查找方式是在当前html页面的window对象中去查找这个事件方法

<body>
    <button onclick="handleClick();handleBtn();">点击事件</button>
</body>
<script>
    function handleClick() {
        console.log("--handleClick()--")
    }
    function handleBtn() {
        console.log("--handleBtn()--")
    }
    console.log(window) // 这里我们打印window对象, 可以在window对象找到我们绑定的事件方法, 如下图所示
</script>

在这里插入图片描述
接下来我们看一下在立即执行函数中window对象

<body>
    <button onclick="handleClick();handleBtn();">点击事件</button>
</body>
<script>
    !(function (window) {
        function handleClick() {
            console.log("--handleClick()--")
        }
        function handleBtn() {
        	console.log("--handleBtn()--")
        }
        console.log(window) // 在这种情况下我们在window对象是找不到我们刚刚绑定的事件方法
    })(window)
</script>

解决方法如下:

<body>
    <button onclick="handleClick();">点击事件</button>
</body>
<script>
    !(function (window) {
    	// 这里不使用var关键字, 默认是window对象作为他的作用域
        handleClick = function () {
            console.log("--handleClick()--")
        }
        // 或 
        // window['handleClick'] = function () {
        // console.log("--handleClick()--")
		// }
        console.log(window) // 这个时候我们在window对象中就可以找到我们绑定的事件方法
    })(window)
</script>