window.onload匿名函数中element.onclick正确用法

于 2021-11-25 10:26:18 发布
阅读量707 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45190226/article/details/121531120
版权

先看下面有问题的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个window.onload方法解决方案</title>
    <style type="text/css">
        /*为div元素设置CSS样式*/
        #div1{border-width: 3px;border-style: double;
              border-color: bisque;
              font-size: large;
              height: 80px;width: 150px;
              background-color: cornflowerblue;
              text-align: center;}
    </style>
    <script type="text/javascript">
        //克隆div节点，并更改克隆出的div文本内容
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            function copyNode() {
                var newDivNode = oDiv.cloneNode();//此处没有参数true
                newDivNode.innerHTML = "I was cloned!";
                newDivNode.style.backgroundColor = "#FFA500";
                var parentNode = oDiv.parentNode;
                parentNode.appendChild(newDivNode);
            }
            oDiv.onclick = copyNode();
        }
    </script>
</head>
<body>
    <div id="div1">I am div1</div>
</body>
</html>

执行代码的结果：
在这里插入图片描述代码执行后，还没有点击div，页面就自动克隆了一个div。而且此时不能够通过点击div克隆更多新的div元素。
具体的底层逻辑是：

oDiv.onclick = copyNode();

在上面这行代码中——
由于copyNode()函数有小括号“()”，所以上面这行代码的含义是"调用"copyNode()函数，而不是“绑定”函数。
因此在oDiv上正确绑定函数的方法是：

oDiv.onclick = copyNode;
第1种改进代码方式：
将原来的: 
oDiv.onclick = copyNode();

修改为：

oDiv.onclick = copyNode;

将小括号去掉，就能够使代码正常运行。
此种代码方式的弊端：没有考虑到如果小括号()中需要传递参数的情况。

第2种改进代码方式：

将原来的：

oDiv.onclick = copyNode();

修改为：

oDiv.onclick = function () {
                copyNode();
}

先将copyNode();函数放进一个匿名函数中，再将匿名函数通过onclick关键字绑定到oDiv上。

第3种改进代码方式：

<script type="text/javascript">
        //克隆div节点，并更改克隆出的div文本内容
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            oDiv.onclick = function () {
                var newDivNode = oDiv.cloneNode();//此处没有参数true
                newDivNode.innerHTML = "I was cloned!";
                newDivNode.style.backgroundColor = "#FFA500";
                var parentNode = oDiv.parentNode;
                parentNode.appendChild(newDivNode);
            }
        }
    </script>

直接将需要通过onclick关键字绑定到oDiv元素上的方法以匿名函数的形式存在。
这种方式是程序员最常用的。

入门有点晚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML给标签的点击事件绑定匿名函数
rrgbf0123的专栏
04-14 5629
html> head>   script type="text/javascript">   var a3 = document.getElementById('a3');   a3.onclick= function(){alert('a3');}; script> head> body>        a id="a1" href="
Jqyery中同等与js中windows.onload的应用
10-28
我们知道，在javascript中用来执行页面加载中的操作时候，我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可，在jQuery中也有相当的代码
关于window.onclick事件的问题
qq_20565303的专栏
02-02 1万+
window.onclick = function(event) { alert(1); } window.onclick = function(event) { alert(2); } 这个在浏览器中执行，只是打印了2，说明这个监听事件，只监听了第二个方法，所以这个方法，在页面中只能使用一个，然后将其他的方法使用if分支加以区分，其中event获取的是点击事件的所处的标签。
input按钮onclick大全
热门推荐
anyx的专栏
09-04 1万+
INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>      INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>      INPUT onclick=docum
动态给element绑定onclick方法的问题
scry丶坏坏的博客
09-30 4367
var btns = document.getElementsByTagName('button'); for(var i = 0;i&amp;lt;btns.length;i++){ var btn = btns[i]; btn.onclick=function(){ console.log(i);//点击两个按钮都会打印1 ...
yii2 html 生成点击按钮,javascript – Yii2按钮onclick匿名函数
weixin_30728435的博客
06-09 420
我是Yii2的新手,我正在努力通过按Yii2按钮来触发匿名功能.下面是6个样本,其中前两个是好的.但这并不是我想要的.我想知道如何让一个匿名函数工作,比如“Button 3”和“Button 5”的情况.我测试了如何通过Controller进行函数调用,这样可以正常工作,但这不是我想要的.非常感谢你的帮助 – 谢谢！// This works$button1 = Button::begin (['...
莱鸟介绍window.print()方法
09-02
`window.print()` 方法是JavaScript中的一个内置函数，主要用于调用浏览器的打印功能。这个方法允许开发者无须离开网页或应用即可让用户打印网页内容，非常适合于那些需要提供打印选项的网站。在本文中，我们将深入...
脱离document.onload和window.onload的onload事件
04-29
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
js中window.open()的所有参数详细解析
10-26
JavaScript中的`window.open()`函数是用于打开新浏览器窗口的一个重要方法。这个函数具有广泛的灵活性，可以用来创建定制化的窗口，包括设置窗口的大小、位置、是否有工具栏、菜单栏等特性。下面是对`window.open()`...
window.addEventListener来解决让一个js事件执行多个函数
10-27
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下
element.onclick = fun与element onclick="fun()"的区别
wml00000的博客
03-09 2694
原本标题是：element.onclick = fun与&lt;element onclick="fun()"&gt;的区别，但是提示含有非法字符。 问题背景： 在看this指向的时候看到了这个，有的时候通过给DOM元素绑定监听事件，来触发某些事件处理函数(如点击当前元素时修改该元素样式等)，如果绑定的监听函数里面用到了this，上面两种方式可能会有不同的效果。 试验代码： &lt;!D...
JS中页面加载事件window.onload、onload()、document.onclick
xiaokangmiclong的博客
11-20 8829
当我们刷新页面的时候，有时需要页面自动加载一些事件来达到预期效果，现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面或图像加载完成后立即发生。注意是在页面或图像加载后才发生，所以当页面有很大数据量没加载完时，onload()事件不会发生。而addLoadEvent()会在页面刷新的时候发生，document.o
html 标签内部onclick调用原理 及指定匿名函数
Dave_lzw的博客
11-08 2438
onclick函数内部包含着指定给onclick的函数，所以当触发了onclick事件的时候，onclick函数就执行，这时候因为fn在onclick函数内部，才得以执行。因此指定要加括号。 function onclick(event) { fn(); } 不加括号执行的话就是： function onclick(event) { fn; } 因此不会执行fn； 当写出匿名函数时，也要加上括号才会被执行。 var pre_str = '<a class="Warning_Table" οn
js中的onclick和onload
qq_41821067的博客
09-20 577
head中写function body中写onload
addEventListener和attachEvent以及element.onclick的区别
weixin_30394333的博客
09-01 155
attachEvent是ie添加事件处理程序，接收两个参数，其中事件类型名称要加"on"， 可以添加多个事件处理程序，按照添加顺序相反的顺序触发; addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”， 第二个是绑定的函数，第三个参数是一个布尔值，是事件的方式，意思是是否使用useCatch方式， 如果是false，就使用传统的冒泡方式...
匿名函数、window对象confirm、prompt
weixin_30360497的博客
06-18 105
<script> (function(arg) {//匿名函数，没有名字 alert(arg) })('hello,jerry') </script> <script> //bom对象，浏览器对象模型。使JavaScript有能力与浏览器‘对话’ window.alert('...
js中window.onload添加事件
jay871023的博客
07-24 1294
function addOnloadEvent(func){ var oldOnload = window.onload; if(typeof oldOnload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldOnload(); func(); } } }
JS 事件添加onclick写法注意。
weixin_30764771的博客
02-09 202
自定义函数添加onclick事件写法注意。 错误写法：element.onclick = addclass(className); 正确写法：element.onclick = function(){addclass(className);} 转载于:https://www.cnblogs.com/enmeen/p/5185588.html...
document.onclick vs window.onclick
weixin_30299539的博客
09-28 274
The JavaScript Window object is the highest level JavaScript object which corresponds to the web browser window. 最外层的JavaScript对象其对应于web浏览器窗口 The document object is the container for all HTML HEAD a...
``` window.onload ```在javascript中window.onload怎么用
最新发布
01-27
以下是`window.onload`的使用方法示例： ```javascript window.onload = function() { // 在这里编写页面加载完成后要执行的代码 console.log("页面加载完成！"); }; ``` 在上述示例中，当页面加载完成后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值