事件: 用户的行为
事件对象 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 是 Windows
说到事件绑定不得不说一下事件的委托:
事件的委托:
比如有一下代码:
- <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
来源: http://www.jianshu.com/p/ed366474cf0a