在同一个文件中,代码会预解析并且提升。
若加载多个文件时,后续的文件默认会等待上一个文件加载完并执行后,才会继续预解析并执行。
若一定要把先使用的程序文件放在后面的话,可以给它的script标签加上async属性。
(一)事件监听
1.事件监听注册事件
语法:事件源.addEventListener('事件类型',事件处理程序,是否捕获);
代码举栗:
<body>
<button>点击</button>
<div>
内容
</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click',function(){
div.style.width = '300px';
div.style.height = '300px';
div.style.background = 'red';
});
btn.addEventListener('click',function(){
div.style.color = 'gold';
div.style.fontSize = '50px';
})
</script>
</body>
事件监听注册事件属于叠加事件,后一个不会覆盖前面相同的事件。
传统注册事件属于覆盖事件,事件源.事件类型 = 事件处理程序。会让后面的事件覆盖前面相同的事件。
若考虑以后的事件扩展,选择事件监听;若不需要扩展,选择传统方式。
事件监听是标准的(官方认可的),但是有兼容问题。(移动端使用较多)
传统方式是非标准的,但是没有兼容问题。(PC端使用较多)
2.事件监听移除事件
传统移除事件,把原来的事件重新赋值为null
btn.onclick = null;
语法:事件源.removeEventListener('事件类型',事件处理程序的名称);
代码举栗:
<body>
<button>点击</button>
<div>
内容
</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var fn1 = function() {
div.style.width = '300px';
div.style.height = '300px';
div.style.background = 'red';
};
var fn2 = function() {
div.style.color = 'gold';
div.style.fontSize = '50px';
}
btn.addEventListener('click',fn1); //fn1不要加小括号()
btn.addEventListener('click',fn2);
// 移除fn2
btn.removeEventListener('click',fn2);
</script>
</body>
(二)时间流
事件触发后的一个流程。有三个阶段:捕获阶段、目标阶段、冒泡阶段。(先捕获,到达目标,再冒泡)
事件监听注册 事件源.addEventListener('事件类型',事件处理程序,是否捕获);中的第三个元素:
1.事件捕获
true为捕获,从最外层document往内捕获事件,直到捕获到目标为止。
默认为false不捕获,支持事件冒泡,从点击的目标开始,向外层冒泡直到没有为止。
不管是true还是false,冒泡阶段或捕获阶段也都会进行,但是不会展示出来。传输过程一定会经历三个阶段。
2.事件冒泡
传统方式注册事件:默认启用事件冒泡
事件冒泡传输过程:从目标阶段(最先点击的元素)到最外层元素(即document)。
(三)事件对象
在事件触发后或在事件处理程序中,(函数体)所获取并操作的对象。
1.获取事件对象
语法:事件源.事件类型 = function(e){}
形参e(可以是任意字母)就是事件对象。执行函数(即事件触发后)的时候,浏览器会把事件对象交给形参e。
代码举栗:
<script>
document.onclick = function() {
//浏览器会默认给事件对象一些属性
console.log(e);
//从对象中拿东西。X坐标和Y坐标
console.log(e.clientX,e.clientY);
}
</script>
2.鼠标事件对象相关属性
1)鼠标事件类型:
- onclick
- onmouseenter
- onmouseleave
- onmousemove 鼠标移动事件
- onmousedown 鼠标按键按下事件
- onmouseup 鼠标按钮弹起事件
2)鼠标事件对象相关属性:(获取鼠标位置)
代码举栗:
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(e) {
console.log('相对于浏览器当前可视页面的位置:', e.clientX, e.clientY);
console.log('相对于浏览器整个页面的位置:', e.pageX, e.pageY);
console.log('相对于当前元素的位置:', e.offsetX, e.offsetY);
};
</script>
</body>
3.拖拽案例
<body>
<div></div>
<script>
var login = document.querySelector('.login');
var tip = document.querySelector('.tip');
tip.onmousedown = function(e) {
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function (e) {
login.style.left = e.clientX - x + 'px';
login.style.top = e.clientY - y + 'px';
}
};
tip.onmouseup = function() {
document.onmousemove = null; //解绑
}
</script>
</body>
4.键盘事件相关属性
1)键盘事件类型
- onkeydown 键盘按下事件
- onkeyup 键盘弹起事件
一般给document绑定键盘事件。
2)键盘事件对象:(区分键盘按下了哪个键)
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下,返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下,返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下,返回布尔值。(true按下,false没有按下)
代码举栗:
<script>
document.onkeydown = function(e) {
// console.log(e.keyCode); //获得键码值
var num = e.keyCode;
if(e.ctrlKey && e.keyCode==67) { //ctrlKey默认为ture
alert('请登陆!');
}
};
</script>