事件: 触发 - 响应机制
事件三要素
事件源: 触发 (被) 事件的元素
事件名称: click 点击事件
事件处理程序: 事件触发后要执行的代码(函数形式)
事件的基本使用
- var box = document.getElementById('box');
- box.onclick = function() {
- console.log('代码会在 box 被点击后执行');
- };
案例
点击按钮弹出提示框
点击按钮切换图片
事件详解
注册 / 移除事件的三种方式
- var box = document.getElementById('box');
- box.onclick = function () {
- console.log('点击后执行');
- };
- box.onclick = null;
- ?
- box.addEventListener('click', eventCode, false);
- box.removeEventListener('click', eventCode, false);
- ?
- box.attachEvent('onclick', eventCode);
- box.detachEvent('onclick', eventCode);
- ?
- function eventCode() {
- console.log('点击后执行');
- }
兼容代码
- function addEventListener(element, type, fn) {
- if (element.addEventListener) {
- element.addEventListener(type, fn, false);
- } else if (element.attachEvent){
- element.attachEvent('on' + type,fn);
- } else {
- element['on' + type] = fn;
- }
- }
- ?
- function removeEventListener(element, type, fn) {
- if (element.removeEventListener) {
- element.removeEventListener(type, fn, false);
- } else if (element.detachEvent) {
- element.detachEvent('on' + type, fn);
- } else {
- element['on'+type] = null;
- }
- }
事件的三个阶段
捕获阶段
当前目标阶段
冒泡阶段
事件对象. eventPhase 属性可以查看事件触发时所处的阶段
事件对象的属性和方法
event.type 获取事件类型
clientX/clientY 所有浏览器都支持, 窗口位置
pageX/pageY IE8 以前不支持, 页面位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为
案例
跟着鼠标飞的天使
鼠标点哪图片飞到哪里
获取鼠标在 div 内的坐标
阻止事件传播的方式
标准方式 event.stopPropagation();
IE 低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发
来源: http://www.bubuko.com/infodetail-3258957.html