第十二章：第36节DOM——事件操作（一）什么是事件和设置事件
更新于：2017-11-20 13:26:52
在前几节中，我们有使用过两个事件属性“onclick”和“onscroll”，尤其“onclick”用的最多。事件属性的作用，它可以让JS代码不在页面加载时执行，而是在某个事件（键盘、鼠标的行为动作）发生之后再执行，这意味着什么：在不刷新页面的情况下，人可以通过鼠标、键盘实现与页面的交互。
事件发生后，是执行一段JS程序。
如：
当网页加载完成(onload)，弹出一个警告对话框(window.alert())。
当鼠标放到图片上时(onmouseover)，图片放大。
当鼠标放到幻灯片上时(onmouseover)，幻灯片动画停止。
……
因此，事件就是前提条件，当条件成立时，执行一段JS代码。
常用事件属性：
onload：当网页加载完成后，执行动作。只能用于<body>标记。
onclick：当单击元素时，执行动作。
onmouseover：当鼠标放上时，执行动作。
onmouseout：当鼠标称出后，执行动作。
onscroll：当拖动滚动条时，执行动作。只能用于滚动条。
onsubmit：当单击提交按钮时，执行动作。只能用于<form>标记。
onfocus：当文本框获的焦点时，执行动作。
onblur：当文本框失去焦点时(把光标从文本框中移走)，执行动作。
onchange：当内容改变时(常用下拉列表)，执行动作。
……
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任，函数不会在事件发生前被执行！
设置事件
为一元素添加事件属性，常用的有四种方式：
①<input type=”text” name=”username” onclick=”函数名称()” />
function 函数名称(){this[window]}
说明：
前面我们一直用的是这种方式添加属性。
这里的“onclick”其实是标记元素的事件属性，不是元素对象的事件属性。元素对象的事件属性，与HTML标记的事件属性一一对应，只是JS中事件属性要全小写。HTML中的事件属性不分大小写。
注意：函数里的this指的window对象。
②<input type=”text” name=”username” onclick=”过程代码var a=10;var b=20;alert(123);this[itnode]” />
说明：一般不推荐这样写，仅限代码少的时候可以不用写到函数里。
注意：这里的this指的是当前节点本身。
③itnode.onclick = function(){this[itnode]}
说明：直接为元素对象的事件属性赋值。
注意：这里的this指的是当前节点本身（itnode）。
④itnode.onclick = 有名函数名称;
function 函数名称(){this[itnode]}
说明：同第三种方式是一样的。
注意：这里的this指的是当前节点本身（itnode）。
除了第二种方式，这三种方式用的都挺多。
取消一个事件：
itnode.onclick = null;