纯干货!Web前端教程之JavaScript篇!详细知识点路线图+视频教程

纯干货!Web前端教程之JavaScript篇!详细知识点路线图+视频教程

点击原文获取资源:https://zhuanlan.zhihu.com/p/70515753


JavaScript 是属于 HTML 和 Web 的编程语言。

编程令计算机完成您需要它们做的工作。

JavaScript 很容易学习。

本教程涵盖 JavaScript 基础和高级教程。

1. JavaScript介绍

前端三大块

HTML: 页面结构

CSS: 页面表现,元素大小,颜色,位置,隐藏或者显示,部分动画效果

JavaScript: 页面行为,部分动画效果,页面和用户的交互(一般不用JS,而是用JQuery)

其他插件:

Ajax: 读取数据,无需刷新

1.1. JS嵌入页面的方式

2. JS基本语法

2.1. 变量类型

JS是一种弱类型语言,它的变量类型由它的值来决定

5种基本数据类型:number, strign ,boolean, undefined, null

1中复合类型:object

定义变量如下:

vara =123;vard;//这个是undefined

2.2. 获取元素方法

方法1:(不推荐)

/* title是属性 *//* 问题是:这个语句是按照上下顺序执行的 */document.getElementById(‘div1’).title=”我看到了!”;这是一个div元素

方法2:

/* 当整个文档加载完之后,再执行这个语句 */window.onload =function(){document.getElementById(‘div1’).title=”我看到了!”;}

2.3. 操作元素属性

可以参考任何标签的属性,包括linkdeng

操作方法主要分为两种:

.的操作

[]操作

属性的写法

htm属性和js属性要一直

class属性写成className

style属性里面的属性,有横杠的改成驼峰式font-size改成oA.style.fontSize

操作方法1的写法

window.onload =function(){/* 写属性 */document.getElementById(‘div1’).href=”www.baidu.com”;/* 没有title属性会自动添加 */varoA =document.getElementById(‘div1’);    oA.title=”666″;/* 读属性 */alert(oA.id);  }…..这是一个div元素

操作方法2的写法

window.onload =function(){varoA =document.getElementById(‘div1′);varattr =’color’;/* 三种方法完全一致 */oA.style.color=’red’;  oA.style[attr]=’red’;  oA[‘style’][attr]=’red’;}…..这是一个div元素

2.4. innerHTML的使用

window.onload =function(){varoA =document.getElementById(‘div1’);/* 用处1:可以读取这个标签包裹的元素 *//* 输出:这是一个div元素 */alert(oA.innerHTML)/* 用处2:可以塞文字 */oA.innerHTML =”666″;}…..这是一个div元素

3. JS函数

3.1. 函数的定义

// 定义函数functionfunc_name(){    Operations;  }// 调用函数1:直接调用// 调用函数2:在控件中调用func_name();…

技巧:统一js代码再同一块中:实现JS和HTML分离

window.onload =function(){varoBtn01 =document.getElementById(‘btn01’);varoBtn02 =document.getElementById(‘btn02’);/* 注意不要写括号 */oBtn01.skin01;}functionskin01(){varoLink =document.getElementById(‘link1′)  oLink.href =’1.css’}…

3.2. 变量和函数预解析

JS解析过长分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将Function定义的函数提前,并且将var定义的变量声明提前(赋值不提前),将它复制为underfined

方便JS的读写

// 变量的预解析alert(a);//a的声明提前,因为没有赋值所以弹出undefined,a的值未定义alert(c);//会报错,c没有声明vara =10;// 函数的预解析my_akert();// 函数的预解析,这个弹出hellofunctionmy_akert(){    alert(‘hello’)!  }

3.3. 匿名函数

没有函数名的函数

window.onload =function(){varoDiv =document.getElementById(‘div1’);    oDiv.onclick =function(){    alert(‘hello’);    }  }

3.4.函数的参数

传入多个参数

window.onload =function(){varoDiv =document.getElementById(‘div1’);functionchangestyle(styl,val){      oDiv.style[styl] = val;    }    changestyle(‘color’, gold);    changestyle(‘backgound’, red);    changestyle(‘width’,300px);  }…..这是一个div元素

返回值

实现两个输入框,值进行相加的操作

window.onload =function(){varoInput01 =document.getElementById(‘input01’);varoInput02 =document.getElementById(‘input02’);varoBtn =document.getElementById(‘btn’);  oBtn.onclick =function(){varval01 = oInput01.value;varval02 = oInput02.value;varrs = add(val01,val02);    alert(rs)  }functionadd(a,b){varc =parseInt(a) +parseInt(b)returnc;  }}…..

return关键字

返回结果

结束运行,return后面的语句都不会执行

阻止默认行为

4. 条件循环

运算符

算术运算符:+,-,*,/, %

条件运算符:==, >=,

if-else

.box{width:300px;height:300px;backgound:gold;      }window.onload =function(){vara1 =document.getElementById(‘box’);varbtn =document.getElementById(‘btn’);vara =100;// 单条件语句btn.onclick =function(){if(a1.style.display ==”none”){            a1.style.display ==”block”;          }else{            a1.style.display ==”none”;          }        }// 多条件语句–建议用switch-case写if(a>50){          a =50;        }elseif(a>30){          a=30;        }else{          a=0;        }      }这是一个div元素

switch-case

vara ==6;switch(a){case1:    alert(‘1’);break;case2:    alert(‘2’);break;default:    alert(‘0000’);break;}

for,while

for(vari=0;i

5.JS中的数组

5.1. 创建数组的方式

/* 定义方法1: 面向对象法 */varaRr01 =newArray(1,2,3,4,’abc’);/* 定义方法2:建议使用  */varaRr02 = [1,2,3,4,’abc’];/* 获取数组长度 */varalen = aRr02.length;/* 也可以设置长度 */aRr02.length =10;/* 获取某个元素,从0开始的角标 */varaval = aRr02[2];/* 定义多维数组 */varaRr03 = [[1,2,3],[4,5,6],[‘a’,’b’,’c’]];varaval02 = aRr03[1][2];

5.2. 数组方法

varaRr01 = [1,2,3,4];// 数组连接字符串varsTr01 = aRr01.join(‘-‘);//输出1-2-3-4varsTr02 = aRr01.join(”);//输出1234aRr01.push(5);//从尾部增加了一个成员:1,2,3,4,5aRr01.pop();//从尾部删除了一个成员 1,2,3,4aRr01.unshift(0);//从头部增加了一个成员aRr01.shift();//从头部删除了一个成员aRr01.reverse();// 将元素倒装,4,3,2,1aRr01.indexOf(2);// 只返回元素2第一次出现的index值aRr01.splice(2,1,7,8,9);// 从第2个元素开始,删除1个元素,然后在此位置增加7,8,9

5.3. 遍历数组

for循环

foreach方法

window.onload =function(){for(vari=0;i

5.4. 获取元素的第二种方法

通过document.getElementByTagName获取的是一个选择集,不是数组,但是可以通过下标方式操作选择集中的dom元素

window.onload = function (){  /* 选择特定的li元素 */  var oList = document.getElementById(‘list01’);  /* aLi是一个选择集,而不是数组,获取文档中所有的li元素 */  var aLi = oList.getElementByTagName(‘li’);  for(var i=0;i

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 5.4. 数组去重

    varaList = [1,2,3,3,4,5,2,3,1,5,4,3,2,2,1];varaList2=[];for(vari=0;i

    5.6. 实例: 计算器

    测试window.onload =function(){vara1 =document.getElementById(‘input01’);vara2 =document.getElementById(‘input02’);varop =document.getElementById(‘fuhao’);varbtn =document.getElementById(‘btn’);        btn.onclick =function(){varv1 = a1.value;varv2 = a2.value;varfuhao = op.value;// 判断输入框是否为空if(v1 ==”|| v2 ==”){            alert(‘不能为空’);return;          }// 判断输入为数字if(isNaN(v1) ||isNaN(v2)){            alert(‘请输入数字’);return;          }switch(fuhao){case’0′:              alert(parseFloat(v1) +parseFloat(v2));break;case’1′:              alert(parseFloat(v1) -parseFloat(v2));break;case’2′:              alert(parseFloat(v1) *parseFloat(v2));break;case’3′:              alert(parseFloat(v1) /parseFloat(v2));break;          }        }      }

    计算器

    +-*/

    6. JS的字符串

    JS的组成

    ECMAscript javascript的语法(变量,函数,循环语句的语法)

    DOM文档对象模型,操纵html和css

    BOM浏览器对象模型,操作浏览器的方法

    6.1. 字符串的处理方法

    字符串合并+

    parseInt()将数字字符串转化为整数

    parseFloat()将数字字符串转化为小数

    split(”)把一个字符串分割成字符串组成的数组

    charAt(index)获取字符串中的某个字符

    indexOf(value)查找字符串是否含有某字符

    substring(start,end)截取字符串用法

    str.split(”).reverse().join(”);字符串反转

    toUpperCase()字符串转大写

    toLowerCase()字符串转小写

    7. 定时器

    属于BOM,浏览器的用处

    定时器的作用

    制作动画

    异步操作

    函数缓冲和节流

    用处1:异步操作

    /* 定时器:

    setTimeout      只执行一次定时器

    clearTimeout    关闭只执行一次的定时器

    setInterval    反复执行的定时器

    clearInterval  关闭反复执行的定时器 *//* 等1000毫秒才弹出来 */setTimeout(myalert,1000);functionmyalert(){  alert(‘Hello’);}

    同时我们可以自定义弹框

      .pop_con{    display: none;  }  .pop{    width:400px;    height:300px;    background-color:#fff;border:1px solid#000;position:fixed;    left:50%;    top:50%;    margin-left:-200px;    margin-top:-150px;/* z-index用于设置成层级 */z-index=9999;  }  .mask{    position:fixed;    width:100%;    height:100%;    background-color:#fff;left:0;    top:0;/* 设置透明 */opacity:0.3;    filter:alpha(opacity=30);    z-index=9990;  }     

    提示信息

        关闭    window.onload = function (){varoPop = document.getElementById(‘pop’);varoShut = document.getElementById(‘shutoff’);  setTimeout(showpop,40000);functionshowpop(){    oPop.style.display:block;  }  oShut.onclick = function(){    oPop.style.display =’none’;  }}

    关闭定时器

    // 执行一次的定时器vartimer = setTimeout(function(){  alert(‘hello’);},4000);// 刚执行就关闭clearTimeout(timer);vartimer2 = setInterval(function(){  alert(‘hello’);},2000);clearInterval(timer2);

    7.1. 动画

    .box{width:100px;height:100px;background-color: gold;position: fixed;left:20px;top:20px;  }window.onload =function(){varoBox =document.getElementById(‘box’);varleft =20;vartimer = setInterval(function(){      left++;      oBox.style.left = left +’px’;if(left>700){        clearInterval(timer);      }    },30);  }

    7.2. 制作时钟

    window.onload =function(){varoDiv1 =document.getElementById(‘div1′);functiontimego()){varnow =newDate();varyear = now.getFullYear();varmonth = now.getMonth()+1;vardate = now.getDate();varweek = now.getDay();varhour = now.getHours();varminute = now.getMinutes();varsecond = now.getSeconds();        oDiv1.innerHTML =’当前时间是’+ year +’年’+ month +’月’+ date +’日’+        toweek(week) + hour +’:’+ minute +’:’+ second;      }      timego();      setInterval(timego,1000);      }functiontoweek(num){switch(num){case0:return’星期天’;break;case1:return’星期一’;break;case2:return’星期二’;break;case3:return’星期三’;break;case4:return’星期四’;break;case5:return’星期五’;break;case6:return’星期六’;break;        }      }

    结果是

    当前时间是2019年3月12日星期二11:53:34

    7.3. 制作倒计时

    测试window.onload =function(){varoDiv =document.getElementById(‘div1’);functiontimeleft(){varnow =newDate();varfuture =newDate(2019,10,30,24,0,0);// 实体从服务器获取varleft =parseInt((future-now)/1000);//转为秒varday =parseInt(left /86400);varhour =parseInt((left%86400)/3600);varmintue =parseInt(((left%86400)%3600)/60);varsecond = left%60;if(left

    8. 变量作用域

    全局变量-函数外部顶一顶额变量,函数内部外部都可以访问,它的值可以共享,可以随意改它的值

    局部变量-函数内部定义的变量,函数内部可以访问,外部无法访问,内部访问变量时,先在内部查找是否有这个变量,有的话就用内部的,没有的话就去外部找

    9. 封闭函数

    函数变量化

    这种方式只能在函数定义后面调用

    varmyalert = funtion(){  alert(‘hello’);}myalert();/*

    封闭函数的定义 (function(){…})();

    1. 省去函数名

    2. 局部变量不会影响其他变量(相同名字) */varstr =”abc”;(function(){varstr =’欢迎访问我的主页’;varmyfunc =function(){    …;  }  myfunc;  alert(str);})();

    10. 闭包

    函数嵌套,函数里面再定义函数,内部函数可以引用外部函数的参数和变量,变量存在闭包里面不会被回收

    functionaa(b){vara=12;functionbb(){      alert(a);      alert(b);    }returnbb;  }varcc = aa(24);// cc=bbcc();

    同时闭包也可以改成封闭函数

    varcc = (function(b){vara=12;functionbb(){              alert(a);              alert(b);              }returnbb;            })(24);

    10.1. 闭包的作用

    可以在循环中存索引值

    测试window.onload =function(){varaLi =document.getElementsByTagName(‘li’);for(vari=0;i

    • 1
    • 2
    • 3
    • 4

    私有变量计数器,外部无法访问,避免全局变量的污染

    11. 内置对象

    对象方法说明documentdocument.referrer获取上一个跳转页面的地址locaitonwindow.location.href

    window.location.search

    window.location.hash获取或者重定url地址

    获取地址参数部分

    获取页面锚点或者哈希值MathMath.random

    Math.floor

    Math.ceil获取0-1的随机数

    向下取整

    向上取整

    vardata =window.location.search;// 在网址输入“…./?a=123” 的时候输出 “?a=123”alert(data);varhash =window.location.hash;// 在网址输入“….#=123” 的时候输出 “#=123”alert(hash);

    12. 面向对象

    12.1. JS面向对象

    将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫做方法, js对象类似字典

    但是JS没有类,类是通过函数实现的

    内建对象

    宿主对象

    自定义对象

    12.2. 自定义对象:创建对象的方法

    单体:

    varTom = {name:’tom’,age:18,showname:function(){      alert(‘my name is ‘+this.name);    },showage:function(){      alert(‘my age is ‘+this.age);    }  }  alert(Tom.name);  Tom.showname();

    工厂模式(少用)

    通过一个函数创建对象

    functionPerson(name, age){varo =newObject();// 创建空对象o.name = name;    o.age = age;    o.showname =function(){      alert(‘my name is ‘+this.name);    };    o.showage =function(){      alert(‘my age is ‘+this.age);    }returno;  }vartom = Person(‘tom’,18);  tom.showname();

    使用工厂方式创建的对象,使用的都是object,导致无法区分多种不同类型的对象

    构造函数: 类型python类

    构造函数就是用一般函数创建的,区别是加了new

    构造函数的执行流程:

    一旦调用构造函数,马上创建一个新的对象

    将新建的对象设置为函数中的this

    逐行执行函数的代码

    将新建的对象作为返回值返回

    使用同一个构造函数的对象,称为同一类对象,也称为该类的实例

    functionPerson(name, age){this.name = name;// this为新建的对象,tom, jack,向新建对象添加属性this.age = age;this.showname =function(){// 为对象添加方法alert(‘my name is ‘+this.name);    };this.showage =function(){      alert(‘my age is ‘+this.age);    }  }vartom =newPerson(‘tom’,18);varjack =newPerson(‘jack’,20);  tom.showname();console.log(tominstanceofPerson);// trueconsole.log(tominstanceofObject);//alert(tom.showname == jack.showname);// false, 浪费资源

    问题: 每一个对象的方法都有一个新的方法,浪费资源

    原型模式:比构造函数更高效

    我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype, 这个属性对应原型对象

    当函数以普通函数调用时,prototype没用

    当函数以构造函数调用时,它所创建的对象都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__访问

    当调用属性和方法时,首先在本身寻找,有就用,没有就去prototype原型寻找,没有就去原型对象的原型去找,直到找到Object原型

    functionPerson(name, age){this.name = name;this.age = age;  }// prototype上绑定的方法可以被所有person对象公用// prototype为原型对象,所有同一个类的实例都可以访问到这个原型对象,// 可以将共有的内容设置到这个原型对象中Person.prototype.showname =function(){    alert(‘my name is ‘+this.name);  }  Person.prototype.showage =function(){    alert(‘my age is ‘+this.age);  }// toString是在打印对象的时候自动的内容,我们可以重写这个方法让它打印更详细的信息// console.log(tom);  person[name=“tom”, age=20]Person.prototype.toString =function(){return”person[name = “+this.name +”, age=”+this.age +”]”;  }vartom =newPerson(‘tom’,18);varjack =newPerson(‘jack’,20);console.log(tom.__proto__ == Person.prototype);// trueconsole.log(tom.hasOwnProperty(“name”));// false,只有本身有属性才会true,这个方法在原型里alert(tom.showname == jack.showname);// true, 更加高效

    继承

    // 定义父类functionFclass(name, age){this.name = name;this.age = age;  }  Fclass.prototype.showname =function(){    alert(‘my name is ‘+this.name);  }  Fclass.prototype.showage =function(){    alert(‘my age is ‘+this.age);  }// 定义子类,继承父类functionSclass(name, age, job){// 继承属性:call或者apply// call:改变当前函数执行的this// apply和call的用法一样,只是语法不同: Fclass.apply(this, [name, age]);Fclass.call(this, name, age);this.job = job;  }// 继承方法: prototypeSclass.prototype =newFclass();  Sclass.showjob =function(){    alert(‘my job is ‘+this.job);  }vartom =newSclass(‘tom’,20,’engineer’);  tom.showage();

    12.3. 自定义对象:this的用法

    this就是object.window,指向的是一个对象,称为函数执行的上下文对象

    根据函数调用方式的不同,this会指向不同的对象

    以函数形式调用时,this为window

    以方法形式调用时,this为调用方法的对象,比如

    varname =”全局”;      functionfun(){// console.log(this.name);  // 这种方式永远是”全局”console.log(this.name);// 随着调用的对象不同而变化}varobj = {        name:”sun”,        sayName:fun};varobj2 = {        name:”kkk”,        sayName:fun};      console.log(obj.sayName ==fun); //true,同一个函数fun();// 以函数调用的时候,this指向对象(上下文),为Object.windowobj.sayName();// 以方法调用的时候,this为Object.object(“sun”)obj2.sayName();// 以方法调用的时候,this为Object.object(“kkk”)

    结果是

    true全局sunkkk

    12.4. 宿主对象:Array:见5

    13. 垃圾回收

    就像人生活的时间长了,程序运行过程中也会产生垃圾,垃圾过多后,会导致程序运行速度过慢,需要垃圾回收机制

    在JS中有自动垃圾回收机制,不需要也不能进行垃圾回收的操作

    手动回收的方法:设置为null

    vara =newObect();a =null;

    14.DOM

    14.1. DOM简介

    DOM: Document Object Model文档对象模型

    文档: 一个HTML网页文档

    对象: 网页的每个部分都转为对象,比如body, head, h1..都转为对象(就可以通过面向对象对他进行操作)

    模型: 用来表示对象之间的关系,方便获取对象

    14.2. 节点

    节点是构成网页的基本节点,比如body, head, h1..

    节点的类型不同,属性和方法也不同

    文档节点: 整个HTML文档

    元素节点: HTML的HTML标签

    属性节点: 元素的属性

    文本节点: HTML标签中的文本内容

    节点的属性

    节点节点名称节点类型节点值文档节点#document9null元素节点标签名1null属性节点属性名2属性值文本节点#text3文本内容

    浏览器已经为我们提供了文档节点对象,这个对象时window属性,可以在网页中直接使用,文档节点(document)代表的是整个网页

    测试// 获取button对象varbtn =document.getElementById(“btn”);// 修改button的属性btn.innerHTML =”你好啊”;我是按钮

    14.3. 事件

    事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间

    JS和HTML之间的交互式通过事件实现的

    对于WEB应用来说,有下面这些代表性的事件: 点击,移动,按键等

    window.onload =function(){varbtn =document.getElementById(“btn”);console.log(btn);      btn.onclick =function(){        alert(‘hello’);      }  }….

    14.4. 文档加载

    也就是说需要使用window.onload = function(){}

    14.5. DOM查询

    获取元素节点

    通过document对象调用

    方法说明getElmentById()通过唯一id获取元素节点对象,返回对象getElementsByTagName()通过标签名获取一组元素节点对象,返回数组getElementByName()通过name获取一组节点对象,返回数组

    属性的写法

    htm属性和js属性要一直

    class属性写成className

    style属性里面的属性,有横杠的改成驼峰式font-size改成oA.style.fontSize

    通过元素节点调用

    方法说明getElmentsByTagName()获取当前节点的指定标签名后代节点属性说明childNodes当前节点的所有子节点(会获取所有的各种节点,包括空白)firstChild当前节点的第一个子节点(包括其他节点,空白等)firstElementChild当前节点的第一个子元素(IE8以上)lastChild当前节点的最后一个子节点childern当前节点的所有子元素(推荐)parentNode当前节点的父节点previousSibling当前节点的前一个兄弟节点(包括其他节点,空白等)previousElementSibling前节点的前一个兄弟元素(IE8以上)nextSibling当前节点的后一个兄弟节点

    varbtn =document.getElmentById(“btn”);  btn.onclick =function(){// 获取id为city的元素varcity =document.getElmentById(“city”);// 查找city下 的所有li节点varlis = city.getElementsByTagName(“li”);for(vari=0;i

    其他查询方法

    // 获取`body`标签varbody =document.body;// 获取`html`标签varhtml =document.documentElement;// 获取页面所有元素, body,html, head, script,…varall =document.all;varall =document.getElementsByTagName(“*”);// 获取class内容>IE9varbox1 =document.getElementByClassName(“box1”);// 获取含有class=“box1”的div// querySelector: 根据CSS选择器来选择–只返回一个元素varbox1_div =document.querySelector(“.box1 div”);// 返回符合条件的所有boxvarbox1_div =document.querySelectorAll(“.box1”);

    14.6. DOM增删改

    方法说明appendChild()添加新的子节点到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的子节点前面插入新的子节点createAttribute()创建属性节点createElement()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()设置属性值为指定的值

    实例: 设计一个增加删除表格

    表格functiondelA(){// 点击后删除超链接所在行// 获取当前trvartr=this.parentNode.parentNode;// 获取要删除的员工名称varemp = tr.getElementsByTagName(“td”)[0].innerHTML;// 确认是否删除if(confirm(“真的删除”+ emp +”?”)){// 删除trtr.parentNode.removeChild(tr);            }returnfalse;// 让a不要跳转}window.onload =function(){// 实现删除功能varallA =document.getElementsByTagName(“a”);for(vari=0; i”+” name.value=”” +””+”

    “+=”” age.value=”” td>”+”


    添加新成员

    name:age:Submit

    14.7. DOM操作CSS

    修改样式:元素.style.样式名 = 样式值

    读取样式(适用于内联样式):元素.style.样式名

    读取样式(当前正在显示的样式):

    只能用于IE:元素.currentStyle.样式

    其他浏览器:css对象 = getComputedStyle(元素名,伪元素(null)), css对象封装了样式信息,css.width

    window.onload =function(){varbox1 =document.getElementById(“box1”);varbox2 =document.getElementById(“box1”);varbtn01 =document.getElementById(“btn”);/*

          * 功能: 修改元素CSS样式

          * 通过JS修改元素的CSS样式

          * 语法: 元素.style.样式名 = 样式值

          *    注意: 如果CSS中含有-, 应该换成驼峰状

          * 其实设置的是内联样式(优先级高),所以会立即显示

          */btn01.onclick =function(){        box1.style.width =”300px”;        box1.style.backgroundColor =”yellow”;      };// 获取样式表样式(当前显示样式)btn02.onclick =function(){varar = getComputedStyle(box1);        alert(ar.width);      }  };

    15. DOM事件

    15.1. 事件的基本使用

    当事件的事件句柄(Event Handlers)被触发时(e.g, onmousemove), 浏览器会自动将一个事件对象(event)作为实参传递给响应函数

    这个事件对象包含了很多信息(鼠标 / 键盘属性),比兔坐标,鼠标滚轮方向,按键,等等…

    window.onload =function(){// 当事件的相应函数被触发时(onmousemove), 浏览器会自动将一个事件对象(event)作为实参传递给响应函数// 这个事件对象包含了很多信息,比兔坐标,鼠标滚轮方向,按键,等等…// 为了处理不同浏览器兼容问题event = event ||window.event;    btn.onmousemove =function(event){varx =window.event.clientX;vary =window.event.clientY;    }  }

    15.2. 事件冒泡

    事件冒泡: 事件的向上传导,当后代元素上的事件被触发的时候,其祖先元素的相同事件也会被触发

    大部分有用,但是可以取消

    window.onload =function(){vars1 =document.getElementById(“s1”);varbox1 =document.getElementById(“box1”);    s1.onclick =function(event){      alert(“我是span”);// 取消事件冒泡event = event |window.event;      event.cancelBubble =true;    }    box1.onclick =function(){      alert(“我是box1”);    }document.onclick =function(){      alert(“我是document”);    }  };

    当点击s1的时候,会同时触发s1, box, docuemnt的onclick事件

    15.3. 事件委派

    将事件统一绑定给元素的共同祖先元素,这样后代元素上的事件触发的时候,会一直冒泡到祖先元素

    事件委派: 利用了冒泡,通过委派可以减少事件胖丁的次数,提高程序的高效性

    window.onload =function(){varlis =document.getElementsByTagName(“li”);varul =document.getElementById(“ul”);varbtn =document.getElementById(“btn”);// 问题1: 新加入的超链接没有绑定事件btn.onclick =function(){varli =document.createElement(“li”);      li.innerHTML =”链接新来的“;      ul.appendChild(li);    };// 问题2: 只能为已经有的每一个超链接绑定事件,新的超链接需要重新绑定,不推荐// 解决方法: 将其绑定给元素的共同的祖先元素/*

        * for(var i=0;i

        *  lis[i].onclick = function(){

        *    alert(“666”);

        *  }

        * };

        */// 因为这是一个冒泡,点击a,冒泡到ul—新添加的都有了ul.onclick =function(event){// 只有点击的是link的class时if(event.target ==”link”) {        alert(“我是ul的单击函数”);      }    }  };

    15.4. 事件绑定

    addEventListener

    参数1: 事件字符串

    参数2: 回调函数,当事件触发的时候该函数执行

    参数3: 是否铺货期间触发函数,一般为false

    按照顺序执行

      window.onload =function(){    btn01. addEventListener(“listener”,function()[      alert(1);    ],false);    btn01. addEventListener(“listener”,function()[      alert(2);    ],false);  };

    解决兼容性:

    window.onload =function(){functionbind(obj, eventStr, callback){if(obj.addEventListener) {// 大部分浏览器兼容的方式obj.addEventListener(eventStr, callback,false);      }else{// IE8及以下obj.attachEvent(“on”+ eventStr, callback);      }    }  };

    16. 应用: 轮播图

    视频教程+学习路线图

    学习路线图

    推荐阅读更多精彩内容

    • 介绍JavaScript的基本数据类型。 ECMAScript中有5中简单数据类型(也称为基本数据类型): Und…
      过往的雨阅读 504评论 0赞 1

    • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT…
      凛0_0阅读 1,283评论 0赞 8

    • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT…
      kismetajun阅读 23,689评论 1赞 45
    • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单…
      舟渔行舟阅读 6,698评论 2赞 17
    • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子…
      阿啊阿吖丁阅读 5,035评论 0赞 2

    评论0
    抽奖

    reward

    1赞
    赞赏
    更多好文

    文章来源于互联网:纯干货!Web前端教程之JavaScript篇!详细知识点路线图+视频教程

    0

    评论0

    鱼翔浅底,鹰击长空,驼走大漠
    没有账号? 注册  忘记密码?