TL;DR : js的一个重要功能，就是实现网页的各种交互效果。主要是通过添加事件处理函数，然后修改DOM元素的style，或者添加预制的css class来实现各种前端展现。
在web前端进行界面逻辑处理，只能依靠js。在js尚不普及的年代，都是单纯依赖页面跳转，表单提交实现获取前端展现。有了js之后，前端的界面处理，就可以在本地执行，而且也越来越类似于桌面应用。
js操作web界面的基本套路就是：
- document.querySelector选择到需要处理的DOM元素
- 为此element添加事件响应，比如click, mousemove, mouseover
- 在事件处理函数中，操作元素的style属性，还可以通过className或classList对css类进行操作
比如显示一个模式对话框，这个对我来说简直就是宇宙大谜团。现在我终于明白了。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class='backdrop'></div>
<div class='modal'>
<h1 class='modal-title'>是否确认删除此条记录</h1>
<div class='modal-action'>
<a href='somepage.html' class='modal_button'>Yes</a>
<button class='modal_button modal_negative_button'>No</button>
</div>
</div>
<div class='main-content'>
<button class='record-delete'>
删除
</button>
</div>
|
其中.backdrop .modal 起初都是隐藏的，然后通过相应click事件，才会弹出来。backdrop是个遮罩，有半透明的背景色，使得原有页面上的内容看得到，但是无法相应鼠标事件，如果也不想要tab键获得焦点，可以加上tabindex="-1" 。
添加响应事件的处理逻辑，就是调用addEventListener
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function showModal(){
document.querySelector('.backdrop').classList.add('open');
document.querySelector('.modal').classList.add('open');
}
function closeModal(){
document.querySelector('.backdrop').classList.remove('open');
document.querySelector('.modal').classList.remove('open');
}
var btnList = document.querySelectorAll('.action-button');
for (var i=0;i<btnList.length;i++){
btnList[i].addEventListener('click', function(){
showModal();
});
}
var closeButton = document.querySelector('.modal .modal_negative_button');
closeButton.addEventListener('click', function(){
closeModal();
});
|