原生js给一个元素绑定click事件(三种实现方法)
第一种直接在DOM元素绑定:
<div id="btn" onclick="one()">sss</div>
<script>
function one(){
console.log(11); //11
}
</script>
第二种在js代码中绑定( 脚本里面绑定):
<div id="aaa">xxx</div>
<script>
document.getElementById("aaa").onclick = function(){
console.log(88); //88
}
</script>
第三种添加事件监听函数( 脚本里面绑定):
通过addEventListener注册的事件监听,可以通过“removeListener”来取消监听。
但如果要移除事件句柄,addEventListener方法里执行的函数必须使用外部有名函数,
不可以是addEventListener方法内部的匿名函数也不可以是addEventListener方法内部定义的有名函数,
因为如果只是在addEventListener方法内,removeListener方法是找不到的要移除的事件句柄的
<div id='aaa'>sss<div>
<script>
document.getElementById('aaa').addEventListener('click',name
)
document.getElementById('aaa').addEventListener('click',function() {
console.log(888);
})
function name(params) {
console.log(555);
}
document.getElementById('aaa').removeEventListener("click",name) //移除前打印555和888,移除后只打印888
</script>
区别:用 “addeventlistener” 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 “onclick” 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
附:
ondblclick 事件:在鼠标双击元素时触发。
<div id="btn" ondblclick="one()">sss</div>
<script>
function one(){
console.log(11); //11
}
</script>
iframe定义:iframe标签规定一个内联框架,一个内联框架被用来在当前HTML文档中嵌入另一个文档
(如需使用iframe,最好通过js动态给iframe添加src属性值。但是现在基本上都是用Ajax来代替iframe)
使用<iframe>
标签可以在网页中嵌入另一个独立的HTML文档,它具有以下优点和缺点:
优点:
-
代码隔离:
<iframe>
创建了一个独立的文档上下文,使嵌入的内容与主页面的样式和JavaScript代码相互隔离。这意味着iframe内部的代码不会与主页面的代码发生冲突,可以独立开发和维护。 -
并行加载:浏览器可以并行加载主页面和iframe内部的内容,这可以提高页面加载性能。同时,iframe内部的内容可以来自不同的域,允许跨域加载,这在某些情况下是很有用的。
-
插件支持:
<iframe>
可以用于嵌入各种插件,如地图、视频播放器、社交媒体小部件等。通过嵌入插件,可以轻松地在网页中添加丰富的功能和交互性。 -
可重用性:通过使用
<iframe>
,可以将独立的HTML文档作为组件在多个页面中重用。这可以简化开发过程,减少重复代码。
缺点:
-
加载性能:每个
<iframe>
都需要加载独立的HTML文档和相关资源,这会增加页面的加载时间。过多的iframe可能会影响整体性能。 -
难以操作内部内容:由于
<iframe>
创建了独立的文档上下文,访问和操作iframe内部的元素和内容变得更加复杂。需要通过特定的API和跨文档消息传递(postMessage)来实现与iframe之间的通信。 -
搜索引擎优化:搜索引擎通常不会将iframe内部的内容视为主页面的一部分。因此,iframe内的内容可能无法被搜索引擎正确索引和收录。
-
安全性风险:由于iframe可以加载来自不同域的内容,存在跨域安全风险。恶意网站可以通过iframe加载恶意内容,如钓鱼网站或恶意广告。
综上所述,<iframe>
在某些情况下是很有用的工具,可以实现代码隔离、插件支持和可重用性。但同时也需要注意性能影响、操作复杂性、搜索引擎优化和安全性风险等问题。在使用<iframe>
时,需要根据具体情况权衡利弊并合理使用。
css各个节点的区别:
1、元素节点是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问。
2、属性节点:一般是元素节点的属性,每一个 XML 属性算是一个属性节点。
3、文本节点:是DOM中用于呈现文本的部分,一般被包含在元素节点的开闭合标签内部。
4、文档节点是DOM中用于呈现整个文档的部分,文档节点的 childNodes 属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点。