尚硅谷最新版JavaScript基础全套教程完整版（p110-p123）

尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

一、其他样式相关的属性
-以下这些属性都是不带px，直接返回数字，可以直接进行计算的
-以下这些属性都是只读的，不能修改
1.element.clientHeight
-返回元素的可见高度
2.element.clientWidth
-返回元素的可见宽度

这两个属性返回的是整个内部区域的宽度和高度，不包括边块大小。

3.element.offsetHeight和element.offsetWidth
-可以获取整个元素的宽度和高度，包括内容区、内边距和边框的大小。

4.element.offsetParent
-可以用来获取当前元素的定位父元素
-会获取到离我们当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body。

5.element.offsetLeft
-当前元素相当于其定位元素的水平偏移量
6.element.offsetTop
-当前元素相当于其定位元素的垂直偏移量
7.element.scrollHeight和element.scrollWidth
-可以获取元素整个滚动区域的高度和宽度
8.element.scrollLeft和element.scrollTop
-可以获取水平滚动条滚动的距离和水平滚动条垂直滚动的距离

9.几个公式
-当满足 scrollHeight - scrollTop == clientHeight时，说明垂直滚动条到底了。
-当满足 scrollWidth -scrollLeft 等于 clientWidth时，说明水平滚动条滚动到底了
这个公式一般用于让用户勾选用户须知的时候，可以先在input标签中设置disabled="disabled"用来将表单项变成不可用的状态，然后使用onscroll（该事件会在元素的滚动条滚动时触发）为内容绑定一个滚动条滚动的事件，再利用公式判断公式是否成立，若公式成立则将disabled属性设置为false(disabled属性可以设置一个元素是否禁用，如果设置为true，则元素禁用，如果设置为false，则元素可用）

二、事件对象
1.onmousemove
-该事件将会在鼠标在元素中移动时被触发
2.事件对象
-当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
-在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标 键盘哪个按键被按下 鼠标滚轮的方向
clientX可以获取鼠标指针的水平坐标，clientY可以获取鼠标指针的垂直坐标
-注意：在IE8中，响应函数被触发时，浏览器不会传递事件对象
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。

三、div跟随鼠标移动
1.clientX和clienY
-这两个属性是获取鼠标在当前可见窗口的坐标
2.pageX和pageY
-这两个属性可以获取鼠标相对于当前页面的坐标，但是这两个属性在IE8及以下中不支持
3.获取滚动条的距离
var st = document.body.scrollTop || document.documentElement.scrollTop ，现在的大多数浏览器支持滚动条时属于html的。

四、事件的冒泡
1.Bubble
-所谓的冒泡，指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
-在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡
-可以将事件对象的cancelBubble设置为true，可以取消事件的冒泡。

五、事件的委派
1.需求
-我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素。
-如果触发事件的对象是我们期望的元素，则执行，否则就不执行
（ if event.target.className == “XXX”）
2.事件的委派
-指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
-事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序性能。
3.target
-event中的target表示的是触发事件的对象

六、事件的绑定
1.绑定事件方法1
-使用 对象.事件= 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边的响应函数会覆盖掉前面的响应函数。
2.绑定事件方法2
-addEventListener（“click”，参数2，参数3） 通过这个方法也可以为元素绑定响应函数
这个方法里可以传递参数
参数【1】： 事件的字符串，不要on
参数【2】：回调函数，当事件触发时该函数会被调用
参数【3】：是否在捕获阶段触发事件，需要一个布尔值，一般都传false
-使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 ，这个方法不支持IE8及以下的浏览器
3.绑定事件方法3
-attachEvent（） 在IE8中可以使用这个方法来绑定事件
参数【1】 事件的字符串，需要on
参数【2】 回调函数
-这个方法也可以为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener（）相反

七、bind()函数
1.定义一个函数，用来为指定元素绑定响应函数
-addEventListener（）中的this，是绑定事件的对象
-attachEvent（）中的this，是window
注意：需要统一两个方法中的this
2.bind（）函数的写法
-参数【1】obj ： 要绑定事件的对象
-参数【2】eventStr 事件的字符串（不要加on）
-参数【3】callback 回调函数
function bind（obj，eventStr，callback）{
if（obj.addEventListener）{obj.addEventListener(eventStr,callback,false);
}else{
//this是谁是由调用方式决定的 callback.call（obj）可以将callback里的this指向obj对象。
obj.attachEvent(“on”+eventStr，function（）{
//在匿名函数中调用回调函数
callback.call(obj);})
}
这样就解决了两个方法this不一样的问题

//大部分浏览器的兼容的方式
//obj.addEventListener(eventStr,callback,false);
//IE8及以下浏览器的兼容方式
//obj.attachEvent(“on”+eventStr，callback)
}

七、事件的传播
1.事件的传播
-关于事件的传播：网景公司和微软公司有不同的理解
-微软公司认为事件应该是由内向外传播的，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素祖先元素上传播，也就是说事件应该在冒泡阶段执行。从内往外传，叫做事件的冒泡
-网景公司认为事件应该是由外向内传播的，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。从外往内传，叫做事件的捕获阶段。
-W3C综合了两个公司的方案，将事件的传播分成了三个阶段
【1】事件的捕获阶段，在捕获阶段时，从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件
【2】 目标阶段，事件捕获到目标元素，捕获结束开始在目标元素上触发这个事件
【3】冒泡阶段，事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
-如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true。一般情况下，我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
-在IE8及以下的浏览器中没有捕获阶段

八、事件的拖曳
1.事件的一些属性
【1】当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
【2】当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
【3】 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
2.浏览器的默认行为
-当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容 ，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，我们可以使用return false ;来取消默认行为 ，但是这个对IE8不起作用。
3.setCapture()方法
-当调用一个元素的setCapture方法后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。
-如果要兼容IE8及以下浏览器，当点击box1时可以为box1设置一个setcapture方法,但是这里需要注意的是一定要在松开鼠标时（也就是onmouseup的函数方法中）使用releaseCapture（）方法取消对事件的捕获。
注意：setCapture（）和releaseCapture（）方法只有IE支持，在火狐中调用不会报错，但是chorome中调用会报错，所以还要使用if(box1.setCapture)先判断一下是否可以使用，再调用box1.setCapture（）方法，也可以用box1.setCapture && box1.setCapture 表达式来进行判断。

九、滚轮事件
1.onwheel
-鼠标滚轮滚动的事件，会在滚轮滚动时触发
-但是如果要兼容火狐，则需要用 bind(box1,“DoMMouseScroll”，box1.onmousewheel)的方式绑定滚动事件。
2.event.wheelDelta
-这个属性可以获取鼠标滚轮滚动的方向
-向上滚动时120 向下滚是-120 这个值我们不看大小 只看正负
-注意：wheelDelta这个 属性火狐不支持，在火狐中使用event.detail来获取滚动的方向，event,detail向上滚是-3，向下滚是3
3.浏览器的滚动条
-当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器 默认行为，如果不希望发生，则可以取消默认行为。
-注意：使用addEventListener（）方法绑定响应函数时。取消默认行为时不能使用return false方法，需要使用event来取消默认行为，event.preventDefault（）方法，可以取消掉火狐的默认行为，但是IE8不支持这个方法，如果直接调用会报错。

十、键盘事件
1.onkeydown
-按键被按下
-对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发
-当onkeydown连续触发时，第一次和第二次之间间隔稍微长一点，其他的会非常的快,这种设计是为了防止误操作的发生。
2.onkeyup
-按键被松开
3.keyCode
-通过这个属性可以获取按键的编码，通过它可以判断哪个按键被按下
-除了keyCode，事件对象中还提供了几个属性 ， altkey，ctrlkey，shiftkey，这三个用来判断alt ctrl 和shift 是否被按下，如果按下则返回true，否则返回false

键盘事件一般都会绑定给一些可以获取到焦点的对象或者document（文档对象）

4.文本框中的默认行为
-在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中使用return false；取消了默认行为，则输入的内容不会出现在文本框中
-可以利用event.keycode和return false;来限制一些值的输入。