事件对象

onmousemove

• 该事件将会在鼠标在元素中移动时被触发

事件对象

• 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
• 在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键被按下,鼠标滚轮滚动方向等

clientX和clientY

• clientX
• 返回当事件被触发时,鼠标指针的水平坐标
• clientY
• 返回当事件被触发时,鼠标指针的垂直坐标

clientX和clientY用于获取当前的可见窗口的坐标

div的偏移量是相对于整个页面的

pageX和pageY可以获取鼠标相对于当前页面的坐标

这两个属性在IE8中不支持,所以如果要兼容IE8,则不要使用

在IE8中,响应函数被处罚时,浏览器不会传递事件对象,在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的.

解决事件对象的兼容性问题

event = event || window.event;

事件冒泡

事件的冒泡

• 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
• 在开发中大部分冒泡都是有用的,如果不希望发生事件,可以通过事件对象来取消冒泡

cancelBubble

可以将事件对象的cancelBubble设置为true,即可取消冒泡

事件的委派

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

target

• event中的target表示的触发事件的对象

事件的绑定

addEventListener()

• 使用 对象.事件= 函数 的形式绑定响应函数
• 只能同事为一个元素的一个事件绑定一个响应函数
• 不能绑定多个,如果绑定多个,则后边会覆盖掉前面的

• 通过addEventListener()方法也可以为元素绑定响应函数

  • 参数:
    • 1.事件的字符串,不要on
    • 2.回调函数,当事件触发时该函数会被调用
    • 3.是否在补货阶段触发事件,需要一个布尔值,一般都传false
    

• 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行.

• 这个方法不支持IE8及以下的浏览器

• attachEvent()

  • 在IE8中可以使用attachEvent()来绑定事件
  • 参数:
    • 1.事件的字符串,要on
    • 2.回调函数
  • 这个方法也可以同时为一个事件绑定多个处理函数,不同的是他是后绑定先执行,执行顺序和addEventListener()相反

addEventListener取消浏览器默认属性(特殊)

• 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false;
• 需要使用event来取消默认行为event.parentDefault();
• 但是IE8不支持event.parentDefault();这个属性,如果直接调用会报错
• 解决办法

addEventListener中的this

• addEventListener()中的this,是绑定事件的对象
• attachEcent()中的this,是window
• 需要统一两个方法的this

定义一个函数

• 用来为指定元素绑定响应函数
• 参数:
• obj 要绑定事件的对象
• eventStr 事件的字符串(不要on)
• callback 回调函数

完成bind函数

绑定练习

事件的传播

• 关于事件的传播,网景公司和微软公司有不同的理解

• 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就是说事件应该在冒泡阶段执行

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

• W3C综合了两个公司的方案,将事件传播分成了三个阶段

  • 1.捕获阶段
    • 在捕获阶段时从外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不回触发事件
  • 2.目标阶段
    • 事件捕获到目标元素,捕获结束开始在目标元素上触发事件
  • 3.冒泡阶段
    • 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件

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

• IE8及以下的浏览器中没有捕获阶段

事件的拖拽练习

拖拽的流程

• 1.当鼠标在被拖拽元素上时开始拖拽
• 2.当鼠标移动式被拖拽元素跟随鼠标移动
• 3.当鼠标松开时,被拖拽元素固定在当前位置

onmousedown

• 鼠标按钮被按下

onmousemove

• 鼠标被移动

onmouseup

• 鼠标按键被松开

onmouseout

• 鼠标从某元素移开

onmouseover

• 鼠标移到某元素之上

拖拽的异常

当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,如果不希望发生这个行为,则可以通过return false来取消默认行为

但是这招对IE8不起作用

setCapture

只有IE支持,但是在火狐中调用时不会报错,而使用chrome调用,会报错

当调用一个元素的setCapture()方法以后,这个元素将会把下一次多有的按钮按下相关的事件捕获到自身上

releaseCapture

取消setCapture对事件的捕获

提取一个专门用来拖拽的函数

参数:开启拖拽的元素

然后把函数放在里面

给谁用就直接调用

滚轮的事件

onmousewheel

• 鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性
• 在火狐中需要使用DOMMouseScroll来绑定滚动事件
• 该事件需要用过addEventListener()函数;来绑定

event.wheelDelta

• 可以获取鼠标滚轮滚动的方向
• 向上滚返回120 向下滚返回-120
• wheelDelta这个值我们不看大小,只看正负
• 这个属性火狐中不支持
• 火狐中使用event.detail来获取滚动的方向

event.detail

• 向上滚是-3 向下滚是3

浏览器默认行为

当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,这就是浏览器的默认行为,如果不希望发生,则可以取消默认行为

• 使用return false;

键盘事件

onkeydown

• 某个键盘按键被按下
• 如果一直按着某个按键不松手
• 当onkeydown连续触发时,第一次和第二次之间会间隔长一点,其他的会非常快
• 这种设计是为了防止误操作

onkeyup

• 某个键盘按键被松开

onkeypress

• 某个键盘按键被按下并松开

键盘事件的绑定

键盘事件一般绑定给一些可以获取到焦点的对象或者docunment(文档对象)

keyCode

• 可以通过keyCode来获取按键的编码

• 通过它可以判断哪个按键被按下
• 除了keyCode,事件对象中还提供了几个属性
• altKey
• ctrlKey
• shiftKey
• 这三个用来判断alt ctrl 和shift是否被按下
• 如果按下则返回true,否则返回false

文本框默认行为

在文本框输入内容,属于onkeydown的默认行为,若果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中