23、JS事件

最新推荐文章于 2023-02-20 15:13:08 发布

好好学习_fighting

最新推荐文章于 2023-02-20 15:13:08 发布

阅读量272

点赞数 1

分类专栏： js基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_40637729/article/details/127342118

版权

js基础专栏收录该内容

26 篇文章 2 订阅

订阅专栏

JS事件

概念

1.何为事件

实现交互的核心功能点,事件是一个动作。

2.重要吗?—交互体验的核心功能

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// onclick就是点击事件
	div.onclick = function () {  // 点击之后执行的函数
  		console.log('我被点击了');      
    }
</script>

事件处理函数

如何绑定事件处理函数

事件不绑定也有，绑定的只是事件处理函数。

1.ele.onxxx = function (event){}

ele.on+事件类型,这种绑定方式叫句柄

// 绑定对应事件的处理函数  就是点击了之后要干啥
div.onclick = function () {
    console.log('a');
}

兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序

// 绑定对应事件的处理函数  就是点击了之后要干啥
div.onclick = function () {
    console.log('a');
}
// 注意 一个对象的一个事件只能绑定一个事件处理函数 因为这么写会把上面的div.onclick事件覆盖
div.onclick = function () {
    console.log('b');
}

基本等同于写在HTML行间上

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.onclick = function () {}
</script>

// 基本等同于把div.onclick写在行间 注意不写function 直接写函数体的内容 然后是和style平级 不能写style内
<div style="width:100px;height:100px; background-color: red;" div.onclick = "console.log('a')">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// div.onclick = function () {
	//	console.log('a')
	//}
</script>

2.obj.addEventListener(type,fn, false);

IE9以下不兼容，可以为一个事件绑定多个处理程序

div.addEventListener(事件类型, 处理函数,false);

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// div.addEventListener(事件类型, 处理函数,false);
	div.addEventListener('click', function () {
        console.log('a');
    },false);
	// function test() {} 函数可以提到外面  然后在对应位置引用
	// div.addEventListener('click',test,false);
</script>

特点：可以给一个对象的一个事件绑定多个处理函数,会按照写的顺序先后执行。

<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// 点击时打印a a  这是两个长得一样但是地址不一样的处理函数 哪怕都是打印a
	div.addEventListener('click', function () {
        console.log('a');
    },false);
	div.addEventListener('click', function () {
        console.log('a');
    },false);
</script>

<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// 这样只会打印一个a  因为两个处理函数都指向test test是一个函数  指向地址相同 所以不能绑定同一个函数多次
	div.addEventListener('click',test,false);
	div.addEventListener('click',test,false);
	function test() {
        console.log('a');
    }
</script>

3.obj.attachEvent(‘on’+ type, fn);

IE独有,只能IE使用，一个事件同样可以绑定多个处理程序,IE没了，所以也不用看了。

div.attachEvent(事件类型, 处理函数);

基本和addEventListener一样，只是少了false,唯一不一样的是这是IE独用的

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	// div.attachEvent(事件类型, 处理函数);
	div.attachEvent('click', function () {
        console.log('a');
    });
</script>

小练习

<ul>
	<li>a</li>
     <li>a</li>
     <li>a</li>
     <li>a</li>
</ul>

使用原生js，addEventListener，给每个1i元素绑定一个click事件输出他们的顺序

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
	<script type="text/javascript">
        var liCol = document.getElementsByTagName( 'li');
        var len = liCol.length;
        // 绑定事件出现在循环里要考虑是否形成闭包
        for(var i =0; i < len; i ++) {
           （function(i) {
                liCol[i].addEventListener('click',function(){
				console.log(i);  // 这样写只会返回4  因为for循环结束之后才执行函数打印的i 所以要用立即执行函数
             }, false);
           }(i))
        }
    </script>

事件处理程序的运行环境

1.ele.onxxx = function (event){}

程序this指向是dom元素本身

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.onclick = function () {
        console.log(this) // this指向元素本身
    }
</script>

点击之后打印的是div这个元素本身

2.obj.addEventListener(type, fn, false);

程序this指向是dom元素本身

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.addEventListener = ('click' , function () {
        console.log(this);  // this指向元素本身
    }, false);
</script>

3.obj.attachEvent(‘on’+ type, fn);

程序this指向window

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.attachEvent = ('click' , function () {
        console.log(this);  // this指向window
    });
</script>

// 让this指向元素本身的办法
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.attachEvent = ('click' , function () {
        handle.call(div);  // 函数里面执行另外一个函数 执行的时候传div
    });
	function handle() {
        console.log(this);
    }
</script>

封装兼容性的addEvent(elem, type, handle);方法

<div style="width:100px;height:100px; background-color: red;">
</div>
// 参数： 元素 事件类型 处理函数
function addEvent(elem, type, handle) { 
    if(elem.addEventListener) {  // 如果元素能用这个方法
        // 使用addEventListener绑定事件处理函数
        elem. addEventListener(type,handle,false);
    }else if(elem.attachEvent) { // 如果能用这个方法
        // 使用attachEvent绑定事件处理函数
        elem.attachEvent( 'on' + type,function() {
       		handle.call(elem) ;
    })
    }else{  // 上面的都不能用就用0n + type的方法(兼容性好)
   		elem [ 'on' + type] = handle;|
    }
}

解除事件处理程序

ele.onclick = false/‘’/null;

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.onclick = function () {
        console.log('a');
    }
	div.click = null;  // 解除绑定事件处理函数
	// 下面这两个也可以
     div.click = '';
     div.click = false;
</script>

ele.removeEventListener(type, fn, false);

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.addEventListener('click',test,false);
	// 用removeEventListener清除函数绑定就需要把函数写在外面，不然找不到函数
	function test() {
        console.log('a');
    }
	div.removeEventListener('click',test,false);
</script>

ele.detachEvent(‘on’+ type, fn);

<div style="width:100px;height:100px; background-color: red;">
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.addEventListener('click',test);
	// 用detachEvent清除函数绑定也需要把函数写在外面
	function test() {
        console.log('a');
    }
	div.detachEvent('click',test);
</script>

注:若绑定匿名函数，则无法解除

// 这就是为什么上面需要把函数写在外面的原因  可以试试函数写在括号里面看看  加上函数名看看能不能找到

事件处理模型

事件冒泡、捕获

一个对象的一个事件类型只能遵循一种事件处理模型。也就是要么冒泡，要么捕获，不能同时存在冒泡和捕获。

事件冒泡:

结构上(非视觉上)嵌套关系的元素，会存在事件冒泡的功能,即同一事件，自子元素冒泡向父元素。(自底向上)

结构上嵌套的同一事件会像水泡一样一层一层的往上冒

.wrapper{
    width : 300px;
    height: 300px;
    background-color: red ;
}
.content{
    width : 200px;
    height : 200px;
    background-color: green;
}
.box{
    width: 100px;
    height:100px;
    background-color: orange;
}

<div class="wrapper">
    <div class="content">
    	<div class="box">
        </div>
    </div>
</div>
<script type="text/javascript">
    var wrapper = document.getElementsByClassName ('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document.getElementsByClassName('box')[0];
	wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, false);
	content.addEventListener('click', function () {
        console.log('content');
	}, false);
	box.addEventListener('click', function () {
        console.log('box');
    }, false);
</script>

注意顺序是由内到外：点击时会发现点击红色部分只打印wrapper 点击绿色部分打印content和wrapper 点击box时打印box 和content 和 wrapper

注意：加上margin-left依旧是结构上嵌套关系所以还是会有冒泡

事件捕获:

结构上(非视觉上)嵌套关系的元素，会存在事件捕获的功能，即同一事件,自父元素捕获至子元素(事件源元素)。( 自顶向下)

IE没有捕获事件只有谷歌有

.wrapper{
    width : 300px;
    height: 300px;
    background-color: red ;
}
.content{
    width : 200px;
    height : 200px;
    background-color: green;
}
.box{
    width: 100px;
    height:100px;
    background-color: orange;
}

<div class="wrapper">
    <div class="content">
    	<div class="box">
        </div>
    </div>
</div>
<script type="text/javascript">
    var wrapper = document.getElementsByClassName ('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document.getElementsByClassName('box')[0];
	wrapper.addEventListener('click', function () {
        console.log('wrapper');
    },true); // false改为true就是捕获处理模型
	content.addEventListener('click', function () {
        console.log('content');
	}, true); // false改为true就是捕获处理模型
	box.addEventListener('click', function () {
        console.log('box');
    }, true); // false改为true就是捕获处理模型
</script>

注意顺序是由外到内：捕获和冒泡没啥不一样只是顺序不一样捕获是自顶向下点第一个wrapper打印wrapper 点第二个content打印wrapper content(先打印外层) 点击box时打印wrapper和content和box

!!!被点击的元素叫事件执行其他元素才叫事件捕获比如点击box box是事件执行另外两个元素叫事件捕获!!!

触发顺序，先捕获，后冒泡

<div class="wrapper">
    <div class="content">
    	<div class="box">
        </div>
    </div>
</div>
<script type="text/javascript">
    var wrapper = document.getElementsByClassName ('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document.getElementsByClassName('box')[0];
	// 捕获处理模型
	wrapper.addEventListener('click', function () {
        console.log('wrapper');
    },true);
	content.addEventListener('click', function () {
        console.log('content');
	}, true);
	box.addEventListener('click', function () {
        console.log('box');
    }, true);
	// 冒泡处理模型
	wrapper.addEventListener('click', function () {
        console.log('wrapperBubble');
     },false);
	content.addEventListener('click', function () {
        console.log('contentBubble');
	}, false);
	box.addEventListener('click', function () {
        console.log('boxBubble');
    }, false);
</script>

会发现既有捕获又有冒泡的时候会优先打印外层的元素也就是会先捕获后冒泡

focus，blur，change，submit,reset，select 等事件不冒泡

取消冒泡和阻止默认事件

取消冒泡

.wrapper{
    width : 300px;
    height: 300px;
    background-color: red ;
}
.content{
    width : 200px;
    height : 200px;
    background-color: green;
}
.box{
    width: 100px;
    height:100px;
    background-color: orange;
}

<div class="wrapper"></div>
<script type="text/javascript">
    document.onclick = function （）{
        console.log('你闲的呀');  // 文档是全局的 所有的元素都是document的子元素  点哪儿都会打印
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function () {
        // 点击之后变绿色 但是由于document是全局的 所以div是document嵌套的元素  根据事件冒泡 也会打印document的内容你闲的呀 这样不好  所以要取消某些部分的事件冒泡
        this.style.background = "green";
    }
</script>

本W3C标准 event.stopPropagation();但不支持ie9以下版本

<div class="wrapper"></div>
<script type="text/javascript">
    document.onclick = function （）{
        console.log('你闲的呀');
    }
    var div = document.getElementsByTagName('div')[0];
	// 系统会把事件发生时的数据打包成数据对象传到参数e中
    div.onclick = function (e) { 
        e.stopPropagation(); // 取消冒泡的方法
    }
</script>

IE独有event.cancelBubble = true;

<div class="wrapper"></div>
<script type="text/javascript">
    document.onclick = function （）{
        console.log('你闲的呀');
    }
    var div = document.getElementsByTagName('div')[0];
	// 系统会把事件发生时的数据打包成数据对象传到参数e中
    div.onclick = function (e) { 
        e.cancelBubble = true; // 取消冒泡的方法
    }
</script>

封装取消冒泡的函数stopBubble(event)

<div class="wrapper"></div>
<script type="text/javascript">
    document.onclick = function （）{
        console.log('你闲的呀');
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function (e) { 
        stopBubble(e); // 把e传进来就好了
    }
</script>

function stopBubble(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else {
        e.cancelBubble = true;
    }
}

阻止默认事件:

默认事件—表单提交,a标签跳转,右键菜单等

a标签

// void(false) 阻止默认事件(a标签的点击跳转等事件
// 小知识：a标签点击跳转后会跳转到页面顶部的位置
<a href="javascript:void(false)" >demo</a>
// 这样写也行
<a href="javascript:;" >demo</a>
//alert弹窗
<a href="javascript:lalert('a')">demo</a>

右击菜单的默认事件阻止

// 右键出菜单事件  右击时触发这个事件
<div class="wrapper"></div>
<script type="text/javascript">
    document.oncontextmenu = function ( ) {
		console.log ('a');
	}
</script>

1.return false;以对象属性的方式注册的事件才生效

注意这是句柄方式的阻止默认事件也只有句柄方式on+type,fn绑定的事件才能用

<div class="wrapper"></div>
<script type="text/javascript">
    document.oncontextmenu = function ( ) {
		console.log ('a');
    	 return false; // 兼容性很好  取消右键菜单事件
	}
</script>

右击就没有菜单了只打印了a

2.event.preventDefault(); W3C标注,IE9以下不兼容

// 非句柄方式绑定的事件(句柄也能用)
<div class="wrapper"></div>
<script type="text/javascript">
    document.oncontextmenu = function (e) {
		console.log ('a');
    	 e.preventDefault();
	}
</script>

只出a不出右击菜单

3.event.returnValue = false;兼容IE

<script type="text/javascript">
    document.oncontextmenu = function (e) {
        console.log ('a');
        e.returnValue = false;
    }
</script>

封装阻止默认事件的函数cancelHandler(event);

<script type="text/javascript">
    document.oncontextmenu = function (e) {
        cancelHandler(e);
    }
</script>
function cancelHandler(event) {
    if(e.preventDefault) {
        e.preventDefault();
    }else(e.returnValue) {
        e.returnValue = false;
    }
}

事件对象

event || window.event用于IE

事件源对象:

event.target火狐只有这个

event.srcElement IE只有这个

这俩chrome都有

所以写的时候考虑火狐和IE 需要兼容两者

.wrapper{
    width : 300px;
    height: 300px;
    background-color: red ;
}
.content{
    width : 200px;
    height : 200px;
    background-color: green;
}
.box{
    width: 100px;
    height:100px;
    background-color: orange;
}

<div class="wrapper" style="width:100px;height:100px; background-color: red;">
	<div class="box" style="width:50px;height:50px; background-color: green"></div>
</div>
<script type="text/javascript">
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var box = document.getElementsByClassName('box')[0];
    wrapper.onclick = function (e) {
   		var event = e || window.event;
         console.log(event);
	}
</script>

返回的对象中可以查看到事件源对象(被点击的那个)

兼容性写法

<script type="text/javascript">
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var box = document.getElementsByClassName('box')[0];
    wrapper.onclick = function (e) {
   		var event = e || window.event;
         var target = event.target || event.srcElement;
         console.log(target);
	}
</script>

打印的就是点击的事件源对象

事件委托

利用事件冒泡，和事件源对象进行处理

事件委托优点︰

1.性能不需要循环所有的元素一个个绑定事件

2.灵活当有新的子元素时不需要重新绑定事件

<!--点击元素输出对应的数据源对象-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<script type="text/javascript">
    var ul = document.getElementsByTagName('ul')[0];
	// 根据冒泡 点击子元素同时会触发父级的事件处理函数 然后打印事件源对象(点到哪个哪个就是事件源对象)的内容
	ul.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
         // 点击时打印数据源对象(被点击的li)的内容
        console.log(target.innerText);
	}
</script>

事件分类

鼠标事件

1.click点击、mousedown按下、mousemove移动、mouseup、 contextmenu、mouseover、mouseout、mouseenter、mouseleave

click和mousedown和mouseup同时存在时按down up click的顺序

// click = mousedown + mouseup;

<div style="width: 100px; height: 100px; background-color: red ; position:absolute;left:0;top:0;">
</div>
<script type="text/javascript">
    // 点击时触发
    document.onclick = function () {
    console.log('鼠标click了');
    }
    // 鼠标按下时触发
    document.onmousedown = function () {
        console.log('鼠标mousedown了');
    }
    // 鼠标移动时触发
    document.onmousemove = function () {
        console.log('鼠标mousemove了');
    }
    // 鼠标按下之后放开的时候触发
    document.onmouseup = function () {
        console.log('鼠标mouseup了');
    }
    // 鼠标右击时触发
    document.oncontextmenu = function () {
        console.log('鼠标contextmenu了');
    }
    // 鼠标移入页面区域时触发  移出后再次移入会再次触发  和onmouseenter功能一样 但是onmouseover会冒泡
    document.onmouseover = function () {
        console.log('鼠标mouseover了');
    }
    // 鼠标移出页面区域时触发  移入后再次移出会再次触发  和onmouseleave功能一样 但是onmouseover会冒泡
    document.onmouseout = function () {
        console.log('鼠标mouseout了');
    }
    // 鼠标移入页面区域时触发  移出后再次移入会再次触发
    document.onmouseenter = function () {
        console.log('鼠标mouseenter了');
    }
    // 鼠标移出页面区域时触发  移入后再次移出会再次触发
    document.onmouseleave = function () {
        console.log('鼠标mouseleave了');
    }
</script>

2.用button来区分鼠标的按键，0/1/2,通过mousedown和mouseup来判断。

// mousedown和mouseup都可以结合button判断鼠标的按键
<script type="text/javascript">
    document.onmousedown = function (e) {
   		if(e.button == 2) {
            console.log('right');
        }else if (e.button == 0) {
            console.log('left');
        }
	}
</script>

左键是0 右键是2 中间滚动轮是1

下图的buttons:1是说明第一个button 0是代表按的左键

第二个button 2代表按的是右键

3.DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键

事件练习

演示demo—拖拽

应用mousedown、mouseup、mousemove

<div style="width: 100px; height: 100px; background-color: red ; position:absolute;left:0;top:0;">
</div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div')[0];
    var disX, disY;  // 鼠标当前的点(鼠标在的点)设置成left和top
    div.onmousedown = function (e) {
         // 减去鼠标点击的位置
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        document.onmousemove = function (e) {
            // windoe.event是全局的  event是局部的
            var event = e || window.event;
            div.style.left = e.pageX + "px";
            div.style.top = e.pageY + "px";
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
}
</script>

如何区分拖拽和点击(应用)

// 通过判断时间、加锁的方式实现
<div style="width: 100px; height: 100px; background-color: red ; position:absolute;left:0;top:0;">
</div>
<script type="text/javascript">
    var firstTime = 0;
	var lastTime = 0;
	var key = false;
    document.onmousedown = function () {
    	firstTime = new Date().getTime();
	}
	document.onmouseup = function () {
    	lastTime = new Date().getTime();
        if(lastTime - firstTime < 300) {
            key = true;
        }
	}
	document.onclick = function () {
    	if(key) {
            console.log('click');
            key = false;
        }
	}
}
</script>

事件分类

键盘事件

keydown keyup keypress

// keydown和keypress都是鼠标按下时触发  keyup是松开鼠标时触发
<div style="width: 100px; height: 100px; background-color: red ; position:absolute;left:0;top:0;">
    </div>
<script type="text/javascript">
    document.onkeypress = function () {
    console.log('keypress');
    }
    document.onkeydown = function () {
        console.log('keydowm');
    }
    document.onkeyup = function () {
        console.log('keyup');
    }
</script>

执行顺序：keydown > keypress > keyup

keydown和keypress的区别

keydown可以响应任意键盘按键，keypress只可以相应字符类键盘按键

按上下左右这种按键
keydown可以响应但是keypress不行 keypress只能监测字符类按键也就是有ASCII码的按键

keydown的缺点
keydown可以响应但是keypress不行 keypress只能监测字符类按键也就是有ASCII码的按键

字符类按键用keypress，操作类按键用keydown

keydown的charCode是0,which是键盘的键位。

keydown的charCode是97,which是键盘的键位。

keypress返回ASCII码,可以转换成相应字符

<div style="width:100px;height:100px;background-color:red; position:absolute;left:0;top:0;">
</div>
<script type="text/javascript">
    document.onkeypress = function (e) {
// String的fromCharCode方法可以直接把放入的Unicode转换成对应的字符(Unicode编码是万国码  包含了ASCII码)
   		console.log(String.fromCharCode(e.charCode));
	}
</script>

文本操作事件

input,focus,blur,change

input

input {
        border: 1px solid #01f;
    }

// 输入什么就打印出什么 删除之后也会打印
<input type="text">
<script type="text/javascript">
    var input = document.getElementsByTagName("input")[0];
    input.oninput = function (e) {
        console.log(this.value);  // this代表input
    }
</script>

change: 聚焦，内容发生改变(内容不变失去焦点也不会触发)，失去焦点时打印


<script type="text/javascript">
    var input = document.getElementsByTagName("input")[0];
    input.onchange = function (e) {
        console.log(this.value);
    }
</script>

onblur:失去焦点时

onfocus聚焦时

// 缺陷是输入请输入用户名时字体颜色会变黑(因为是输入的内容)
<input type="text" value="请输入用户名" style="color:#999" 
    onfocus="if(this.value=='请输入用户名')
    {this.value=' ';this.style.color='#424242'}" 
    onblur="if(this.value==' ' ){this.value='请输入用户名';
     this.style.color='#999'}">
    <script type="text/javascript">
        var input = document.getElementsByTagName("input")[0];
        input.onchange = function (e) {
            console.log(this.value);  // this代表input
        }
    </script>

窗体操作类(window上的事件)

scroll(获取滚动条当前位置)

li{$}*100
<script type="text/javascript">
        window.onscroll = function () {
            console.log(window.pageXoffset + " " + window.pageYoffset);
        }
</script>

onload

浏览器	执行顺序
html和css	是并行解析的
html	html在解析的时候会形成一个叫domTree的东西
css	css在解析的时候会形成一个叫cssTree的东西
renderTree会标注结构的样式	domTree和cssTree结合生成一颗渲染树renserTree

domTree

<div>
	<span></span>
	<strong></strong>
</div>

上面这个html结构形成的domTree,代码解析是只要认出来就把标签挂在domTree上，具体的内容先不管。比如有一个img标签有一张很大的图标，在识别了是img之后就会把img挂在domTree上，然后开启一个异步线程下载图片。

<script type="text/javascript">
    // 这么写就需要所有的代码解析并且下载完成之后才会触发onload 所以效率很低  onload能提醒什么时刻是页面开始启动的时候
    window.onload = function () {
        var div = document.getElementsByTagName( 'div' )[0];
    	console.log(div);
        div.style.width= "100px";div.style.height = "100px;
        div.style.backgroundColor = "red";
	}
</script>
.pageYoffset);
        }
</script>

onload

浏览器	执行顺序
html和css	是并行解析的
html	html在解析的时候会形成一个叫domTree的东西
css	css在解析的时候会形成一个叫cssTree的东西
renderTree会标注结构的样式	domTree和cssTree结合生成一颗渲染树renserTree

domTree

<div>
	<span></span>
	<strong></strong>
</div>

[外链图片转存中…(img-ykKX5epi-1665845854203)]

<script type="text/javascript">
    // 这么写就需要所有的代码解析并且下载完成之后才会触发onload 所以效率很低  onload能提醒什么时刻是页面开始启动的时候
    window.onload = function () {
        var div = document.getElementsByTagName( 'div' )[0];
    	console.log(div);
        div.style.width= "100px";div.style.height = "100px;
        div.style.backgroundColor = "red";
	}
</script>