Event 对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
属性 | 此事件发生在何时... |
---|---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
鼠标 / 键盘属性
属性 | 描述 |
---|---|
altKey | 返回当事件被触发时,"ALT" 是否被按下。 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
ctrlKey | 返回当事件被触发时,"CTRL" 键是否被按下。 |
metaKey | 返回当事件被触发时,"meta" 键是否被按下。 |
relatedTarget | 返回与事件的目标节点相关的节点。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 |
绑定方式
绑定事件的三种方式:
a.直接标签绑定 onclick='func();'
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 第一种绑定方式 2 <input type='button' onclick='ClickOn(this)'/> 3 <script> 4 function ClickOn(self){ 5 // self 当前点击的标签 6 } 7 </script>
b.先获取DOM对象,然后再进行绑定;
var obj = document.getElementById('XX').onclick
var obj = document.getElementById('XX').onfocus
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <input type='button'/> 2 <script> 3 document.getElementsByTagName('input').onclick=function(){ 4 // this代指当前点击的标签 5 } 6 </script>
两种绑定方式不同,this的传入方式也不同。
this,当前触发事件的标签。-->谁调用这个函数,this就指向谁.
c.第三种绑定方法:通过addEventListener方法对一个DOM对象绑定多个同样的事件。
语法:element.addEventListener(event, function, useCapture)
实例1:用第二种绑定方法对一个DOM对象绑定两个onclick事件。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.onclick=function(){ 21 console.log('mydiv'); 22 } 23 mydiv.onclick=function(){ 24 console.log('append2'); 25 } 26 </script> 27 28 </body> 29 </html>
解析:
上面的代码中,第二个function将第一个function进行了覆盖,所以在调用时返回的仅仅是“append2”,未能实现上面要求的对一个DOM对象绑定两个同样的事件。
我们通过第三种绑定方式可以进行实现,下面是实现的案例。
实例2:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.addEventListener('click',function(){console.log(1)},false); 21 mydiv.addEventListener('click',function(){console.log(2)},false); 22 </script> 23 24 </body> 25 </html>
通过上面的实例,我们成功实现了对一个DOM对象绑定了两个同一个事件。
Q:element.addEventListener(event, function, useCapture)中useCapture指的是什么?
在W3C中标准模型中,事件分为捕获和冒泡。useCapture中是布尔值(true 或 false),分别代表的是:
-
-
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
-
实例1:冒泡阶段。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 background-color:red; 9 980px; 10 height:500px; 11 position:relative; 12 font-size: 38px; 13 } 14 #content{ 15 background-color:green; 16 400px; 17 height:250px; 18 position:absolute; 19 top:100px; 20 left:300px; 21 font-size:38px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="main"> main 27 <div id="content"> 28 content 29 </div> 30 31 </div> 32 <script> 33 var main = document.getElementById('main'); 34 var content = document.getElementById('content'); 35 main.addEventListener('click',function(){console.log(main)},false) 36 content.addEventListener('click',function(){console.log(content)},false) 37 38 </script> 39 40 </body> 41 </html>
从上面执行返回的结果来看,在冒泡阶段执行的顺序,是先抓取最内部的content,再逐层抓取外层的main。第二步,仅click main的区域,与content内容不交叉,因此仅返回main的内容。
实例2:捕获阶段。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 background-color:red; 9 980px; 10 height:500px; 11 position:relative; 12 font-size: 38px; 13 } 14 #content{ 15 background-color:green; 16 400px; 17 height:250px; 18 position:absolute; 19 top:100px; 20 left:300px; 21 font-size:38px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="main"> main 27 <div id="content"> 28 content 29 </div> 30 31 </div> 32 <script> 33 var main = document.getElementById('main'); 34 var content = document.getElementById('content'); 35 main.addEventListener('click',function(){console.log(main)},true) 36 content.addEventListener('click',function(){console.log(content)},true) 37 38 </script> 39 40 </body> 41 </html>
从上面执行返回的结果来看,在捕获阶段执行的顺序,是先抓取最外部的main,再逐层抓取内层的content。第二步,仅click main的区域,与content内容不交叉,因此仅返回main的内容。
Q:如何实现 行为、样式和结构相分离的页面?
答:用DOM 1的方式去实现页面,并且推荐在工作和项目中使用DOM 1。更易维护更易检查。
下面我们通过用DOM 0和 DOM 1 写的不同的实例来比较区分两者的区别:
实例1:DOM 0
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1" onclick="t1();"> 16 我是DOM 0样式 17 </div> 18 <script> 19 function t1(){ 20 var tag = document.getElementById('i1'); 21 console.log(tag); 22 } 23 </script> 24 25 </body> 26 </html>
实例2:DOM 1
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color:red; 9 300px; 10 height:400px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1"> 16 我是DOM 0样式 17 </div> 18 <script> 19 var mydiv=document.getElementById('i1'); 20 mydiv.onclick=function(){ 21 console.log('mydiv'); 22 } 23 </script> 24 25 </body> 26 </html>
实例3:鼠标移到表格上整行变色,移除则恢复;DOM 0实现方式。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 border:1px; 9 300px; 10 11 } 12 </style> 13 </head> 14 <body> 15 <table> 16 <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr> 17 <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr> 18 <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr> 19 </table> 20 <script> 21 function t1(n){ 22 var myTrs = document.getElementsByTagName('tr')[n]; 23 myTrs.style.backgroundColor='red'; 24 } 25 function t2(n){ 26 var myTrs = document.getElementsByTagName('tr')[n]; 27 myTrs.style.backgroundColor=''; 28 } 29 </script> 30 31 </body> 32 </html>
实例4:鼠标移到表格上整行变色,移除则恢复;DOM 1实现方式。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 border:1px; 9 300px; 10 11 } 12 </style> 13 </head> 14 <body> 15 <table> 16 <tr><td>1</td><td>2</td><td>3</td></tr> 17 <tr><td>1</td><td>2</td><td>3</td></tr> 18 <tr><td>1</td><td>2</td><td>3</td></tr> 19 </table> 20 <script> 21 var myTrs=document.getElementsByTagName('tr'); 22 for(var i=0;i<myTrs.length;i++){ 23 myTrs[i].onmouseover=function(){ 24 this.style.backgroundColor='red'; 25 } 26 myTrs[i].onmouseout=function(){ 27 this.style.backgroundColor=''; 28 } 29 } 30 </script> 31 32 </body> 33 </html>