1，事件流:
（1）事件流是指页面 接收事件的顺序;
（2）假设页面中的元素都具备相同的事件,并且这些个元素之间是相互嵌套的
关系.
（3） 那么在触发一个元素的事件时候,会触发其他的元素;
（4）总结：事件流是描述的从页面接受事件的顺序，当几个都具
有事件的元素层叠在一起的时候，那么你点击其中一个元素，
并不是只有当前被点击的元素会触发事件，而层叠在你点击
范围的所有元素都会触发事件。
2，事件流包括两种模式:
(1)事件冒泡:是指子元素先触发事件,父元素后触发事件; 从内向外
(2)事件捕获:是指父元素先触发,子元素后触发; 从外到内
3，事件兼容以及事件对象
《1》事件绑定：addEventListenter(绑定事件以及事件处理程序)用于注册事件处理程序，
注：IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？
一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。
（1）语法结构：
element.addEventListenter(event，function(){}，UseCpture)
注：获取页面元素.注册事件处理程序(事件类型，处理函数，布尔类型)布尔类型：ture捕获，false冒泡
详细分析：<1>第一个参数是事件的类型 (如 "click" 或 "mousedown").
<2>第二个参数是事件触发后调用的函数。
<3>第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注：《1》不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
《2》你可以使用函数名，来引用外部函数:(引用外部函数方便使用移除事件，先添加点击事件，在用有名函数调用)
（2）特点：通过addEventListener（添加点击事件监听器）形式的绑定事件不会互相抵消，从而实现一个按钮控制多个事件。
（3）普通绑定
/btn1.οnclick=function(){console.log(‘第一个’)}
btn1.οnclick=function(){console.log(‘第二个’)}/
缺点：会相互抵消, 从而导致第一个点击事件设置失败
（4）事件流绑定*
btn1.addEventListener(‘click’,function(){console.log(‘第一个’)})
btn1.addEventListener(‘click’,function(){console.log(‘第二个’)})
优点： 给一个元素绑定多个事件 事件之间并不会相互抵消（如果设置相同属性会抵消）
4，事件移除：removeEventListenter
（1）如果添加事件处理程序函数将来要想移除就不能使用匿名函数的方式，调用函数名不带括号
（2）案例：
按钮1
按钮
5，阻止冒泡stopPropagation
（1）语法结构： event.stopPropagation();
（2）用法解释：给你项阻止冒泡上一级添加，上一级执行完后才停止。
（3）案例：
6，阻止默认preventDefault
（1）使用条件：元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。
（2）使用对象：
<1>如链接
<2>表单的提交地址
（3）不能用默认行为
当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。div元素没有默认事件
（4）案例：
英莱特科技
var samp = document.getElementByTagName(“a”);
samp.addEventListener(“click”,function(e){e.preventDefault()},false);
点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到英莱特科技了。
我们都知道，链接的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转：
跳转至英莱特官网
var a = document.getElementById(“testA”);
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
注：阻止链接跳转的默认行为。
7，ECMAScript6
（1）介绍：它是一种由Ecma国际（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范，javascript在它基础上经行了自己的封装。但通常来说，术语ECMAScript和javascript指的是同一个。业界所说的ECMAScript其实是指一种规范，或者说是一个标准。具体点来说，它其实就是一份文档
（2）JS包含三个部分：ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型），ECMAScript是js语言的基础。
（3）各种属性方法的使用
-
ES6是一种 编程的规范/标准==>遵循ECMAScript中的语法规则
-
变量的声明 let ====let的特点和var 的对比??
-
解构赋值
-
常量的声明以及特点
-
剩余参数rest
-
箭头函数=> 特点
-
class
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> // var num=200; // var num=100; //在ES6中语法更加严谨==》let声明的变量 不允许重复用 //let num=200;console.log(num) // function test(){ // let num=100; // console.log(num) // } //test()//有相同变量是因为一个是全局变量，一个是局部变量，互不影响 // {//表示一个对象//直接console输出 // let a=0; // console.log(a) // } //const表示常量；在程序中被定义 不允许修改变量 // const num=200; // num=100; // console.log(num)//被修改会报错 //数组的结构赋值 // var [a,b,c]=[1,2,3] //console.log(a+'==='+b+'==='+c) //嵌套 //var [a,[[b],c]]=[1,[[2],3]] // console.log(a+'==='+b+'==='+c) // let [a,b,c]=[,8,] // console.log(a+'==='+b+'==='+c) //...扩展运算符 // let [a,...c]=[1,2,3,4,5] // console.log(a+'======'+c) //字符串结构 // let [a,b,c,d,e]='hello' // console.log(a+'==='+b+'==='+c+'==='+d+'==='+e) //默认值 // let [a='2']='hello'; // console.log(a)//h // let [a=1,b=2,c=3]=[100,200,300]//会覆盖 // console.log(a+'==='+b+'==='+c) //对象结构 // let {fun1,fun2}={fun1:'hello',fun2:'JS'} // console.log(fun1,fun2) //设置默认值 // let {fun1,fun2='JS'}={fun1:'hello'} // console.log(fun1,fun2) //设置别名 // let {fun1:abc,fun2}={fun1:'hello',fun2:'hi'} // console.log(abc,fun2) // function test(a,b,c,...param){ // console.log(param) // } // test(1,2,3,4,5,6,7,8,9)//4,5,6,7,8,9s // let {a,b,...rest}={a:1,b:2,c:3,d:4} // console.log(rest)//3,4 //传统方法 // function fun(num1,num2){ // console.log(num1,num2) // } // console.log(100,200) //ES6中的函数 使用箭头函数 =>代替了箭头函数 // fun1=()=>{ // console.log('箭头函数') // } // fun1() // let funn=()=>{ // console.log('箭头函数的let变量不能重复使用') // } // funn(); // funn=(num1,num2)=>{ // console.log('带参数的箭头函数',num1+num2) // } // funn(30,20) // funn=(num1=10,num2=50)=>{ // console.log('箭头函数的参数'+num1+num2)//箭头函数的参数1050 // console.log('箭头函数的参数',num1+num2)//箭头函数的参数60 // } // funn() // funn=(num1,num2)=>{ // return num1+num2 // //console.log('箭头函数',num1+num2) // } // //funn(20,30)//箭头函数50 // console.log(funn(20,30)) // funn=(...values)=>{ // console.log(values.length) // } // funn(1,2,3,4,5,6) // funn=(a,b,...val)=>{ // console.log(val.length+'==='+val) // } // funn(1,2,3,4,5,6); var funn=num=>num; console.log(funn(120)); //上面等价于带有返回值的函数 var funn=function(a){ return a; } console.log(funn(1)) </script> </body> </html>
扫一扫
3771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
