前端基础练习题 第25天

该篇文章是该系列的第二十五天。本文将分享一些DOM操作和JS事件相关的练习题，JS对DOM和事件的控制是平常最常见的操作类型，愿共同学习。

正文

1.假设HTML为

1	<div id="d1">hello world</div>

则

1	var div1 = document.getElementById('id');

div1.nodeValue = ___________，div1.firstChild.nodeValue = ___________。

2.利用JS在<head>标签中添加一张样式表，样式表如下所示：

<style media="screen">
  body {
    color: red;
  }
</style>

1
2
3

<div onClick="console.log(2)">
  <button onClick="console.log(1)">点击</button>
</div>

点击按钮后，会在控制台先后输出______、_______，若修改为

1
2
3

<div id="outer">
  <button id="inner">点击</button>
</div>

1 2	document.querySelcector("#inner").addEventListener('click', () => { console.log(1); }, true); document.querySelcector("#outer").addEventListener('click', () => { console.log(2); }, true);

则点击按钮后，会在控制台先后输出______、_______。

4.试简述什么叫做事件代理机制。

5.如何取消浏览器对当前事件的默认行为？如取消点击链接的默认跳转。

6.在某个input框上绑定如下所示的三个事件

input.onkeydown = () => { 
  console.log(1);
};
input.onkeyup = () => { 
  console.log(2);
};
input.onkeypress = () => { 
  console.log(3);
};

则在该input框里执行一次粘贴操作（按下Ctrl + C键），在控制台会依次输出____________；在该input框里输入一个字母，则在控制台会依次输出____________。

7.为什么说尽量要把script标签放在页面底部？

1.题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

2.题目中，若有错误和需完善的地方，可在下方留言反馈哈~~