您的位置：首页 > Web前端 > JavaScript

10.HTML5 JavaScript 事件

2014-01-27 17:58 246 查看

1.基本事件模型

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
属性值描述
onload脚本当文档被载入时执行脚本
onunload脚本当文档被卸下时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。
属性值描述
onchange脚本当元素改变时执行脚本
onsubmit脚本当表单被提交时执行脚本
onreset脚本当表单被重置时执行脚本
onselect脚本当元素被选取时执行脚本
onblur脚本当元素失去焦点时执行脚本
onfocus脚本当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素：
属性值描述
onabort脚本当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性值描述
onkeydown脚本当键盘被按下时执行脚本
onkeypress脚本当键盘被按下后又松开时执行脚本
onkeyup脚本当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性值描述
onclick脚本当鼠标被单击时执行脚本
ondblclick脚本当鼠标被双击时执行脚本
onmousedown脚本当鼠标按钮被按下时执行脚本
onmousemove脚本当鼠标指针移动时执行脚本
onmouseout脚本当鼠标指针移出某元素时执行脚本
onmouseover脚本当鼠标指针悬停于某元素之上时执行脚本
onmouseup脚本当鼠标按钮被松开时执行脚本
2.this关键字和事件处理函数
<body>
<input id="bn1" type="button" value="按钮1" onclick="alert(this.value);"/>//按钮1
<input id="bn2" type="button" value="按钮2" />
<input id="bn3" type="button" value="按钮3" />
<script type="text/javascript">
var test = function()
{
alert(this.value);
}
document.getElementById("bn2").onclick = test;//按钮2

var p =
{
value: 'p对象',
info: function() { alert(this.value); }
}
document.getElementById("bn3").onclick = p.info;//按钮3
p.info();//p对象
</script>
</body>
当用户单击按钮时，所触发的事件处理函数中的this默认是引用到绑定该事件处理函数，如果我们确实需要将this引用到原有的js对象，则可以“”
var p =
{
value: 'p对象',
info: function() { alert(this.value); }
}	    //p对象
document.getElementById("bn3").onclick = function (){p.info();}
.
3.使用返回值修改默认行为
<a href="www.baidu.com" onclick="return false;" >超链接</a>

<a href="www.baidu.com" onclick="return confirm('确定跳转？Y/N');" >超链接</a>
当事件处理函数返回false时HTML元素的行为
click对于单选框、复选框将阻止选择该项；对于表单的"提交"按钮，将阻止表单提交；对于表单的“重置”按钮，将阻止表单重置；对于超链接，阻止页面导航。
dragdrop取消拖放事件。
keydown取消“按下键”事件
<body>
<div>
<h2>数据校验表单</h2>
<form method="post" onsubmit="return check(this);" id="register" name="register" action="#">
密  码：<input type="password" name="pass" /><br />
电  邮：<input type="text" name="email" /><br />
<input type="submit" value="提交" />
</form>
</div>
<script type="text/javascript">
// 为字符串增加trim方法，使用正则表达式截取空格
String.prototype.trim = function()
{
return this.replace( /^\s*/, "" ).replace( /\s*$/, "" );
}
// 负责处理表单submit事件的函数
var check = function()
{
// 访问页面中第一个表单
var form = document.forms[0];
// 错误字符串
var errStr = "";
// 当电子邮件为空
if (form.email.value == null
|| form.email.value.trim() == "")
{
errStr += "\n电子邮件不能为空!";
form.email.focus();
}
// 使用正则表达式校验电子邮件的格式是否正确
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
.test(form.email.value.trim()))
{
errStr += "\n电子邮件的格式不正确!";
form.email.focus();
}
if( errStr != "" )
{
// 弹出出错信息
alert(errStr);
// 返回false，用于阻止表单提交
return false;
}
}
</script>
</body>
4.代码中触发事件var form = document.forms[0];form.submit();
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 脚本触发事件 </title>
</head>
<body>
<h2>脚本触发事件</h2>
<form method="post" name="register" action="http://www.crazyit.org">
用户名：<input type="text" name="user" /><br />
密  码：<input type="password" name="pass" /><br />
电  邮：<input type="text" name="email" /><br />
<input type="button" id="regist" value="提交"/>
</form>
<script type="text/javascript">
// 为字符串增加trim方法，使用正则表达式截取空格
String.prototype.trim = function()
{
return this.replace( /^\s*/, "" ).replace( /\s*$/, "" );
}
var check = function ()
{
// 访问页面中第一个表单
var form = document.forms[0];
var errStr = "";
if (form.user.value == null  || form.user.value.trim() == "")
{
errStr += "\n用户名不能为空!";
form.user.focus();
}
if (form.pass.value == null  || form.pass.value.trim() == "")
{
errStr += "\n密码不能为空!";
form.pass.focus();
}
if(errStr != "")
{
alert(errStr);
}
else
{
form.submit();
}
}
document.getElementById("regist").onclick = check;
</script>
</body>
</html>
5.HTML元素触发事件的方法
click<input type="checkbox"/><input type="button"/><input type="reset"/><input type="submit"/><input type="radio"/><a/>
blur<select>、<input>、<textarea>、<a>
focus<select>、<input>、<textarea>、<a>
select<input type="file"/>、<input type="text"/>、<input type="password"/>、
submit<form>
reset<form>
6.奇葩的IE事件模型6.1 使用script for绑定
<body>
<!-- 简单的按钮 -->
<input type="button" id="bn1" name="bn1" value="单击我" />
<!-- 使用script for将下面脚本绑定到bn1按钮的onclick事件 -->
<script for="bn1" event="onclick" type="text/javascript">
alert("您单击了我");
</script>
</body>
6.2 attachEvent绑定
<input type="button" id="bn1" name="bn1" value="单击我" />
<script type="text/javascript">
var test = function()
{
alert("单击按钮");
}
//使用attachEvent执行事件绑定
document.getElementById("bn1").attachEvent("onclick" , test);
</script>
<body>
<input type="button" id="bn1" name="bn1" value="单击我" />
<script type="text/javascript">
var test = function()
{
alert("单击按钮");
}
var haha = function()
{
alert("haha函数也被触发");
}
// 使用attachEvent绑定事件处理函数
document.getElementById("bn1").attachEvent("onclick" , test);
// 使用attachEvent绑定事件处理函数
document.getElementById("bn1").attachEvent("onclick" , haha);
</script>
6.3 访问事件对象IE的事件对象是一个隐式可用的全局对象：event。当一个事件子啊浏览器中发生时，浏览器创建一个隐式可用的事件对象，js通过event就可以访问该对象。IE中的事件对象有如下常用属性：type：事件类型。srcElement：发生事件的HTML元素。clientXclientYoffsetXoffsetYbutton：返回发生鼠标事件时，返回的鼠标键。keyCodealtKey：返回boolean。ctrlKey：返回boolean。shiftKey：返回boolean。cancelBubble：阻止事件冒泡。returnValue：返回事件处理函数的返回值。fromElement：对于mouseover和mouseout有效，返回鼠标移除的HTML元素。toElement：对mouseover和mouseout有效，返回鼠标移入的HTML元素。树结构Demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.root {
margin-left: 15pt;
text-indent: -28pt;
}
.root_child{
margin-left: 24pt;
text-indent: -36pt;
}
.root_child_detail{
margin-left: 38pt;
text-indent: -50pt;
}
.message{
margin-left: 38pt;
text-indent: -50pt;
}
.passage{
margin-left: 24pt;
text-indent: -36pt;
}
</style>
<script type="text/javascript">
/*
div#root{img#rootImg,text}
div#rootDetails{
div#childA{img#childAImg,text},
div#childADetails{
div.message{img.message,text},
div.message{img.message,text}
}
}
*/
var clickHandler=function(){
var targetId;
var targetElement;
var srcElement=event.srcElement;
console.log("事件源"+srcElement);
//div#root   div#childADetails
if(srcElement.className.substr(0,4)=="root"){
/********************节点显示***********************/
//img#childAImg
if(srcElement.id.indexOf("Img")>0){
targetId=srcElement.id.substr(0,5)+"Details";
}else{//div#childA
targetId=srcElement.id +"Details";
}

targetElement = document.getElementById(targetId);
if(targetElement){
if(targetElement.style.display=="none"){
targetElement.style.display="";
}else{
targetElement.style.display="none";
}
}

/********************节点图片显示*************************/
if(srcElement.id.indexOf("Img")>0){
targetId=srcElement.id;
}else{
targetId = srcElement.id + "Img";
}

targetElement = document.getElementById(targetId);
if(targetElement.src.indexOf("plus")>=0){
targetElement.src="image/minus.gif";
}else{
targetElement.src="image/plus.gif";
}
}
}
document.onclick=clickHandler;
</script>
</head>
<body>
<div id="root" class="root">
<img id="rootImg" class="root" src="image/plus.gif" />
我的电脑
</div>

<div id="rootDetails" style="display: none;">
<!-- A -->
<div id="childA" class="root_child">
<img id="childAImg" class="root_child" src="image/plus.gif" />
A块
</div>
<div id="childADetails" style="display: none;">
<div class="message">
<img class="message" src="image/passage.gif" />
文件一
</div>
<div class="message">
<img class="message" src="image/passage.gif" />
文件二
</div>
</div>

<!-- B -->
<div id="childB" class="root_child">
<img id="childBImg" class="root_child" src="image/plus.gif" />
B块
</div>
<div id="childBDetails" style="display: none;">
<div class="message">
<img class="message" src="image/passage.gif" />
文件一
</div>
<div class="message">
<img class="message" src="image/passage.gif" />
文件二
</div>
</div>

<!-- C -->
<div id="childC" class="root_child">
<img id="childCImg" class="root_child" src="image/plus.gif" />
C块
</div>
<div id="childCDetails" style="display: none;">
<div class="message">
<img class="message" src="image/passage.gif" />
文件一
</div>
<div class="message">
<img class="message" src="image/passage.gif" />
文件二
</div>
</div>

<div class="passage">
<img class="passage" src="image/passage.gif" />文件七</div>
</div>
</div>
</body>
</html>
<body>
<!-- 绑定事件处理器时，将event作为参数传入 -->
<button onclick="clickHandler(event);">按钮</button>
<script type="text/javascript">
var clickHandler = function(evt)
{
// evt参数由系统传入，evt可访问事件对象
alert(evt.srcElement.innerHTML);
}
</script>
</body>
6.4 事件冒泡
<body onclick="gotClick('body元素');">
<table onclick="gotClick('table元素');">
<tr onclick="gotClick('tr元素');">
<td onclick="gotClick('td元素');">
<p onclick="gotClick('p元素');">
<input type="button" value="单击我" onclick="gotClick('按钮');" />
</p>
</td>
</tr>
</table>
<hr/>
<div id="results"></div>
<script type="text/javascript">
var gotClick = function(who)
{
document.getElementById("results").innerHTML += who + " 被单击了 <br />";
}
</script>
</body>
按钮 被单击了
p元素 被单击了td元素 被单击了tr元素 被单击了table元素 被单击了body元素 被单击了body元素 被单击了body元素 被单击了
取消冒泡<body onclick="gotClick('body元素');event.cancelBubble=true;">...</body>document.getElementById("results").innerHTML += who + " 被单击了 <br />";event.cancelBubble=true;6.5 重定向事件Internet Explorer的事件重定向不仅可以将事件重定向到DOM树上的父节点，也可以转发到自己的子节点，甚至可以转发到根本不在DOM树上的其他节点。target.fireEvent（String eventType，Event event）document.getElementById("forward").fireEvent("onClick" ,event);
<!-- 整个DOM树都绑定了事件处理函数 -->
<body onclick="gotClick('body元素');">
<table onclick="gotClick('table元素');">
<tr onclick="gotClick('tr元素');">
<td onclick="gotClick('td元素');">
<p onclick="gotClick('p元素');">
<input type="button" value="单击我" onclick="gotClick('按钮');" />
</p>
</td>
</tr>
</table>
<input id="forward" type="button" value="被转发事件的按钮"  onclick="gotClick('被转发的按钮')" />

<div id="results"></div>
<script type="text/javascript">
var gotClick = function(who)
{
document.getElementById("results").innerHTML += who + " 被单击了 <br />";
event.cancelBubble = true;
document.getElementById("forward").fireEvent("onClick" , event);
}
</script>
</body>
按钮 被单击了被转发的按钮 被单击了被转发的按钮 被单击了被转发的按钮 被单击了被转发的按钮 被单击了被转发的按钮 被单击了被转发的按钮 被单击了
<!-- 整个DOM树都绑定了事件处理函数 -->
<body onclick="gotClick('body元素');">
<table onclick="gotClick('table元素');">
<tr onclick="gotClick('tr元素');">
<td onclick="gotClick('td元素');">
<p onclick="gotClick('p元素');">
<input type="button" value="单击我" onclick="gotClick('按钮');" />
</p>
</td>
</tr>
</table>
<input id="forward" type="button" value="被转发事件的按钮"  onclick="gotClick2('被转发的按钮')" />
<hr />
<div id="results"></div>
<script type="text/javascript">
var gotClick = function(who)
{
document.getElementById("results").innerHTML  += who + " 被单击了 <br />";
event.cancelBubble = true;
// 将事件重定向到id为forward的元素
document.getElementById("forward").fireEvent("onClick" , event);
}

// 用于处理“被转发事件的按钮”按钮的事件处理函数
var gotClick2 = function(who)
{
document.getElementById("results").innerHTML +=  who + " 被单击了 <br />";
event.cancelBubble = true;
}
</script>
</body>
按钮 被单击了被转发的按钮 被单击了
6.6 取消事件默认行为6.6.1 return false
<a href="www.baidu.com" onclick="return false;" >超链接</a>

<a href="www.baidu.com" onclick="return confirm('确定跳转？Y/N');" >超链接</a>
当事件处理函数返回false时HTML元素的行为
click对于单选框、复选框将阻止选择该项；对于表单的"提交"按钮，将阻止表单提交；对于表单的“重置”按钮，将阻止表单重置；对于超链接，阻止页面导航。
dragdrop取消拖放事件。
keydown取消“按下键”事件
6.6.2 event.returnValue=false;
<body><a id="wjc" href="http://www.crazyit.org">疯狂Java联盟</a><script type="text/javascript">var clickHandler = function(){var ok = confirm('是否转入疯狂Java联盟？');event.returnValue = ok;}document.getElementById("wjc").onclick=clickHandler;</script></body>
6.7 捕获鼠标事件IE事件模型的事件对象提供方法来捕获事件和释放捕获：target.setCapturetarget.releaseCapture
<body><!-- 导入JavaScript脚本文件 --><script type="javascript/text">var drag = function(target, event){// 定义开始拖动时的鼠标位置（相对window座标）var startX = event.clientX;var startY = event.clientY;// 定义将要被拖动元素的位置（相对于document座标）// 因为该target的position为absolutely，所以认为它基于的座标系是documentvar origX = target.offsetLeft;var origY = target.offsetTop;// 因为后面根据event的clientX、clientY来获取鼠标位置时，// 只能获取windows座标系的位置，所以需要计算window座标系 和document座标系的偏移。// 计算windows座标系和document座标系之间的偏移var deltaX = startX - origX;var deltaY = startY - origY;// 设置该元素直接捕获该事件target.setCapture();var moveHandler = function(){var evt = window.event; 		// 对于IE事件模型，获取事件对象// 将被拖动元素的位置移动到当前鼠标位置。// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。target.style.left = (evt.clientX - deltaX) + "px";target.style.top = (evt.clientY - deltaY) + "px";evt.cancelBubble=true;// 阻止事件冒泡}var upHandler = function(){var evt = window.event; // 对于IE事件模型，获取事件对象target.detachEvent("onlosecapture", upHandler);target.detachEvent("onmouseup", upHandler);target.detachEvent("onmousemove", moveHandler);target.releaseCapture();// 释放该对象的“事件捕获”evt.cancelBubble=true;// 阻止事件冒泡}target.attachEvent("onmousemove", moveHandler);// 为该元素鼠标移动时绑定事件处理器target.attachEvent("onmouseup", upHandler);// 为鼠标松开时绑定事件处理器target.attachEvent("onlosecapture", upHandler);// 将失去捕获事件当成鼠标松开处理。event.cancelBubble=true;// 阻止事件冒泡event.returnValue = false;}</script><!-- 定义被拖放的元素 --><div style="position:absolute; width:250px;  border:1px solid black;"><div style="background-color:#416ea5; width:250px;height:22px;cursor:move;"onmousedown="drag(this.parentNode, event);">可拖动标题</div><p>可被拖动的窗口</p><p>窗口内容</p></div><!-- 定义一个可拖动的图片 --><img src="image/logo.jpg" alt="按住Shift可拖动" style="position:absolute;"onmousedown="if (event.shiftKey) drag(this, event);" /></body>
7. DOM事件模型在进行js编程时，需要考虑两种编程模型：IE模型DOM模型，行业规范。7.1 绑定事件处理[b]7.1.1 IE模型：objTarget.attachEvent("eventType" , handler);  [/b][b]7.1.2 DOM提供的事件绑定方法：objTarget.addEventListener（"eventType",handler,captureFlag）[/b]eventType：事件类型，事件属性去掉"on"handler：captureFlag：true表示监听捕获阶段；false表示冒泡阶段。DOM提供的事件解绑方法：objTarget.removeEventListener（"eventType",handler,captureFlag）
<body><!-- 将测试的div元素 --><div id="test"><!-- div元素的子元素：按钮 --><input id="testbn" type="button" value="单击我" /></div><hr /><div id="results"> </div><script type="text/javascript">var gotClick1 = function(event){document.getElementById("results").innerHTML += "事件捕获阶段: " + event.currentTarget + "<br />";}function gotClick2(event){document.getElementById("results").innerHTML += "事件冒泡阶段：" + event.currentTarget + "<br />";}document.getElementById("testbn").addEventListener("click" , gotClick1 , true); // 为testbn按钮绑定事件处理函数（捕获阶段）document.getElementById("test").addEventListener("click" , gotClick1 , true); // 为test对象绑定事件处理函数（捕获阶段）document.getElementById("testbn").addEventListener("click" , gotClick2 , false); // 为testbn按钮绑定事件处理函数（冒泡阶段）document.getElementById("test").addEventListener("click" , gotClick2 , false);// 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。</script></body>
事件捕获阶段的两个函数先触发，先触发"div"元素；事件冒泡阶段的两个函数后触发，先触发"input"元素；7.2 访问事件对象event.target.innerHTML
<body><button id="a">按钮</button><script type="text/javascript">var clickHandler = function(evt){alert(evt.target.innerHTML);}document.getElementById("a").onclick = clickHandler;</script></body>
7.3 事件传播7.4 转发事件7.5 取消事件的默认行为7.6
<body onclick="gotClick('body元素');">
<table onclick="gotClick('table元素');">
<tr onclick="gotClick('tr元素');">
<td onclick="gotClick('td元素');">
<p onclick="gotClick('p元素');">
<input type="button" value="单击我" onclick="gotClick('按钮');" />
</p>
</td>
</tr>
</table>
<hr/>
<div id="results"></div>
<script type="text/javascript">
var gotClick = function(who)
{
document.getElementById("results").innerHTML += who + " 被单击了 <br />";
}
</script>
</body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航