js点击事件（click）的实现方法和（其他的事件对象）
一、3种实现方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js点击事件</title> </head> <body> <!-- 第三种方式--> <button id="btn" onclick="threeFn()">点我</button> <script type="text/javascript"> var btn = document.getElementById("btn"); // 第一种 通过点击事件 btn.onclick = function(){ alert("这是第一种点击方式"); } // 第二种 监听点击事件 btn.addEventListener('click', function(){ alert("这是第二种点击方式"); }) //btn.addEventListener('click', twoFn); function twoFn(){};
//通过函数名来引用外部函数
// 第三种 通过方法响应点击事件 function threeFn(){ alert("这是第三种点击方式"); } </script> </body> </html>
二、方式 ①、③ 一目了然，说明一下方式 ② :
document.addEventListener()，用于向文档添加事件句柄。
提示1：document.removeEventListener()，用来移除addEventListener()方法添加的事件句柄，不支持匿名添加的函数
提示2：使用 element.addEventListener()，方法为指定元素添加事件句柄
语法： document.addEventListener(event, function, useCapture);
event: 事件名称，以点击事件为例，不要使用“on”前缀，要用“click”来取代“onclick”。
function：事件触发后执行的函数
useCapture：ture（事件句柄在捕获阶段进行）/ false（可选，默认。事件句柄在冒泡阶段进行）
捕获事件：当父子div都有点击事件时，先执行父级事件
冒泡事件：先执行子级事件
浏览器支持：谷歌1.0，ie 9.0，火狐1.0，opera 7.0 起开始支持
为了兼容其他早版本的浏览器可以使用 attachEvent() 方法来添加事件句柄。
if (document.addEventListener) { //所有主流浏览器 document.addEventListener("click", myFunction); } else if (document.attachEvent) { // IE 8 及更早 IE 版本，opera 7 及更早版本 document.attachEvent("onclick", myFunction); }
三、其他事件对象
HTML DOM 事件
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。
下面说一下常用的鼠标事件和键盘事件。
鼠标事件
| 属性 | 描述 | DOM |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键时触发 | |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |
onmousemove 是鼠标在元素上移动时触发，且在元素上每移动一下就会触发一次。
onmouseover 是鼠标移入元素时触发一次，再次在元素上移动时不会触发，但是鼠标移入元素内的子元素时也会触发（冒泡）
onmouseenter 仅鼠标移入时，触发一次，且不冒泡
键盘事件
| 属性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某个键盘按键被按下。 | 2 |
| onkeypress | 某个键盘按键被按下。 | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
三者区别：
执行顺序：onkeydown–>onkeypress–>onkeyup
1. onkeydown：键盘一按下就触发的事件，键盘上任意键都会触发onkeydown()事件。捕获的keyCode不区分大小写
2. onkeypress：键盘一按下就触发的事件，同onkeydown（除去功能键，如：Esc,Shift,Ctrl..）区分大小写。
3. onkeyup：按键一松开就触发的事件。键盘上任意键都会触发onkeyup()事件。
特殊情况：
*三个事件都触发Enter键
*onkeydown和onkeyup同时存在，onkeyup不触发Fn。onkeyup单个触发
*三个事件同时存在时，alert只会弹出onkeydown和onkeypress
*只能在onkeydown事件中改变输入字符，如：event.keyCode=65;
*汉字拼音输入的过程只触发onkeydown和onkeyup
四：DOM 0 和 DOM 2
0 级 DOM
分2个： 一是 在标签内写onclick事件 （方法3）
二是 在 js 中写onclick= function(){ } 函数（方法1）
2级 DOM
1个：监听方法（方法2）
区别：
dom2不会覆盖会依次执行，dom 0 级会覆盖，执行最新事件。
dom0 和dom2 可以共存，不相互覆盖，dom 0 之前一定覆盖。
js内的点击事件（1）优先于标签内响应事件（3），点击事件和监听事件都要在页面加载后才可执行，比如把脚本放到body内容后面
0级dom为某个元素的同一行为绑定不同的方法在行内会分别执行，在<script>中会覆盖,也就是说标签内的响应事件是允许分别执行的，但是如果存在js内的同一行为事件，标签内的事件都会被覆盖掉。
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body> <p>单击按钮触发函数。</p> <button id="btn" onclick="myFunction();fun2()">点我</button> <p id="demo"></p> <script> document.getElementById("btn").onclick = function(){ alert("这是第1种点击方式"); } document.getElementById("btn").addEventListener('click', function(){ alert("这是第二种点击方式"); }) function myFunction(){ alert("这是第3种点击方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </body> </html>
结果：执行 document.getElementById("btn").onclick，执行document.getElementById("btn").addEventListener 。
// myFunction();fun2()；不执行
<!DOCTYPE html> <html> <body> <p>单击按钮触发函数。</p> <button id="btn" onclick="myFunction();fun2()">点我</button> <p id="demo"></p> <script> function myFunction(){ alert("这是第3种点击方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </body> </html>
结果：myFunction();fun2()；都执行
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <script> document.getElementById("btn").onclick = function(){ alert("这是第1种点击方式"); } document.getElementById("btn").addEventListener('click', function(){ alert("这是第二种点击方式"); }) function myFunction(){ alert("这是第3种点击方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </head> <body> <p>单击按钮触发函数。</p> <button id="btn" onclick="myFunction();fun2()">点我</button> <p id="demo"></p> </body> </html>
结果：myFunction();fun2()；执行，其他不执行.
