前端基础练习题第25天答案及解析

本篇文章是前端基础练习题第二十五天的答案及解析部分，纯题目部分请移步前端基础练习题第25天

正文

1.假设HTML为

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

则

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

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

`null`、`"hello world"`。

文本节点具有nodeValue属性，而元素节点没有。

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

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

如下方两种方式所示：

// 方法1 
var style = document.createElement('style');
style.setAttribute('media', 'screen');
style.innerHTML = 'body{color:red;}';
document.head.appendChild(style);

// 方法2
var style = (function() {
  var style = "<style media='screen'>body{color:red;}</style>";
  document.head.innerHTML += style;
  return style;
})();

1
2
3

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

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

答案：`1`、`2`。

若修改为

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);

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

答案：`2`、`1`。

JS事件流的执行顺序默认为冒泡执行，即按照由里即外的顺序执行。而如果使用addEventListener，且将第三个参数设置为true，则会采用捕获执行，即自上而下的顺序执行。

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

事件代理是指把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这样做的好处是只要定义一个监听函数，就能处理多个子节点的事件，如果希望阻止事件传播，可用`event.stopPropagation()`方法，也可使用`event.cancelBubble = true`来取消冒泡。

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

使用`e.preventDefault()`方法可以取消事件对当前元素的默认影响。该方法生效的前提是事件对象的`cancelable`属性为`true`。

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

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

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

答案：`2`、`2`。

在该input框里输入一个字母，则在控制台会依次输出____。

答案：`3`、`2`。

键盘事件的执行顺序为按下按键(keydown) -> 按住按键(keypress) -> 松开按键(keyup)，且keypress事件会覆盖掉keydown事件，注意keypress事件是不会监听功能键的(如Ctrl、Alt、Shift、Fn键等)。

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

浏览器是从上至下解析的，当发现`<script>`元素时，会将网页渲染的控制权转交给`JavaScript`引擎。若脚本加载时间很长，那就会造成网页长时间失去响应，浏览器会呈现“假死”状态，被称之为“阻塞效应”。将脚本放在底部，能保证页面至少可以访问，增强了用户体验，并且此时`DOM`结构已生成，也可以放心的进行`DOM`操作。

说明

题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript
答案中，若有错误和需完善的地方，可在下方留言反馈哈~~
查看纯习题版，请点击前端基础练习题第25天

正文

null、"hello world"。

如下方两种方式所示：

答案：1、2。

答案：2、1。

使用e.preventDefault()方法可以取消事件对当前元素的默认影响。该方法生效的前提是事件对象的cancelable属性为true。

答案：2、2。

答案：3、2。

说明