持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
JavaScript事件
1.什么是事件
事件是可以被 JavaScript 侦测到的行为，例如，在用户点击某按钮时产生一个事件，然后去执行某些操作。 事件是指 HTML 元素在状态改变、操作鼠标或键盘时触发的动作。包括：状态改变事件、鼠标事件、键盘事件。
2.事件三要素
1.事件源：触发事件的元素，即这个事件发生在哪个元素上面。 2.事件类型：指具体是什么事件，例如 click 点击事件。 3.事件处理程序：事件触发后要执行的 JavaScript 代码，一般写在函数里面，这个函数叫事件处理函数。 注：事件类型又叫事件名，分为两种写法，如onclick和click，分别用于不同的场合，将在事件的绑定中介绍。
<body>
<button id="btnId2">猫二号</button>
<script>
/* 猫二号 */
var btn2 = document.getElementById('btnId2'); //1.获取事件源：“猫二号”按钮。
btn2.onclick = function() { //2.绑定事件，即将事件类型(鼠标点击(onclick))绑定到事件源上。
alert('捉老鼠二号'); //3.编写事件处理程序：弹出一个警告框。
}
</script>
</body>
<body>
<button id="btnId" onclick="javascript:catchFunc()">猫</button>
<button id="btnId2">猫二号</button>
<button id="btnId3">猫三号</button>
<button id="btnId4">猫四号</button>
<button id="btnId5">猫五号</button>
<script>
/* 猫 */
function catchFunc() {
alert('捉老鼠');
}
/* 猫二号 */
var btn2 = document.getElementById('btnId2'); //1.获取事件源：“猫二号”按钮。
btn2.onclick = function() { //2.绑定事件，即将事件类型(鼠标点击(onclick))绑定到事件源上。
alert('捉老鼠二号'); //3.编写事件处理程序：弹出一个警告框。
}
/* 猫三号 */
var btn3 = document.getElementById('btnId3');
btn3.onclick = catchFunc; //catchFunc是函数名
// btn3['onclick'] = catchFunc; //catchFunc是函数名
/* 猫四号 *//* IE9及其以上才支持 */
var btn4 = document.getElementById('btnId4');
btn4.addEventListener('click', function() { //注意这里的事件类型(鼠标点击('click'))。
alert('捉老鼠四号');
})
/* 猫五号 *//* IE8及其以下才支持 */
var btn5 = document.getElementById('btnId5');
btn5.attacheEvent('onclick', function() { //注意这里的事件类型(鼠标点击('onclick'))。
alert('捉老鼠五号');
})
</script>
</body>
3.事件的绑定
事件的绑定：即给元素添加事件，又称为绑定事件或注册事件。有以下3种方式：
1.行内绑定（以属性的形式写在元素里面）
事件名(带on) = "javascript:函数名(参数)" //一般情况下“javascript:”可省，参数根据实际情况确定是否省略。
<a href="javascript:alert('Hello JavaScript')">点一下试试</a>
<button id="btnId" onclick="javascript:catchFunc()">猫</button>
注：同一个元素同一个事件只能设置—个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。
例：以下面的方式(形式1或形式2)对这里的按钮再进行一次事件绑定，那么此处元素里的事件将被覆盖。
2.动态绑定（在JavaScript代码中绑定）
1.元素对象.事件名(带on) = 匿名函数; 2.元素对象.事件名(带on) = 函数名; 或 元素对象['事件名(带on)'] = 函数名; //函数单独写
/* 猫二号 */
var btn2 = document.getElementById('btnId2'); //1.获取事件源：“猫二号”按钮。
btn2.onclick = function() { //2.绑定事件，即将事件类型(鼠标点击(onclick))绑定到事件源上。
alert('捉老鼠二号'); //3.编写事件处理程序：弹出一个警告框。
};
/* 猫三号 */
var btn3 = document.getElementById('btnId3');
btn3.onclick = catchFunc; //catchFunc是函数名
// btn3['onclick'] = catchFunc; //catchFunc是函数名
注：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。
例：以此方式(形式1或形式2)对这里的按钮再进行一次事件绑定，那么前一次绑定的事件将被覆盖。
3.事件监听（在JavaScript代码中以监听的方式绑定）
1.元素对象.addEventListener('事件名(不带on)', 匿名函数); //IE9及其以上才支持 2.元素对象.attacheEvent('事件名(带on)', 匿名函数); //IE8及其以下才支持
以上两种也可分别写成 1.元素对象.addEventListener('事件名(不带on)', 函数名); //函数单独写//IE9及其以上才支持 2.元素对象.attacheEvent('事件名(带on)', 函数名); //函数单独写//IE8及其以下才支持
注意，addEventListener方法中还有第三个参数，是用来标识事件流的，值为true或false，省略时默认为false。
/* 猫四号 *//* IE9及其以上才支持 */
var btn4 = document.getElementById('btnId4');
btn4.addEventListener('click', function() { //注意这里的事件类型(鼠标点击('click'))。
alert('捉老鼠四号');
})
//btn4.addEventListener('click', catchFunc);
/* 猫五号 *//* IE8及其以下才支持 */
var btn5 = document.getElementById('btnId5');
btn5.attacheEvent('onclick', function() { //注意这里的事件类型(鼠标点击('onclick'))。
alert('捉老鼠五号');
})
//btn5.attacheEvent('onclick',catchFunc);
注：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。(IE8及其以下的按注册顺序相反顺序执行)
例：以此方式(根据浏览器选择合适的)对这里的按钮再进行一次事件绑定，那么将依次执行这两次绑定的事件。
事件绑定兼容性解决方案：
/*封装一个函数，在函数中判断浏览器是否支持addEventListener方法*/
//element-事件源；eventName-事件类型；fn-事件处理程序。
function addEventListener(element, eventName, fn){
if (element.addEventListener){ //IE9及其以上返回true
element.addEventListener(eventName，fn);
} else if (element.attachEvent){ //IE8及其以下返回true
element.attachEvent ('on' + eventName, fn);
} else {
element['on' + eventName] = fn; //比如element['onclick'] = fn;
}
}
4.事件的解绑
事件的解绑：即删除在元素上添加的事件，又称为解绑事件或删除事件。有以下2种方式：
1.传统注册方式的解绑
传统注册方式指上面的“行内绑定（以属性的形式写在元素里面）”和“2.动态绑定（在JavaScript代码中绑定）”。 元素对象.事件名(带on) = null; 或 元素对象['事件名(带on)'] =null;
/* 1.传统注册方式的解绑 */
divs[0].onclick = function() {
alert('您将解除第一个div上绑定的鼠标点击事件');
divs[0].onclick = null;
// divs[0]['onclick'] = null;
}
<body>
<div>第一个div</div><br>
<div>第二个div</div><br>
<div>第三个div</div><br>
<script>
var divs = document.querySelectorAll('div');
/* 1.传统注册方式的解绑 */
divs[0].onclick = function() {
alert('您将解除第一个div上绑定的鼠标点击事件');
divs[0].onclick = null;
// divs[0]['onclick'] = null;
}
/* 2.监听注册方式的解绑 *//* IE9及其以上才支持 */
divs[1].addEventListener('click', fn1);
function fn1() {
alert('您将解除第二个div上绑定的鼠标点击事件');
divs[1].removeEventListener('click', fn1);
}
/* 2.监听注册方式的解绑 *//* IE8及其以下才支持 */
divs[2].attachEvent('onclick', fn2);
function fn2() {
alert(33);
divs[2].detachEvent('onclick', fn2);
}
</script>
</body>
2.监听注册方式的解绑
监听注册方式指上面的“3.在JavaScript代码中以监听的方式绑定”。 1.元素对象.removeEventListener('事件名(不带on)', 函数名); //IE9及其以上才支持 2.元素对象.detacheEvent('事件名(带on)', 函数名); //IE8及其以下才支持
/* 2.监听注册方式的解绑 *//* IE9及其以上才支持 */
divs[1].addEventListener('click', fn1);
function fn1() {
alert('您将解除第二个div上绑定的鼠标点击事件');
divs[1].removeEventListener('click', fn1);
}
/* 2.监听注册方式的解绑 *//* IE8及其以下才支持 */
divs[2].attachEvent('onclick', fn2);
function fn2() {
alert(33);
divs[2].detachEvent('onclick', fn2);
}
事件解绑兼容性解决方案：
/*封装一个函数，在函数中判断浏览器是否支持removeEventListener方法*/
function removeEventListener(element, eventName，fn){
if (element.removeEventListener) { //IE9及其以上返回true
element.removeEventListener(eventName，fn);
}else if (element.detachEvent){ //IE8及其以下返回true
element.detachEvent('on' + eventName, fn) ;
} else {
element ['on' + eventName] = null; //比如element['onclick'] = null;
}
}
