JS基础概念整理与简单练习-Part4

事件对象-相关知识：

1. 事件对象：当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递给响应函数，在事件对象中封装了当前事件相关的一切信息。

            

2. 在（<=IE8）中，响应函数被触发时，浏览器不会传递事件对象；而是将事件对象作为window对象的属性保存。
3. 解决事件对象的兼容性问题（两种方法）

            

 

 

事件对象 - 练习1

1. 问题：希望div能跟随鼠标移动

2. 需要设置div的定位//注意absolute与fixed的区别

3. 如果想全局响应的话，onmouse事件绑定在document上，而不是body上（body默认没有width）

              

4. client得到的是数值，没有单位，记得加单位！！！

            

5. 相对位置的问题：pageX和pageY可以获取鼠标相对于当前页面的坐标。但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用。

            

6. 如果判断滚动条属于哪个元素：

• chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
• 火狐等浏览器认为浏览器的滚动条是html的

 

 

事件冒泡相关知识点：

1. 事件的冒泡（Bubble）：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

• （见 红宝书 P346）

• 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
• 可以将事件对象的cancelBubble设置为true，即可取消冒泡

            

2. 举例：如果取消冒泡，div中发生的事就不会传给body

            

 

 

事件委派 相关知识点：

1. 问题：希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。

• ->利用冒泡将事件绑定给元素的共同的祖先元素
• 事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
• 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
• event中的target表示的触发事件的对象

            

 

 

事件绑定 相关知识点：

1. 问题：使用 对象.事件 = function(){}; 的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数。 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。
2. 通过  addEventListener( ) 也可以为元素绑定响应函数

       - 参数：

           1.事件的字符串，不要写on（onclick->click）

           2.回调函数，当事件触发时该函数会被调用

           3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

• 使用 addEventListener( ) 可以同时为一个元素的相同事件同时绑定多个响应函数。这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
• addEventListener()中的this，是绑定事件的对象。
• 这个方法不支持IE8及以下的浏览器。

3. 在IE8中可以使用 attachEvent( ) 来绑定事件

       - 参数：

           1.事件的字符串，要on

           2.回调函数

• 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener( ) 相反。
• attachEvent()中的this，是window。
• so，关心执行顺序的话就写在一个function里，无所谓就分开写。

4. 解决IE8中attachEvent( )里this的问题，希望能与addEventListener( )中的this保持一致。

• 需要用到call( ) 改变this的值（见红宝书 P117页）
• 但是如果直接将 callback.call(obj) 写在attachEvent( )里，这个callback是浏览器调用的，使用call无法改变函数的作用域

            

• 写成匿名函数+callback就行；可以在匿名函数中用call

            

 

 

事件传播 相关知识点

1. 事件的传播

• 关于事件的传播网景公司和微软公司有不同的理解。
• 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。（冒泡）

            

• 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。（捕获）

            

 

• W3C综合了两个公司的方案，将事件传播分成了三个阶段
• 1. 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
• 2. 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
• 3. 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

            

• 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
• IE8及以下的浏览器中没有捕获阶段。

 

 

事件相关 - 练习1

1. 拖拽box1元素
2. 取消document.onmousemove事件的方法

            

3. 注意：onmouseup（鼠标松开）应该绑定给document，因为当有两个div时，在Drag me2 上松开，此时的onmouseup是不属于Drag me1。给document的话，通过冒泡可以完成（Drag me2 -> body -> document）。

            

            

• 但是document.onmouseup记得用完取消。

4. 求鼠标在元素中的相对位置  ->  最好在点的那一下就求出来/因为之后不会变

        

5. 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为。
6. 设置btn01对鼠标按下相关的事件进行捕获，当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。（一次性）
7. 兼容问题写成这样会很酷，跟上面的if语句一致

            

 

 

事件相关 - 练习2

1. 使得火狐兼容支持onmousewheel的写法

            

• 因为之前 box1.onmousewheel 已经绑定过function了，所以可以作为回调函数传进bind。

 

 

键盘事件相关

1. 键盘事件一般都会绑定给一些可以获取到焦点的对象或document。
2. 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。

• 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。
• onkeyup（按键被松开）不会被连续触发。

3. 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下。

4. 除了keyCode，事件对象中还提供了几个属性。altKey、ctrlKey、shiftKey用来判断alt键、ctrl键和shift键是否被按下，如果按下则返回true，否则返回false。

5. 判断y和ctrl是否同时被按下

        //判断y和ctrl是否同时被按下

        if(event.keyCode === 89 && event.ctrlKey){

            console.log("ctrl和y都被按下了");

        }

6. 在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中。

 

 

键盘事件练习1

1. 用键盘方向键控制div移动
2. 判断按键