【六六互联】长期出售【美国抗投诉服务器】【欧洲抗投诉服务器】【亚洲抗投诉服务器】

DOM事件

JavaScript 使我们有能力创建动态页面

    JavaScript 使我们有能力创建动态页面。事件是可以JavaScript 侦测到的行为。 网页中的每个元素可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数。

1.事件

  1. 1)   事件是文档或者浏览器窗口中发生的,特定的交互瞬间。

  2. 2)   事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。

  3. 3)   事件是javaScript和DOM之间交互的桥梁。

    你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。

2.事件流

    事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。

    事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流(如图6-9两种事件流)。

    冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

    捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

   事件捕获的思想就是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

 

<!DOCTYPE html>

 

<html>

 

<head>

 

     <meta charset="UTF-8">

 

     <title></title>

 

</head>

 

<body>

 

<div id="myDiv">Click me!</div>

 

</body>

 

</html>

 

上面这段html代码中,单击了页面中的<div>元素,

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

JavaScript 使我们有能力创建动态页面

JavaScript 使我们有能力创建动态页面

图5-11两种事件流

3.事件句柄

    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

 
 

用户退出页面。

 

    onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。 

 

<!DOCTYPE html>

 

<html>

 

<body onload="checkCookies()">

 

<script>

 

function checkCookies(){

 

if (navigator.cookieEnabled==true){

 

    alert("已启用  cookie")

 

    }

 

else{

 

    alert("未启用  cookie")

 

    }

 

}

 

</script>

 

<p>提示框会告诉你,浏览器是否已启用 cookie。</p>

 

</body>

 

</html>

 

onchange事件常结合对输入字段的验证来使用。下面是一个如何使用onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

 

<!DOCTYPE  html>

 

<html>

 

<head>

 

<script>

 

     function myFunction(){

 

       var  x=document.getElementById("fname");

 

       x.value=x.value.toUpperCase();

 

     }

 

</script>

 

</head>

 

<body>

 

请输入英文字符:<input type="text" id="fname" onchange="myFunction()">

 

<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

 

</body>

 

</html>

 

    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 

<!DOCTYPE  html>

 

<html>

 

<body>

 

<div  onmouseover="mOver(this)" onmouseout="mOut(this)"

 

style="background:green;width:120px;height:20px;padding:40px;color:#ffffff;">

 

      把鼠标移到上面

 

</div>

 

<script>

 

function mOver(obj){

 

obj.innerHTML="谢谢"

 

}

 

function mOut(obj){

 

obj.innerHTML="把鼠标移到上面"

 

}

 

</script>

 

</body>

 

</html>