18、事件对象

事件:用户的行为

事件对象 event :

储存[描述]了事件更详细的信息.

• 事件对象就是event,类似一个盒子[其实就是一个对象],里面装了跟当前事件想换的所有详细信息,用什么自己取出来就可以了.
  比如event中就有鼠标在页面中的坐标:
  event.clientX:页面的X轴坐标
  event.clientY:页面的Y轴坐标
  event中的信息有非常多,如果我们想查看,可以将event对象打印出来:
  console.log(event)
  但是注意,事件对象只能在事件内部使用或打印,如:

document.onclick = function (){
    console.log(event)//在这里面打印或使用才可以
}

如果在事件外部打印,会返回undefined.

下面列举几种常见的事件和事件对象:

事件:

单击鼠标:onclick

用法:

obj.onclick = function (){
    //当obj被点击时执行的代码
    alert('你点击了,我就执行!')
}

鼠标右键事件:oncontextmenu

双击鼠标:ondblclick

鼠标被按下:onmousedown

鼠标被松开:onmouseup

鼠标被移动:onmousemove

鼠标移动到某元素上:onmouseover

鼠标从某元素上移开:onmouseout

事件对象:

鼠标相对浏览器窗口可视区X轴坐标:event.clientX

用法:

obj.onclick = function (){
    //当obj被点击时执行的代码
    var x = evnet.clientX;
    alert('这里是页面X轴'+x+'px ')
}

鼠标相对浏览器窗口可视区Y轴坐标:event.clientY

鼠标相对于屏幕X轴坐标:event.screenX

鼠标相对于屏幕Y轴坐标:event.screenY

浏览器可视区的宽高:

document.body.clientWidth:宽度

document.body.clientHeight:高度

元素的宽高:

obj.offsetWidth:宽度

用法:

obj.onclick = function (){
var w = obj.offsetWidth;
    //当obj被点击时执行的代码
    alert('我的宽度是'+w+'px');
}

obj.offsetHeight:高度

元素的位置信息:

obj.offsetLeft:元素到左边的距离

obj.offsetTop元素到上边的距离

更多事件 W3school Event

事件的绑定:

在js中,同一个元素的相同事件只能绑定一个,再次绑定就会把之前的事件覆盖掉,所以,如果想要绑定多个相同事件,只能通过事件绑定方法来完成

addEventListener():绑定事件方法

• obj.addEventListener(事件字符串,绑定的函数,真假值)

1.事件字符串:需要绑定的事件的字符串形式,注意,不加on,如:
点击鼠标事件,原本是onclick,但是在这里面传入的是'click'.
2.绑定的函数:绑定的事件触发后所执行的函数,可以是回调函数,也可以是一个函数名.
3.真假值:是否阻止事件冒泡行为,默认是false,我们也可以写入false,大部分情况下保持默认就好.
注意: 此方法并不兼容IE8及以下的浏览器,所以在ie中,我们使用的是另一个方法:

• attachEvent(事件字符串,绑定的函数)
  它只有两个参数可传
  1.事件字符串:和上面的基本一致,只不过它需要加上on,如点击事件,需传入'onclick'
  2.绑定的函数:和上面的一致.
  讲到这个我们需要注意一点, addEventListener()绑定事件的执行顺序是先绑定先执行,就像1,2,3的顺序,但是attachEvent()绑定的事件顺序是先绑定后执行,就像3,2,1的顺序,但是这个不是很重要
  重点是: addEventListener()的回调函数中的this是绑定的元素,但attachEvent()的回调函数中的this 是window

说到事件绑定不得不说一下事件的委托:

事件的委托:

比如有一下代码:

<ul>
<li>我的原来的li</li>
<li>我是原来的li</li>
</ul>
<button>点我添加li</button>

这是我们的html文档,原本ul中有两个li,我们给所有li添加单击响应函数,而且给按钮添加js代码,使其能够在被点击的时候向ul中添加li
但是我们马上就会发现,点击原本就存在的li管用,但是点击js生成的li就不管用了,这是由于我们的功能是由li执行的,但他们并不能把自己的功能分给新添加的兄弟,所以新添加li并会触发函数,那怎么解决呢?

• 我们把原本属于它的功能交给原本就存在的它的祖先元素来执行,这就是事件的委托
  把原本属于li的功能委托给原本就存在的它的父级:ul来执行

ul.onclick = function(){
    if(event.target === li){
        alert('我弹出来了');
    }
}

所以我们还有补充一个新的event属性:

event.target:返回触发事件的源目标

• 简单来说,就是我们点击li它就会返回li,如果li中有个a标签,我们点击a标签,它就会返回a

滚轮滚动事件:

首先声明: 获取滚动方向,我们不看返回值大小,只看正负

非火狐浏览器:onmousewheel

• 获取滚动方向:event.wheelDelta
• 向上滚返回120,向下滚返回-120

火狐浏览器:DOMMouseScroll

• 获取滚动方向:event.detail
• 向上滚返回-3,向下滚返回3

取消默认行为:

什么是默认行为:
如input的输入框,取消后则输入不进去内容
如滚轮滚动浏览器滚动条自动滚动,取消则浏览器滚动条不会滚动
由于某些原因,我们可能会遇到需要取消默认行为的地方

return false