事件处理

var button = document.getElementById('btn');
button.onclick = function(e) {
  var e = e || window.e;
  console.log(e);
  document.write(e.srcElement ? e.srcElement : e.target); // 获取单击对象的标签名
  // [object HTMLButtonElement]
}

/*
  IE 事件模型和 DOM 事件模型对 event 对象的处理方式不同：IE 把 event 对象定义为 window 对象的一个属性，而 dom 事件模型把 event 定义为事件处理函数的默认参数。
*/

/*
  event.srcElement 表示当前的事件源，即响应事件的当前对象，这是 IE 模型用法。但是 DOM 事件模型不支持该属性，需要使用 event 对象的 target 属性。
  事件处理函数中，this 表示当前事件对象，与 event 对象的 srcElement 属性或者 target 属性所代表的意思相同。
*/

<button id="btn" onclick="this.style.background='red'">按钮</button>

<!-- 也可以如下表示 -->

<button id="btn" onclick="(event.srcElement ? event.srcElement : event.target).style.background='blue'">按钮</button>

<button id="btn1" onclick="btn1()">按钮1</button>
<button id="btn2" onclick="btn2(event)">按钮2</button>

function btn1() { // 抛出错误
	this.style.background = 'red'; // 事件处理函数，函数中的 this 表示调用该函数的当前对象
}

function btn2(event) {
    event = event || window.event;
    var src = event.srcElement ? event.srcElement : event.target;
    src.style.background = 'red';
}

element.addEventListener(String type, Function listener, Boolean useCapture);
/*
  type：注册事件的类型名
  listener： 监听函数，事件处理函数，默认传递给它的唯一参数就是 event 对象
  useCapture：如果是 true，则指定的事件处理函数将在事件传播的捕获阶段触发，如果是 false，则事件处理函数将在冒泡阶段触发。
*/

// 循环为每一个按钮添加处理函数
var btn = document.getElementsByTagName('button');
for(var i in btn) {
	btn[i].addEventListener("click", function() {
		alert(this.innerHTML);
	}, true); //为每个按钮对象注册一个事件处理函数，定义在捕获阶段进行响应
}

// 段落 p 的移入移出设置不同的处理函数
var p1 = document.getElementById('p1');
p1.addEventListener('mouseover', function() {
	this.style.background = 'blue';
});
p1.addEventListener('mouseout', function() {
	this.style.background = 'red';
})

var p1 = document.getElementById('p1');
p1.attachEvent('onmouseover', function() {
	p1.style.background = 'blue';
})
p1.attachEvent('onmouseout', function() {
	p1.style.background = 'red';
})

element.removeEventListener(String type, Function listener, Boolean useCapture);

<input type="button" id="a" value="点我" />
<input type="button" id="b" value="删除事件" />

var a = document.getElementById('a');
var b = document.getElementById('b');

function ok() {
	alert('您好，欢迎光临！')
}

function delete_event() {
	a.removeEventListener('click', ok, false);
}

a.addEventListener('click', ok, false);
b.addEventListener('click', delete_event, false);

element.detachEvent(etype, eventName);

var p1 = document.getElementById('p1');

var f1 = function() {
	p1.style.background = 'blue';
}

var f2 = function() {
	p1.style.background = 'red';
	p1.detachEvent('onmouseover', f1);
	p1.detachEvent('onmouseout', f2);
}

p1.attachEvent('onmouseover', f1);
p1.attachEvent('onmouseout', f2);

var p1 = document.getElementById('p1');

var f1 = function() {
	p1.style.background = 'blue';
}

var f2 = function() {
	p1.style.background = 'red';
	if(p1.detachEvent) {
		p1.detachEvent('onmouseover', f1);
	  p1.detachEvent('onmouseout', f2);
	} else {
		p1.removeEventListener('mouseover', f1);
	  p1.removeEventListener('mouseout', f2);
	}
}

if(p1.attachEvent) {
	p1.attachEvent('onmouseover', f1);
  p1.attachEvent('onmouseout', f2);
} else {
	p1.addEventListener('mouseover', f1);
  p1.addEventListener('mouseout', f2);
}

// <a href="https://www.baidu.com/" id="a1">禁止超链接跳转</a>
document.getElementById('a1').onclick = function(e) {
	e = e || window.event;
	var target = e.target || e.srcElement;
	if(target.nodeName !== 'A') { // 仅针对超链接起作用
		return;
	}
	if(typeof e.preventDefault === 'function') {
		e.preventDefault();
		e.stopPropagation();
	} else { // 兼容 ie 模型
		e.returnValue = false; // 禁止默认行为
		e.cancelBubble = true; // 禁止冒泡
	}
} 

/*
  <button id="btn">添加</button>
  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
*/

// e.target 触发事件的元素， e.currentTarget 绑定的元素

var ul = document.getElementById('list');
ul.addEventListener('click', function(e) {
	var e = e || window.event;
	var target = e.target || e.srcElement;
	if(e.target && e.target.nodeName.toUpperCase() == 'LI') {
		alert(e.target.innerHTML);
	}
}, false); // li 冒泡被 ul 捕获到

var i = 4;
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
	var li = document.createElement('li');
	li.innerHTML = "列表项目" + i++;
	ul.appendChild(li);
})

var p1 = document.getElementsByTagName('p')[0];
var t = document.getElementById('text');

function f() {
  var event = event || window.event;
  t.value = event.type; // 获取当前事件类型
}
// p1.onmouseover = f;
// p1.onmouseout = f;
// p1.onmousedown = f;
// p1.onmouseup = f;
// p1.onmousemove = f;
// p1.onclick = f;
// p1.ondblclick = f;

/*
  mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时，就会触发 mousemove 事件。
*/
var box = document.getElementById('box');
box.style.position = "absolute";
box.style.width = '160px';
box.style.height = '120px';
box.style.backgroundColor = 'red';

var mx, my, ox, oy;

function e(event) {
  if(!event) {
    event = window.event;
    event.target = event.srcElement;
    event.layerX = event.offsetX;
    event.layerY = event.offsetY;
  }
  event.mx = event.pageX || event.clientX + document.body.scrollLeft; // 计算鼠标指针的 x 轴距离
  event.my = event.pageY || event.clientY + document.body.scrollTop; // 计算鼠标指针的 y 轴距离
  return event;
}

// 定义鼠标事件处理函数
document.onmousedown = function(event) {
  event = e(event);
  o = event.target;
  ox = parseInt(o.offsetLeft); // 被拖放元素距离浏览器左侧的偏移量
  oy = parseInt(o.offsetTop); // 被拖放元素距离浏览器顶部的偏移量
  // console.log(ox, oy);
  mx = event.mx; // 按下鼠标指针的 x 轴坐标
  my = event.my; // 按下鼠标指针的 y 轴坐标
  document.onmousemove = move;
  document.onmouseup = stop;
}

function move(event) {
  event = e(event);
  o.style.left = ox + event.mx - mx + 'px';
  o.style.top = oy + event.my - my + 'px';
}

function stop(event) {
  event = e(event);
  ox = parseInt(o.offsetLeft);
  oy = parseInt(o.offsetTop);
  mx = event.mx;
  my = event.my;
  o = document.onmousemove = document.onmouseup = null;
}

/*
  下面嵌套 3 个 div 元素，当外层的父元素移动到内部的子元素中时，将会触发父元素的 mouseover 事件，但是不会触发 mouseout 事件
*/

/*
<div style="outline: 1px solid red; padding: 20px;width: 200px;">
  第一层
  <div style="outline: 1px solid blue; padding: 20px;">
    第二层
     <div style="outline: 1px solid black; padding: 20px;">
       第三层
     </div>
  </div>
</div>
*/
var div = document.getElementsByTagName('div');

for(var i = 0; i < div.length; i++) {
  div[i].onmouseover = function(e) {
    this.style.border = "solid blue";
  }
  div[i].onmouseout = function(e) {
    this.style.border = "solid red";
  }
}

/*
  <div>div 元素</div>
*/
var div = document.getElementsByTagName('div');
div.onmouseover = function(e) {
  var e = e || window.event;
  var o = e.target || e.srcElement;
  console.log(o.tagName);
}
/*
  在 DOM 事件模型中还定义了 currentTarget 属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值于 target 属性值不同，因此，一般在事件处理函数中，应该使用该属性，而不是 this 关键词获取当前对象。
*/

/*
  如果想用鼠标来移动某个元素，在 DOM 事件模型中可以使用 relatedTarget 属性来获取当前事件对象的相关节点元素；而在 IE 事件模型中，可以使用 fromElement 获取 mouseover 事件中鼠标移到多的元素，使用 toElement 属性获取在 mouseeout 事件中鼠标移到的文档元素。
*/
var div = document.getElementsByTagName('div');
div.onmouseover = function(e) {
  var e = e || window.event;
  var o = e.relatedTarget || e.fromElement;
  console.log(o.tagName);
}
div.onmouseout = function(e) {
  var e = e || window.event;
  var o = e.relatedTarget || e.toElement;
  console.log(o.tagName);
}

/*
  <div id="div1">鼠标跟随</div>
*/
var pos = function(o, x, y, event) {
  var posX = 0, posY = 0;
  var e = event || window.event;
  if(e.pageX || e.pageY) {
     posX = e.pageX;
     posY = e.pageY;
  } else if(e.clientX || e.clientY) {
    posX = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
  }
  o.style.position = "absolute";
  o.style.top = (posY + y) + 'px';
  o.style.left = (posX + x) + 'px';
}

var div1 = document.getElementById('div1');
document.onmousemove = function(event) {
  pos(div1, 10, 20, event);
}

/*
<input type="text" id="text">
<span style="position: absolute;">
  <div id="div1" style="width:200px;height:160px;border: 1px solid red">鼠标跟随</div>
</span>
*/
var t = document.getElementById('text');
var div1 = document.getElementById('div1');
div1.onmousemove = function(event) {
  var event = event || window.event;
  if(event.offsetX || event.offsetY) {
    t.value = event.offsetX + ' ' + event.offsetY;
  } else if(event.layerX || event.layerY) {
    t.value = (event.layerX - 1) + ' ' + (event.layerY - 1);
  }
}

document.onclick = function(e) {
  var e = e || window.event;
  if(e.button == 2) {
    e.preventDefault();
    return false;
  }
}

/*
  <textarea id="key"></textarea>
*/
var key = document.getElementById('key');
key.onkeydown = f;
key.onkeyup = f;
key.onkeypress = f;

function f(e) {
  var e = e || window.event;
  var s = e.type + " " + e.keyCode;
  key.value = s;
}

/*
  监测 ctrl 和 shift 是否被同时按下，如果同时按下，且鼠标单击某个页面元素，则会把该元素删除。
*/
document.onclick = function(e) {
  var e = e || window.event;
  var t = e.target || e.srcElement;
  if(e.ctrlKey && e.shiftKey) { // 同时按下 Ctrl 和 Shift 键
  	t.parentNode.removeChild(t);
  }
}

/*
  <div id="box"></div>
*/
var box = document.getElementById('box');
box.style.position = "absolute";
box.style.width = "20px";
box.style.height = "20px";
box.style.backgroundColor = "red";

document.onkeydown = keydown;

function keydown(event) {
  var event = event || window.event;
  switch(event.keyCode) {
    case 37:
      box.style.left = box.offsetLeft - 5 + 'px';
      break;
    case 39:
      box.style.left = box.offsetLeft + 5 + 'px';
      break;
    case 38:
      box.style.top = box.offsetTop - 5 + 'px';
      break;
    case 40:
      box.style.top = box.offsetTop + 5 + 'px';
      break;
  }
}

// 设计一个简单示例，以获取键盘事件响应顺序
// <textarea id="text" cols="26" rows="16"></textarea>
var text = document.getElementById('text');
var n = 1;
text.onkeydown = f;
text.onkeyup = f;
text.onkeypress = f;
function f(e) {
  var e = e || window.event;
  text.value += (n++) + "=" + e.type + "(keyCode=" + e.keyCode + ")\n";
}

// 直接为 window 对象注册页面初始化事件处理函数
/*

方法一:
  
  window.onload = f;
  
  function f() {
    alert('页面加载完毕')
  }
  
方法二：
  
  <body onload = "f()">

*/

// 如果页面同时只用两种 load 方式，并不会发生冲突，也不会两次触发事件。body 元素定义的页面初始化事件属性会被覆盖。

// <body onload="f('Hi')">
function f(a) {
    alert(a);
}

window.onload = function() {
    f("Hi")
}
function f(a) {
    alert(a);
}

window.onload = f('Hi');
function f(a) {
    return function () {
        alert(a)
    }
}

window.onload = function() {
    f1();
    f2();
}

if(window.addEventListener) {
  window.addEventListener('load', f1, false)
  window.addEventListener('load', f2, false)
} else {
  window.attachEvent('load', f1, false)
  window.attachEvent('load', f1, false)
}

window.onload = f1;
if(document.addEventListener) {
  document.addEventListener('DOMContentLoaded', f, false)
}

function f() {
  console.log('我提前执行了');
}

function f1() {
  console.log('页面初始化完毕');
}

/*
  我提前执行了
  页面初始化完毕
*/

if(window.ActiveXObject) {
  document.write("<script id=ie_onload defer src=javascript:void(0)><\/script>");
  document.getElementById('ie_onload').onreadystatechange = function() {
    // 判断脚本标签状态
    if(this.readyState == 'complete') { // 如果状态已完成，则说明文档结构加载完毕
      this.onreadystatechange = null; // 清空当前方法
      f();
    }
  }
}

if(/WebKit/i.test(navigator.userAgent)) {
  var _timer = setInterval(function() {
    if(/loaded|complete/.test(document.readyState)) {
      clearInterval(_timer);
      f();
    }
  }, 10)
}

window.onunload = f;

function f() {
  alert(888)
}

window.onbeforeunload = function(e) {
  return '你的数据还没保存呢！'
}

// 跟踪窗口大小变化及时调整页面内红色盒子的大小，使其始终保持与窗口固定比例的大小显示
// <div id="box"></div>
var box = document.getElementById('box');
box.style.position = "absolute";
box.style.backgroundColor = "red";
box.style.width = w() * 0.8 + "px";
box.style.height = h() * 0.8 + 'px';

window.onresize = function() {
  box.style.width = w() * 0.8 + "px";
  box.style.height = h() * 0.8 + 'px';
}

function w() {
  if(window.innerWidth) { // 兼容 DOM
    return window.innerWidth;
  } else if((document.body) && (document.body.clientWidth)) { // 兼容 IE
    return document.body.clientWidth;
  }
}

function h() {
  if(window.innerHeight) { // 兼容 DOM
    return window.innerHeight;
  } else if((document.body) && (document.body.clientHeight)) { // 兼容 IE
    return document.body.clientHeight;
  }
}

// 随着页面滚动，控制红色小盒子始终在同一个位置
/*
<div class="layout">
  <div id="box"></div>
</div>
*/
var box = document.getElementById('box');
box.style.position = "absolute";
box.style.backgroundColor = "red";
box.style.width = "200px";
box.style.height = "160px";

window.onload = f;
window.onscroll = f;

function f(event) {
  console.log(document.body.scrollLeft, document.body.scrollTop)
  box.style.left = 100 + parseInt(document.documentElement.scrollLeft || document.body.scrollLeft) + 'px';
  box.style.top = 100 + parseInt(document.documentElement.scrollTop || document.body.scrollTop) + 'px';
}

/*
  当页面发生编译错误时，将会触发 error 事件注册的时间处理函数，并弹出错误提示。
*/
window.onerror = function () {
  alert("错误原因：" + arguments[0] + "\n错误URL:" + arguments[1] + "\n错误引号：" + arguments[2]);
  return true; //禁止浏览器显示标准错误信息
}

a.innerHTML = ""; // 制造错误

// <input type="text" /><input type="text" />
var o = document.getElementsByTagName('input');
for (var i = 0; i < o.length; i++) {
  o[i].onfocus = function() {
    this.style.borderStyle = "outset";
  }
  o[i].onblur = function() {
    this.style.borderStyle = "inset";
  }
}

// 页面 load 之后，给 input 元素添加焦点
/*
<form id="myform" method="post" action="#">
    姓名：<input type="text" name="name" />
    密码：<input type="password" name="pass" />
</form>
*/
var form = document.getElementById('myform');
var field = form.elements['name'];
window.onload = function() {
  field.focus();
}

// 当在第一个文本框选择文本时，会在第二个文本框出现被选择的文本内容
/*
  <input type="text" id="a" value="请随意选择字符串" />
  <input type="text" id="b" />
*/
var a = document.getElementsByTagName('input')[0];
var b = document.getElementsByTagName('input')[1];

a.onselect = function() {
  if(document.selection) { // 兼容 IE
    o = document.selection.createRange(); // 创建一个选择区域
    if(o.text.length > 0) {
      b.value = o.text;
    }
  } else { // 兼容 DOM
    p1 = a.selectionStart; // 获取文本框选择的初始位置
    p2 = a.selectionEnd; // 获取文本框中选择的结束位置
    b.value = a.value.substring(p1, p2);
  }
}

var a = document.getElementsByTagName('input')[0];
var b = document.getElementsByTagName('input')[1];

a.onchange = function() {
  b.value = this.value;
}

/*
<select>
  <option value="http://www.baidu.com">百度</option>
  <option value="http://www.google.cn">谷歌</option>
</select>
*/
var a = document.getElementsByTagName('select')[0];

a.onchange = function() {
  window.open(this.value, "")
}

// 示例：只允许用户输入数字
/*
    <form id="myform" method="post" action="javascript:alert('表单提交啦！')">
      <p>
        <label for="txtNumbers">请输入数字：</label><br>
        <input type="text" id="txtNumbers" name="numbers" />
      </p>
      <p>
        <input type="submit" value="提交表单" id="submit-btn" />
      </p>
    </form>
*/
var form = document.getElementById('myform');
var numbers = form.elements['numbers'];

numbers.onfocus = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  target.style.backgroundColor = "yellow";
}

numbers.onblur = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  if(/[^\d]/.test(target.value)) {
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
}

numbers.onchange = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  if(/[^\d]/.test(target.value)) {
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
}

numbers.focus();

/*
    <form id="form1" name="form1" method="post" action="">
      <input type="text" id="t" name="t" />
      <input type="submit" value="submit" />
    </form>
*/
var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];

f.onsubmit = function(e) {
  alert(t.value);
  return false;
}

// 当页面没有 submit 按钮时，按 Enter 一样可以触发。
// 在 <textarea> 中按 Enter 只会换行，不会触发

// 验证表单文本框中是否有内容提交，否则阻止提交
var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];

f.onsubmit = function(e) {
  if(t.value.length < 1) {
    var event = e || window.event;
    if(event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
}

// 禁止 Enter 提交 form 表单
var t = document.getElementsByTagName('input')[0];

t.onkeypress = function(e) {
  var e = e || window.event;
  return e.keyCode != 13;
}

// 调用 submit() 方法提交表单
var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];

t.onkeypress = function(e) {
  var e = e || window.event;
  return e.keyCode != 13;
}

/*
    <form id="form1" name="form1" method="post" action="">
      <input type="text" id="t" name="t" />
      <input type="reset"/>
    </form>
*/
var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];

f.onreset = function(e) {
  alert(t.value);
}

// 文本输入框如果输入 10 个字符以上就不允许重置了
var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];

f.onreset = function(e) {
  if(t.value.length > 10) {
    var event = e || window.event;
    if(event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
}