DOM总结三种创建时间的方法及绑定事件的方法

最新推荐文章于 2021-06-08 16:04:34 发布

TempleTem

最新推荐文章于 2021-06-08 16:04:34 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/TempleTem/article/details/103720856

版权

三种创建元素方式区别

1. document .write() 创建元素

如果页面文档流加载完毕，再调用这句话会导致页面重绘

   var btn = document . querySelector( ' button ');//这段代码。程序冲上往下执行到最末结束。
        										  //代码中在执行btn按钮候后整个页面重绘，
        										//仅剩下div这个标签（页面和控制台均只剩下这个内容）
 btn. onclick = function() {
 document . write('<div>123</div>');
         }

2. innerHTML 创建元素

var inner = document . querySelector(' .inner' );
for(var i=0;i<=100;i++){

 inner. innerHTML += '<a href="#">百度</a>' 
 }

var arr =[] ；

for(var i=0;i<=100;i ++){
arr .push('<a href="#">百度</a>')；
}
 inner.innerHTML = arr .join(' ')；

3. document . createElement() 创建元素

var create = document.querySelector(' .create' );
for (var i  e;i<=100;i++){
 var a = document . createElement('a');
      create. appendChild(a); 
      }

区别!：

● 1. document . write是直接将内容写入页面的内容流，但是文档流执行完毕,则它会导致页面全部重绘
● 2. innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘

● 3. innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂
● 4. ereateElement()创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下, innerhTMI效率要比creatElement 高

绑定事件（事件监听）：

1.册事件概述：

给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式

传统注册方式

●  利用on开头的事件onclick
●  <button onclick= "alert("hi~)" > </button>
● btn.onclick = function （）{} 
●特点: 注册事件的**唯一性**
●同一个元素同一个事件只能设置- 个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

代码示例：

 var btns = document . querySelectorAll( ' button' );
     1.传统方式注册事件

      btns[0].onclick = function( ){      //传统方法无兼容性问题， 但只能绑定唯一事件(最后一个)}

      alert('hi');
      }

      btns [0].onclick = function() {

      alert('nice to meet you ' );
      }

2. 方法监听注册方式:

●w3c 标准推荐方式
●addEventListener（）它是一一个方法
●IE9之前的 IE不支持此方法,可使用**attachEvent（）**代替
● 特点:同一个元素同一个事件可以注册多个监听器
● 按注册顺序依次执行

addEventListener事件监听方式：

eventTarget .addEventListener (type, listener[, useCapture] )

eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上，当该对象触发指定的事件时,就会执行事件处理函数。

该方法接收三个参数:

      ●type: 事件类型字符串,比如click. mouseover , 注意这里不要带on

      ●listener :事件处理函数,事件发生时,会调用该监听函数

      ●useCapture :可选参数，是-个布尔值,默认是false.学完DOM事件流后,我们再进一步学习

2.事件侦听注册事件addEventListener

(1) 里面的事件类型是字符串必定加引号 而且不带on

(2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)

  eg：代码示例
       btns[1]. addEventListener( 'click'，function() {
      alert(22);
      })
      btns[1]. addEventlistener( 'click', function() {
      alert(33);
		})     // 事件监听方法有兼容性问题，但可以绑定多个事件，且事件会依次执行script>