JS – 事件

JS – 事件

Table of Contents

• 事件分类
• 事件绑定
• 冒泡和捕捉
• event 对象
• 事件委托
• 事件的其他属性

事件分类

onBlur       鼠标离开
onFocus      鼠标激活了对象

onChange     修改了对象 <select><option></opttion></select>
onClick      单击了对象

onError      脚本遇到了一个错误

onMouseOver  鼠标指针移动到了对象上
onMouseOut   鼠标指针移开了对象

onReset
onSubmit     用户提交了表单

onLoad       对象完成了加载
onUnload     用户离开了页面
onAbor       终止了页面的加载

事件绑定

静态

<input type="button" onclick="func()" value="xxx">

动态

document.getElementById("xxx").onclick = function() { ... };

上面两种绑定方式的缺点是无法多次绑定

可以多次绑定
addEventListener 绑定
removeEventListener 解除

[Object].addEventListener("name_of_event", fnHandle, bCapture);
[Object].removeEventListener("name_of_event", fnHandle, bCapture);

冒泡和捕捉

// 如果两个都有, 先从外向内

// 第三个参数 flase, 表示冒泡模型, 表示从内向外 开始触发事件
// 第三个参数 true,  表示捕捉模型, 表示从外向内 开始触发事件
one.addEventListener(‘click‘, function() {
    alert(‘one‘);
}, true);
two.addEventListener(‘click‘, function() {
    alert(‘two‘);
}, true);
three.addEventListener(‘click‘, function() {
    alert(‘three‘);
}, true);

one.addEventListener(‘click‘, function() {
    alert(‘one‘);
}, false);
two.addEventListener(‘click‘, function() {
    alert(‘two‘);
}, false);
three.addEventListener(‘click‘, function() {
    alert(‘three‘);
}, false);

....addEventListener(‘click‘, function(ev) {
  ...
  ev.stopPropagation();              // 当触发到某个动作的时候, 停下所有的事件
  ev.cancelBubble();                 // 当触发到某个动作的时候, 停下当前的事件
...
}

阻止表单提交的正确方法, 不要使用 return false;

form.addEventListener(‘submit‘, function(event) {
    if (input.value == ‘‘) {
        event.preventDefault();
    }
});

event 对象

<input ... onmousedown="func(event)">      # 一定要写 event, 不能是 even 等

function func (e) {
    var event = e || window.event;
}

<input ... onmousedown="func()">           # 如果不写 event

function func (e) {
    var event = window.event || arguments.callee.caller.arguments[0];
}

事件委托

event.target

var target = event.target || event.srcElement;

事件的其他属性

ev.button = 0 | 1 | 2  # 左中右

相对于屏幕显示器
screenX
screenY

相对整个页面
pageX
pageY

相对整个页面, 如果滚动条发生改变, 也会改变
clientX
clientY

相对于父亲的距离
offsetX
offsetY

document.body.scrollTop 代表的是被浏览器滑动条滚过的长度

pageY = clientY + scrollTop - clientTop

altKey alt 是否被按下
shiftKey shift 是否被按下
ctrlKey ctrl
keyCode 键盘码