BOM/EVENT学习笔记(3)

发表于 | 分类于 ， ， | 阅读次数:

Event事件详解

事件捕获

1
2
3
4
5
6
7
8
9
<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>

document.addEventListener('onclick', fn1, true);
document.addEventListener('onclick', fn2, true);
document.addEventListener('onclick', fn3, true);

事件的取消

第一种事件绑定形式的取消

1
2
3
4
5
6
7
8
function fn1(){
  alert(1);
}
function fn2(){
  alert(2);
}
document.onclick = fn1;
document.onclick = null;  //取消

第二种事件绑定形式的取消
IE: obj.detachEvent(事件名称, 事件函数);
标准: obj.removeEventListener(事件名称, 事件函数, 是否捕获);

1
2
3
4
5
6
7
8
document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
document.detachEvent('onclick', fn1);

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn1, true);
document.addEventListener('click', fn2, false);
document.removeEventListener('click', fn1, false);

参考：
1.HtmlDocument.DetachEvent Method)
2.EventTarget.removeEventListener

键盘事件

onkeydown：当键盘按键按下的时候触发（如果按下不抬起，那么会连续触发）
onkeyup：当键盘按键抬起的时候触发
event.keyCode: 数字类型 键盘按键的值 健值
ctrlKey,shiftKey,altKey 布尔值
当一个事件发生的时候，如果 ctrl || shift || alt 是按下的状态，返回true，否则返回false

1
2
3
4
5
6
7
8
9
10
document.onkeydown = function(ev){
  // alert(1);
  var ev = ev || event;
  alert(ev.keyCode);
}

document.onclick = function(ev){
  var ev = ev || event;
  alert(ev.ctrlKey);
}

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素能够接收键盘事件
思考：解决连续输入时输入第一个字符和后面字符间隔时间较长的问题，解决方案：定时器

示例：点击查看

事件默认行为-默认事件

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
如何阻止：
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;

1
2
3
document.onkeydown = function(){
  return false;
}

oncontextmenu: 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

1
2
3
4
document.oncontextmenu = function(){
  // alert(1);
  return false;
}

示例：点击查看