事件:用户的行为
事件对象 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
