原生js给元素绑定click事件+iframe优缺点+css各个节点的区别

打码中...

已于 2023-05-23 15:01:59 修改

阅读量2.1k

点赞数 1

分类专栏： js 文章标签： javascript 前端开发语言

于 2022-09-12 10:14:41 首次发布

本文链接：https://blog.csdn.net/m0_52669454/article/details/126813449

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

原生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 属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点。