JavaScript同步和异步+宏任务和微任务+事件
同步和异步
所有的点击事件都是异步的
注意：所有事件函数(addEventListener)都不能return
/* * 同步和异步 * 同步,是指代码从上向下执行,执行完一条,才去执行下一条,是按照顺序按照步骤的执行 * * 异步,代码执行需要有一个过程,或者需要一定的时间,或者开始的时间不确定,这时候 * 我们先让别的不相关的代码执行,而当前代码当执行完成后去执行一个回调函数 * * * 注意：如果代码写在script中,并且写在函数外部,那么这个代码他只能执行一次,并且 * 是在开始时就同步执行了,显然这种方式不利于代码中出现交互,因此,代码就需要写在 * 函数中,减少代码之间同步执行方式。函数外通常仅用来定义变量(全局)和执行初始化函数 * * */
var sum=0; var bn=document.querySelector("button"); // 所有的事件都是异步 bn.addEventListener("click",clickHandler); function clickHandler(e) { sum++; oneFn(sum); //回调 // return sum; //注意：所有事件函数都不能return } function oneFn(sum) { console.log(sum,"1___"); twoFn(sum); } function twoFn(sum) { console.log(sum,"2___"); threeFn(sum) } function threeFn(sum) { console.log(sum,"3___"); }
宏任务和微任务
/* * 宏任务 setTimeout setInterval * 微任务 Promise （一共3个） * 同一个队列中,先执行的是宏任务,再执行其他任务,最后执行微任务 * * 在当前队列中出现的异步,如果是微任务就会放在当前任务队列最底端, * 如果当前队列出现的异步是宏任务,就会出现在下一个队列最顶端 * * 也就是说在同一个队列中触发异步,微任务先执行,宏任务后执行 * */
两道常考的笔试题：
// 重要程度：1 ，常考的笔试题 setTimeout(function () { new Promise(function (res, rej) { console.log("1"); res(); }).then(function () { console.log("2") }, function () { }); console.log("3") }, 0); // 2 console.log("4"); //结果：4 1 3 2 /* setTimeout(function () { console.log("1"); },0); new Promise(function (res,rej) { console.log("2");//同步执行 res(); }).then(function () { console.log("3");//异步执行 }); console.log("4") //同步执行 */ // 结果： 2 4 3 1
事件流程
事件触发的3个阶段
捕获阶段 ---> 目标阶段 ---> 冒泡阶段
<style> #div0{ 300px; height: 300px; background: yellow; margin: auto; position: relative; } #div1{ 200px; height: 200px; background: green; position: absolute; /*绝对定位 auto left=top=right=bottom=0 --->居中*/ margin: auto; left: 0; top: 0; right: 0; bottom: 0; } #div2{ 100px; height: 100px; background: red; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } </style> </head> <body> <div id="div0"> <div id="div1"> <div id="div2"></div> </div> </div> <script> var div0 = document.getElementById("div0"); var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div0.addEventListener('click',clickHandler0); var num = 1; function clickHandler0(e) { console.log('div0',e.target,e.currentTarget,this); setTimeout(function (div) { div.style.backgroundColor = "rgba(255,255,0,0.3)"; },num*1000,this); num++; } div1.addEventListener('click',clickHandler1,true); //加了true 捕获阶段优先 function clickHandler1(e) { // e.stopPropagation(); //阻止冒泡 console.log('div1',e.target,e.currentTarget,this); setTimeout(function (div) { div.style.backgroundColor = "rgba(0,255,0,0.3)"; },num*1000,this); num++; } div2.addEventListener('click',clickHandler2); function clickHandler2(e) { console.log('div2',e.target,e.currentTarget,this); setTimeout(function (div) { div.style.backgroundColor = "rgba(255,0,0,0.3)"; },num*1000,this); num++; }
总结归纳：
/* * 事件触发是由3个阶段组成 * 捕获阶段 目标阶段 冒泡阶段 * 外 -->内 目标 内 -->外 * */ /* * 阻止冒泡 可以在冒泡阶段也可以在捕获阶段 * e.stopPropagation();//阻止冒泡 e.cancelBubble=true;//只适用于IE 8及以下 * * */
比较 onclick 和 addEventListener
/* * 比较 onclick 和 addEventListener * 1，onclick 它不可以一个事件做多个方法，addEventListener可以针对同一个 * 对象是一个事件做多个方法,并且可以自由选择中间停止某些方法 * 2.onclick不能设置捕获和冒泡阶段那个优先,addEventListener可以设置捕获和 * 冒泡的优先,及是否选择确定一个被另一个覆盖 * 3.onclick这种事件没有自由度,addEventListener可以侦听所有自定义的事件 * * */ /* div0.onclick=function () { console.log("a") }; div0.onclick=function () { console.log("b"); } //第二个会覆盖第一个*/ /*div0.addEventListener("click",clickHandler0); div0.addEventListener("click",clickHandler1); function clickHandler0() { console.log("a"); this.removeEventListener("click",clickHandler0); } function clickHandler1() { console.log("b"); }*/ /* * IE8及以下浏览器无法通过这个事件选择捕获或者优先的级别 * * */ // div0.attachEvent("onclick",clickHandler0);//相当于 addEventListener // div0.detachEvent("onclick",clickHandler0);//相当于 removeEventListener
事件的一些重要概念：
一个小案例：
涉及知识点：
1、关闭事件冒泡
2、为所有的li设置同一个 clickHandler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
border: 1px solid red;
padding: 10px;
}
li{
border: 1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<!--仅侦听外容器ul 就可以达到对所有子容器的侦听
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
<li>天津</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('click',clickHandler);
function clickHandler(e) {
// console.log(e.target.constructor === HTMLUListElement);
if(e.target.constructor === HTMLUListElement) return;
console.log(e); //MouseEvent {isTrusted: true, screenX: 171, screenY: 198, clientX: 85, clientY: 47, …}
e.target.style.color = "red";
}
</script>-->
<ul>
<li>北京
<ul>
<li>昌平
<ul>
<li>沙河</li>
<li>城关</li>
<li>回龙观</li>
<li>天通苑</li>
</ul>
</li>
<li>海淀</li>
<li>朝阳</li>
<li>东城</li>
<li>西城</li>
</ul>
</li>
<li>山东</li>
<li>山西</li>
<li>河北
<ul>
<li>保定</li>
<li>石家庄</li>
<li>张家口
<ul>
<li>张北</li>
<li>崇礼</li>
<li>下花园</li>
<li>宣化</li>
</ul>
</li>
<li>承德</li>
<li>邯郸</li>
</ul>
</li>
<li>河南
<ul>
<li>郑州</li>
<li>许昌</li>
<li>洛阳</li>
<li>驻马店</li>
<li>信阳
<ul>
<li>罗山
<ul>
<li>竹竿镇</li>
<li>楠杆镇</li>
<li>子路镇</li>
<li>青山镇</li>
<li>灵山镇</li>
<li>莽张镇</li>
<li>周党镇</li>
</ul>
</li>
<li>光山</li>
<li>息县</li>
<li>潢川</li>
<li>新县</li>
<li>正阳</li>
<li>商城</li>
<li>固始</li>
<li>淮滨</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("click", clickHandler)
}
function clickHandler(e) {
e.stopPropagation();
// console.log(this); //this == e.target
e.target.bool = !e.target.bool;
// console.log(e.target.bool);
if(this.bool){
// console.log(this.firstElementChild); //点击信阳 第一个子元素就是 ul
this.firstElementChild.style.display = "none";
return;
}
this.firstElementChild.style.display = "block";
}
</script>
</body>
</html>
阻止系统默认事件：
/* * 阻止系统默认事件的几种类型： * 1.阻止提交表单（跳转） * 2.阻止系统右键菜单(contextmenu事件中使用) * 3.阻止图片拖动时的禁用效果 * * */
<form action="1、Promise.html" method="get">
<input type="text" name="user">
<input type="submit">
</form>
/* var bn=document.querySelector("[type=submit]");
bn.addEventListener("click",clickHandler);
function clickHandler(e) {
console.log(e);
e.preventDefault();//阻止默认事件,
//e.returnValue=false;//IE8 及以下浏览器
}*/
鼠标事件：
MouseEvent 全部事件
MouseEvent {isTrusted: true, screenX: 31, screenY: 125, clientX: 28, clientY: 20, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 28
clientY: 20
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 20
layerY: 12
metaKey: false
movementX: 0
movementY: 0
offsetX: 18
offsetY: 10
pageX: 28
pageY: 20
path: (6) [button, div#btn, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 31
screenY: 125
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button
target: button
timeStamp: 7005.505000000994
toElement: button
type: "click"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 28
y: 20
__proto__: MouseEvent
鼠标事件举例：
/* * e.x e.y e.clientX e.clientY 鼠标相对文档左上顶部位置(当有滚动条或者滚动条改变时,也会改变) * e.pageX e.pageY 鼠标相对页面左上角位置 * e.offsetX e.offsetY 鼠标距离侦听目标的左上角位置 * e.layerX, e.layerY 容器内元素针对侦听目标的左上角位置 * e.screenX e.screenY 针对显示屏的左上角位置 * e.movementX e.movementY 本次鼠标移动距离(主要用于mousemove事件中) * e.ctrlKey e.shiftKey e.altKey e.metaKey（苹果键盘） 鼠标事件触发时按下了键盘的那个辅助键,是true就是按下了 * * */ // var div = document.querySelector("div"); var div = document.querySelector("#div1"); div.addEventListener("click", clickHandler);//点击(鼠标左键) // div0.addEventListener("click", clickHandler);//点击(鼠标左键) // div1.addEventListener("click", clickHandler);//点击(鼠标左键) // div.addEventListener("dblclick",clickHandler);//双击 // div.addEventListener("mousemove",clickHandler);//在目标上移动鼠标 // div.addEventListener("mouseover",clickHandler);//鼠标经过 针对e.target 目标(目标改变就会触发) // div.addEventListener("mouseout",clickHandler);//鼠标滑出 针对e.target 目标(目标改变就会触发) // div.addEventListener("mouseenter",clickHandler);//鼠标进入 针对e.currentTarget侦听的对象 // div.addEventListener("mouseleave",clickHandler);//鼠标离开 针对e.currentTarget侦听的对象 // div.addEventListener("mousedown",clickHandler);//按下鼠标(鼠标三键都会触发) // div.addEventListener("mouseup",clickHandler);//释放鼠标(鼠标三键都会触发) div.addEventListener("contextmenu",clickHandler);//右键点击呼出菜单 function clickHandler(e) { console.log(e); // e.preventDefault(); 阻止默认事件，鼠标右击不会呼出菜单 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置DOM对象的位置</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
position: absolute;
200px;
height: 100px;
background-color: red;
left: 50px;
top: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<script>
init();
function init() {
var $div = document.getElementsByClassName('div1')[0];
$div.addEventListener('mousedown',mouseHandler);
$div.style.position = "absolute";
// $div[0].draggable = true;
console.log($div);
}
function mouseHandler(e) {
// console.log(e);
// console.log(e.currentTarget); //e.currentTarget == $div 就是div对象
//鼠标点击处 距离屏幕左上角 距离
// console.log(e.clientX, e.clientY);
// console.log(e.x, e.y);
// console.log(e.pageX, e.pageY);
//鼠标点击处 距离div左上角 距离
// console.log(e.offsetX, e.offsetY);
// console.log(e.layerX, e.layerX);
switch (e.type) {
case "mousedown":
console.log("按下鼠标");
e.currentTarget.point = {x:e.offsetX,y:e.offsetY};
document.elem = e.currentTarget;
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
break;
case "mousemove":
console.log("移动鼠标");
document.elem.style.left = e.x - document.elem.point.x +"px";
document.elem.style.top = e.y - document.elem.point.y +"px";
break;
case "mouseup":
console.log("松开鼠标");
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
</script>
</body>
</html>
小案例-div跟随鼠标：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
50px;
height: 50px;
background-color: greenyellow;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
document.addEventListener("mousemove",mouseHandler);
function mouseHandler(e) {
console.log(e);
div.style.left=e.clientX-div.offsetWidth/2+"px";
div.style.top=e.clientY-div.offsetHeight/2+"px";
console.log(e.offsetX,e.offsetY);
}
</script>
</body>
</html>
拖拽效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-拖拽</title>
<style>
div{
100px;
height: 100px;
position: absolute;
background-color: orange;
font-size: 26px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="div0">0</div>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<script>
//常规版>>>方式一
/*var div0 = document.getElementById("div0");
div0.addEventListener("mousedown",mousedownHandler);
function mousedownHandler(evt) {
var x = evt.offsetX;
var y = evt.offsetY;
var $that = this;
document.addEventListener('mousemove',mousemoveHandler);
function mousemoveHandler(e1) {
$that.style.left = e1.clientX - x +"px";
$that.style.top = e1.clientY - y +"px";
}
div0.addEventListener('mouseup',mouseupHandler);
function mouseupHandler(e2) {
document.removeEventListener('mousemove',mousemoveHandler);
}
}*/
/*//加强版>>>方式二
var div0 = document.getElementById("div0");
div0.addEventListener("mousedown",mousedownHandler);
function mousedownHandler(evt) {
document.x = evt.offsetX;
document.y = evt.offsetY;
document.addEventListener('mousemove',mousemoveHandler);
this.addEventListener('mouseup',mouseupHandler);
}
function mousemoveHandler(e1) {
div0.style.left = e1.clientX - this.x +"px";
div0.style.top = e1.clientY - this.y +"px";
}
function mouseupHandler(e) {
document.removeEventListener('mousemove',mousemoveHandler);
}*/
/*
//超强版>>>方式三
var divs = document.querySelectorAll("div");
for(var i=0;i<divs.length;i++){
divs[i].addEventListener("mousedown",mousedownHandler);
}
function mousedownHandler(evt) {
evt.preventDefault();
document.x = evt.offsetX;
document.y = evt.offsetY;
document.ele = this;
document.addEventListener('mousemove',mousemoveHandler);
this.addEventListener('mouseup',mouseupHandler);
}
function mousemoveHandler(e1) {
//这里的this 就是document
this.ele.style.left = e1.clientX - this.x +"px";
this.ele.style.top = e1.clientY - this.y +"px";
}
function mouseupHandler(e) {
document.removeEventListener('mousemove',mousemoveHandler);
}
*/
//终极版 封装成函数
var divs = document.querySelectorAll("div");
for(var i=0;i<divs.length;i++){
drag(divs[i]);
}
removeDrag(divs[0]);
function drag(elem) {
elem.addEventListener('mousedown',mouseHandler)
}
function removeDrag(elem) {
//取消拖拽功能
elem.removeEventListener('mousedown',mouseHandler)
}
function mouseHandler(e) {
switch (e.type) {
case "mousedown":
e.preventDefault();
document.addEventListener('mousemove',mouseHandler);
this.addEventListener('mouseup',mouseHandler);
this.x = e.offsetX;
this.y = e.offsetY;
document.elem = this;
break;
case "mousemove":
this.elem.style.left = e.clientX - this.elem.x +"px";
this.elem.style.top = e.clientY - this.elem.y +"px";
break;
case "mouseup":
document.removeEventListener("mousemove",mouseHandler);
this.removeEventListener("mouseup",mouseHandler);
break;
}
}
</script>
</body>
</html>
小案例-拖拽碰撞
源代码：
知识点：分开写 拖拽函数，随机位置函数，碰撞函数 ，将这些常用的功能函数放在 Utils.js 中调用
var Utils=(function () { return { setStyle:function (elem,style) { for(var prop in style){ elem.style[prop]=style[prop]; } }, randomColor:function (alpha) { if(alpha>1 || isNaN(alpha) || alpha<0){ alpha=1; } var color="rgba("; for(var i=0;i<3;i++){ color+=parseInt(Math.random()*256); color+=","; } color+=alpha+")"; return color; }, loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.callback=callback; img.imgList=[]; img.num=0; img.addEventListener("load",this.loadHandler); img.src=arr[img.num]; }, loadHandler:function (e) { this.imgList.push(this.cloneNode(false)); this.num++; if(this.num>this.arr.length-1){ this.callback(this.imgList); this.removeEventListener("load",Utils.loadHandler); return; } this.src=this.arr[this.num]; }, dragElem:function (elem) { elem.addEventListener("mousedown",this.mouseHandler); elem.style.position="absolute"; elem.self=this; }, removeDrag:function (elem) { elem.removeEventListener("mousedown",this.mouseHandler); elem.self=null; }, mouseHandler:function (e) { switch (e.type){ case "mousedown": e.preventDefault(); document.addEventListener("mousemove",this.self.mouseHandler); document.addEventListener("mouseup",this.self.mouseHandler); this.x1=e.offsetX; this.y1=e.offsetY; document.elem=this; break; case "mousemove": this.elem.style.left=e.clientX-this.elem.x1+"px"; this.elem.style.top=e.clientY-this.elem.y1+"px"; var evt=new Event("elemMove"); //定义一个事件 this.elem.dispatchEvent(evt); //抛发事件 break; case "mouseup": //this 是mouseup的侦听对象,document //elem 就是document.elem--->(line 56)this--->mousedown对应的侦听对象是div //self div.self--->(line 42)this---> 当前的对象Utils //mouseHandler 是Utils下面的函数 document.removeEventListener("mousemove",this.elem.self.mouseHandler); document.removeEventListener("mouseup",this.elem.self.mouseHandler); break; } }, getRandomPosition:function (elem) { var w=document.documentElement.clientWidth-elem.offsetWidth; var h=document.documentElement.clientHeight-elem.offsetHeight; elem.style.position="absolute"; elem.style.left=Math.random()*w+"px"; elem.style.top=Math.random()*h+"px"; }, hitTest:function (elem0,elem1) { var range0 = elem0.boundingClientRect(); var range1 = elem1.boundingClientRect(); //下面的if 条件 是4中碰撞可能 if(range0.left<=range1.left && range1.left<= range0.right || range0.left >= range1.left &&range0.left<=range1.right){ return true; } else if(range0.bottom>=range1.top && range0.bottom <=range1.bottom || range1.bottom >= range0.top &&range1.bottom<=range0.bottom){ return true; } return false; } } })();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-拖拽碰撞</title>
<script src="js/Utils.js"></script>
<style>
#div0{
50px;
height: 50px;
background: cadetblue;
position: absolute;
font-size: 16px;
text-align: center;
line-height: 50px;
}
#div1{
50px;
height: 50px;
background: orange;
position: absolute;
font-size: 16px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="div0">0</div>
<div id="div1">1</div>
<script>
var div0 = document.getElementById("div0");
var div1 = document.getElementById("div1");
Utils.getRandomPosition(div1);
Utils.dragElem(div0);
Utils.dragElem(div1);
div0.addEventListener('elemMove',mouseHandler);
div1.addEventListener('elemMove',mouseHandler);
function mouseHandler(e) {
// console.log(this);
if(Utils.hitTest(div0,div1)){
if(this.id === "div0"){
Utils.getRandomPosition(div1);
}else if(this.id === "div1"){
Utils.getRandomPosition(div0);
}
}
}
</script>
</body>
</html>
Event对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form对象的一些事件</title>
<style>
html{
font-size: 100px;
}
body{
font-size: 14px;
}
img{
8rem; /*注意：rem是以html中 font-size: 100px; 为参照 8rem=8*100px*/
height: 8rem;
}
</style>
</head>
<body>
<form action="#" method="get" id="form1">
<input type="text" id="texts">
<input type="checkbox" id="check">
<select name="" id="selects" multiple> <!--设置为多选*/-->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="chongqing">重庆</option>
</select>
<input type="submit">
<input type="reset">
</form>
<script>
/*
* submit 和 reset事件都是针对表单form的侦听
* 通常用于提交表单和重置表单时,需要取消系统默认的提交事件
* */
/*var form1 = document.getElementById("form1");
form1.addEventListener("submit", formHandler);
form1.addEventListener("reset", formHandler);
function formHandler(e) {
e.preventDefault();
console.log("aaa")
}*/
// 页面随着窗口大小的变化自适应缩放内部元素的大小
// resize事件是可以获取window窗口变化缩放的事件侦听,当窗口大小发生改变时,收到该事件
/*window.addEventListener("resize", resizeHandler);
function resizeHandler(e) {
var scale = document.documentElement.clientWidth / 1343;
document.documentElement.style.fontSize = 100 * scale + "px";
}*/
/*
* select
* 当文本框中的值被选中时,激活该事件
*
*texts.selectionStart texts.selectionEnd //被选中的元素开始 结束的索引
* */
/*var sel = document.getElementById("texts");
sel.addEventListener('select',selectHandler);
function selectHandler(e) {
// console.log(e);
// console.log(sel.selectionStart,sel.selectionEnd);
sel.value = sel.value.slice(0,sel.selectionStart)+sel.value.slice(sel.selectionStart,sel.selectionEnd).toUpperCase()+sel.value.slice(sel.selectionEnd);
}*/
/* *
表单中如果表单元素的value值或者选中属性被修改, 并且与原来的值不同
* 当失去焦距时触发change事件
* */
/*var inputs=document.querySelector("#check");
inputs.addEventListener("change",changeHandler);
function changeHandler(e) {
console.log(e);
}*/
/*
* selects.selectedIndex 当前选择下拉菜单的索引值
*selects.selectedOptions 是一个列表,当选择下拉菜单时,如果没有指定多选
* 这个列表中只有一个元素,如果指定多选时,可以有多个元素
*
* */
var selects= document.getElementById("selects");
selects.addEventListener("change",changeHandler);
function changeHandler(e) {
console.log(e);
console.log(e.target.selectedIndex); //索引
console.log(e.target.selectedOptions[0].textContent); //内容
console.log(e.target.selectedOptions[0].innerHTML); //内容
console.log(this); //this == selects == e.target
console.log(e.target);
console.log(selects);
}
/*// scroll
// 滚动条滚动事件(不是滚轮滚动)
window.addEventListener("scroll", scrollHandler);
function scrollHandler(e) {
console.log("aa");
}*/
/*
* 图片,脚本,css样式表文件的加载时,如果指定地址错误加载失败,
* 都可以通过侦听error来判断是否错误
* ajax也可以用来判断通信失败
*
* */
/*var img=new Image();
img.addEventListener("error",errorHandler);
img.src="img/1.jpg";
function errorHandler(e) {
console.log("加载错误");
}*/
/*
* load 加载
* 用于浏览器全部加载完成判断,图片加载成功判断,视频,声音等加载
* 后面学习ＡＪＡＸ也可以使用ｌｏａｄ判断加载完成
* */
// 因为script标签比img更早执行完毕
var img=document.getElementById("imgs");
console.log(img); //null
window.onload = function () {
// 当整个页面全部加载完毕 即图片加载完成,
// 这个时候在执行这个load完成后的事件就可以获取页面中任意位置的img
var img=document.getElementById("imgs");
console.log(img); //<img src="img/max.jpg" id="imgs">
}
</script>
<img src="img/max.jpg" id="imgs">
</body>
</html>
change： 单选框改变触发 <input type="checkbox" id="check">，或者select 下拉框选择改变也会触发事件。
<form action="#" method="get" id="form1">
<input type="text" id="texts">
<input type="checkbox" id="check">
<select name="" id="selects" multiple> <!--设置为多选*/-->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="chongqing">重庆</option>
</select>
<input type="submit">
<input type="reset">
</form>
//------------------------------------------------------js
/* *
表单中如果表单元素的value值或者选中属性被修改, 并且与原来的值不同
* 当失去焦距时触发change事件
* */
/*var inputs=document.querySelector("#check");
inputs.addEventListener("change",changeHandler);
function changeHandler(e) {
console.log(e);
}*/
/*
* selects.selectedIndex 当前选择下拉菜单的索引值
*selects.selectedOptions 是一个列表,当选择下拉菜单时,如果没有指定多选
* 这个列表中只有一个元素,如果指定多选时,可以有多个元素
*
* */
var selects= document.getElementById("selects");
selects.addEventListener("change",changeHandler);
function changeHandler(e) {
console.log(e);
console.log(e.target.selectedIndex); //索引
console.log(e.target.selectedOptions[0].textContent); //内容
console.log(e.target.selectedOptions[0].innerHTML); //内容
console.log(this); //this == selects == e.target
console.log(e.target);
console.log(selects);
}
error： 图片,脚本,css样式表文件的加载时,如果指定地址错误加载失败,都可以通过侦听error来判断是否错误
/* * 图片,脚本,css样式表文件的加载时,如果指定地址错误加载失败, * 都可以通过侦听error来判断是否错误 * ajax也可以用来判断通信失败 * * */ /*var img=new Image(); img.addEventListener("error",errorHandler); img.src="img/1.jpg"; function errorHandler(e) { console.log("加载错误"); }*/
load： 加载用于浏览器全部加载完成判断,图片加载成功判断,视频,声音等加载,后面学习AJAX也可以使用Load判断加载完成
<script> /* * load 加载 * 用于浏览器全部加载完成判断,图片加载成功判断,视频,声音等加载 * 后面学习ＡＪＡＸ也可以使用ｌｏａｄ判断加载完成 * */ // 因为script标签比img更早执行完毕 var img=document.getElementById("imgs"); console.log(img); //null window.onload = function () { // 当整个页面全部加载完毕 即图片加载完成, // 这个时候在执行这个load完成后的事件就可以获取页面中任意位置的img var img=document.getElementById("imgs"); console.log(img); //<img src="img/max.jpg" id="imgs"> } </script> <img src="img/max.jpg" id="imgs">
submit 和 reset事件：都是针对表单form的侦听,通常用于提交表单和重置表单时,需要取消系统默认的提交事件 e.preventDefault();
/* * submit 和 reset事件都是针对表单form的侦听 * 通常用于提交表单和重置表单时,需要取消系统默认的提交事件 * */ /*var form1 = document.getElementById("form1"); form1.addEventListener("submit", formHandler); form1.addEventListener("reset", formHandler); function formHandler(e) { e.preventDefault(); console.log("aaa") }*/
resize： window窗口缩放时触发事件
<head>
<meta charset="UTF-8">
<title>form对象的一些事件</title>
<style>
html{
font-size: 100px;
}
body{
font-size: 14px;
}
img{
8rem; /*注意：rem是以html中 font-size: 100px; 为参照 8rem=8*100px*/
height: 8rem;
}
</style>
</head>
<body>
<form action="#" method="get" id="form1">
<input type="text" id="texts">
<input type="checkbox" id="check">
<select name="" id="selects" multiple> <!--设置为多选*/-->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="chongqing">重庆</option>
</select>
<input type="submit">
<input type="reset">
</form>
<script>
// 页面随着窗口大小的变化自适应缩放内部元素的大小
// resize事件是可以获取window窗口变化缩放的事件侦听,当窗口大小发生改变时,收到该事件
/*window.addEventListener("resize", resizeHandler);
function resizeHandler(e) {
var scale = document.documentElement.clientWidth / 1343;
document.documentElement.style.fontSize = 100 * scale + "px";
}*/
</script>
<img src="img/max.jpg" id="imgs">
</body>
</html>
select：当文本框中的值被选中时,激活该事件
/* * select * 当文本框中的值被选中时,激活该事件 * *texts.selectionStart texts.selectionEnd //被选中的元素开始 结束的索引 * */ /*var sel = document.getElementById("texts"); sel.addEventListener('select',selectHandler); function selectHandler(e) { // console.log(e); // console.log(sel.selectionStart,sel.selectionEnd); sel.value = sel.value.slice(0,sel.selectionStart)+sel.value.slice(sel.selectionStart,sel.selectionEnd).toUpperCase()+sel.value.slice(sel.selectionEnd); }*/
scroll：滚动条滚动事件(不是滚轮滚动)
/*// scroll // 滚动条滚动事件(不是滚轮滚动) window.addEventListener("scroll", scrollHandler); function scrollHandler(e) { console.log("aa"); }*/
获得焦距focus 失去焦距blur
input 聚焦 focus 失去焦点 blur
input事件, 输入事件,当改变文本框内容时,激活该事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
color: #CCCCCC;
}
</style>
</head>
<body>
<span>什么样的elem能够focus获取焦距？能通过键盘上Tab键选中的元素</span>
<hr>
<hr>
<form action="#">
<input type="text" id="name" value="用户名">
<input type="text" id="pwd" value="密码">
<button>按钮</button>
</form>
<a href="#">超链接</a>
<script>
/*var $name = document.getElementById("name");
$name.addEventListener('focus',focusHandler);
$name.addEventListener('blur',focusHandler);
// 面试题：不使用placeholder 创建input类似于placeholder的效果
/!*
focus 聚焦
blur 失焦
*!/
function focusHandler(e) {
if(e.type === "focus"){
if(this.value === "用户名")
this.value = "";
this.style.color = "#000000"
}else if(e.type === "blur"){
if(this.value.trim().length === 0){
this.style.color = "#cccccc";
this.value = "用户名"
}
}
}*/
// input事件, 输入事件,当改变文本框内容时,激活该事件
var username = document.getElementById("name");
username.addEventListener("input", inputHandler);
/*
* e.data 当前输入的内容
* inputType 输入的类型,插入文本,删除文本
* isComposing 是否开启输入法
*
* */
function inputHandler(e) {
console.log(e);
}
</script>
</body>
</html>
键盘事件：
<script> document.addEventListener("keydown",keydownHandler); document.addEventListener("keyup",keydownHandler); /* * e.code 当前按下的键 Key+键名 * e.key 当前按下的键 键名 * e.keyCode 键码值 用这个... * * 左上右下 37,38,39,40 * */ function keydownHandler(e) { console.log(e); } </script>
滚轮（鼠标滚轮+笔记本触控板滚动）事件：
<script>
/*
* 火狐 DOMMouseScroll
* 谷歌和IE mousewheel
* 滚轮事件
*
* mousewheel
* deltaX:-0
* deltaY:-100 纵向向上 -100,向下是100
* deltaZ:0
* detail:0
* wheelDelta:120
* wheelDeltaX:0
* wheelDeltaY:120 纵向向上 120 向下 -120
*
* DOMMouseScroll
* detail: -3 滚轮向上-3 滚轮向下3;
*
*
* */
document.addEventListener("DOMMouseScroll", mouseHandler);
document.addEventListener("mousewheel", mouseHandler);
function mouseHandler(e) {
console.log(e);
}
</script>
小案例：下拉菜单
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#dropMenu
{
position: relative;
}
button
{
120px;
height: 30px;
background-color: transparent;
border: 1px solid #000000;
box-shadow: 1px 1px 1px #999999;
position: relative;
}
button span:first-child
{
margin-right: 20px;
font-size: 16px;
}
#sanjiao
{
display: inline-block;
0;
height: 0;
border-top:10px solid #000000;
border-left:8px solid transparent;
border-right:8px solid transparent;
position: absolute;
right:10px;
top:10px;
}
ul{
118px;
list-style: none;
border: 1px solid #000000;
position: absolute;
top:30px;
box-shadow: 1px 1px 1px #999999;
display: none;
}
li
{
background-color: #FFFFFF;
line-height: 30px;
cursor: default;
text-align: center;
padding-right: 10px;
border-bottom: 1px solid #000000;
}
li:last-of-type
{
border-bottom: none;
}
li:hover
{
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="dropMenu">
<button><span></span><span id="sanjiao"></span></button>
<ul id="menu">
</ul>
</div>
<script>
var city=["北京","上海","广州","武汉","西安","南京","石家庄","青岛"];
var button,menu,dropMenu;
init();
function init() {
button=document.getElementsByTagName("button")[0];
menu=document.getElementById("menu");
dropMenu=document.getElementById("dropMenu");
for(var i=0;i<city.length;i++){
var li=document.createElement("li");
li.textContent=city[i];
menu.appendChild(li);
}
button.firstElementChild.textContent=city[0];
dropMenu.addEventListener("mouseleave",mouseLeaveHandler);
button.addEventListener("click",clickHandler);
menu.addEventListener("click",menuClickHandler);
}
function mouseLeaveHandler(e) {
menu.style.display="none";
}
function clickHandler(e) {
menu.style.display="block";
}
function menuClickHandler(e) {
if(e.target.constructor===HTMLUListElement) return;
button.firstElementChild.textContent=e.target.textContent;
menu.style.display="none";
}
</script>
</body>
</html>