关于$('p').click(function(e) { alert(e.target.innerHTML) })-慕课网

首页课程实战体系课手记专栏慕课教程

关于$('p').click(function(e) { alert(e.target.innerHTML) })

来源：4-5 DOM节点删除之detach()和remove()区别

慕雪0535062

2018-12-26 11:06

不是很理解

$('p').click(function(e) {

alert(e.target.innerHTML)

})

这个行代码的作用，是为了证明remove（）和detacg()不同的删除节点？那为什么上一节也要加上这个事件呢

写回答关注

3回答

慕瓜4066904

2018-12-27 14:51:07

已采纳

这行代码是给2个p绑定事件。方便看出detach和remove的区别，detach后绑定的事件依然存在。
点击两个按钮，再点击下面的p元素，就可以看出区别。

0 1
Pikachu2016

2019-09-14 11:32:42

是为了证明用remove()删除是把一切都删除了包括事件，而detach()删除是暂时删除，append之后又显示回来了，包括事件也仍存在着，只是文本内容通过text替代了之前的文本，所以append之后文本和点击事件都还在

0 0
了不起的bug大师

2019-02-28 23:58:49
```
 $('p').click(function(e) {        alert(e.target.innerHTML)    })    $("button:first").click(function() {        var k = $("p:first").remove();        k.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')        $("body").append(k);    });    $("button:last").click(function() {        var k = $("p:first").detach();        k.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')        $("body").append(k);    });
```
那段代码的意思是给p绑定事件，点击p标签的内容会弹出内容，若不是p标签的内容，就不会弹出内容，反过来说明该内容不是p标签的。
这么说吧，点击了remove按钮后出现的内容其实是
<body > p1通过remove处理后,点击该元素,事件丢失</body>
点击那段红字是不后悔弹出内容的，说明p标签不在，被删除了。

点击的了detach按钮出现的内容是
<body><p>p2通过detach处理后,点击该元素事件存在</p></body>
点击蓝字会弹出内容，说明p标签还在。
0 1