JS - 事件
什么是事件?
浏览器和用户之间的交互行为
注册事件处理程序
通过 dom 元素的属性注册事件
- <button type="button" id="btn">点我</button>
- <script>
- // 获取 dom 元素
- var btn = document.getElementById('btn');
- // 通过 dom 元素的属性注册事件
- btn.onclick = function(event){
- // 事件对象中包含了事件的详细信息
- console.log(event)
- console.log('Hello vuejs!')
- };
- </script>
通过标签的属性注册事件
- <button type="button" id="btn" onclick="greeting();">点我</button>
- <script>
- function greeting(){
- console.log('Hello');
- console.log('World');
- }
- </script>
通过标签的属性注册事件
- <button type="button" id="btn">点我</button>
- <script>
- // 获取 dom 元素
- var btn = document.getElementById('btn');
- btn.addEventListener('click', function(){
- console.log('使用 addEventListener()方法注册事件');
- });
- </script>
事件的分类
鼠标事件
onclick 点击鼠标
ondblclick 双击鼠标
onmouseover 鼠标移入
onmouseup 鼠标按下松开
onmousedown 鼠标按下时发生
onmouseout 鼠标移出
onmousemove 鼠标移动时发生
事件默认行为
oncontextmenu 右键菜单事件, 当右键菜单 (环境菜单) 显示出来的时候触发
键盘事件
html 事件
onfocus 表单获取焦点
onblur 表单失去焦点
onchange 文本框内容改变失去焦点的时候触发
oninput 实时改变输入框的值
onselect 当用户选中文本框的内容时触发
onresize 当窗口大小变化时触发行为
onscroll 滚动滚动条
document.body.scrollTop 在 IE 中有用
document.documentElement.scrollTop 非 IE 中有用
事件对象 event
var e=ev || Windows.event // 兼容 IE 浏览器
来源: http://www.bubuko.com/infodetail-2850166.html