08-js的事件机制学习.html
Posted 胡辣汤王子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08-js的事件机制学习.html相关的知识，希望对你有一定的参考价值。
部分一：
<html> <head> <title>js的事件机制学习1</title> <meta charset="UTF-8"/> <!-- js的事件机制： 解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。 作用：主要是结合js的函数来使用。 内容: 1、单双击事件 单击：onclick 当鼠标单击的时候会触发 双击：ondblclick 当鼠标双击的时候会被触发 2、鼠标事件 onmouseover 当鼠标悬停在某个HTML元素上的时候触发 onmousemove 当鼠标在某个HTML元素上移动的时候触发 onmouseout 当鼠标在某个HTML元素上移出的时候触发 3、键盘事件 onkeyup 当键盘在某个HTML元素上弹起的时候触发 onkeydown 当键盘在某个HTML元素上下压的时候触发 4、焦点事件 onfocus 当某个HTML元素获取焦点的时候触发 onblur 当某个HTML元素失去焦点的时候触发 5、页面加载事件 onload 当页面加载成功后触发。 注意: js中添加事件的第一种方式： 在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。 js中的事件只有在当前HTML元素上有效。 一个HTML元素可以添加多个不同的事件。 一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔 --> <!--声明js代码域--> <script type="text/javascript"> /*声明js函数*/ //单击事件 function testOnclick(){ alert("我是单击"); } //测试双击 function testOndblclick(){ alert("我是双击"); } //鼠标事件 function testOnmouseover(){ alert("我是鼠标悬停事件"); } function testOnmousemove(){ alert("我被移动了"); } function testOnmouseout(){ alert("我被移出了"); } //键盘事件 function testOnkeyup(){ alert("我是键盘弹起事件"); } function testOnkeydown(){ alert("我是键盘按下事件"); } //焦点事件 function testOnfocus(){ document.getElementById("showdiv").innerHTML="哈哈"; alert("我是获取焦点事件"); } function testOnblur(){ alert("我是失去焦点事件"); } //页面加载 function testOnload(){ alert("我是页面加载事件"); } //测试 function test(){ alert("测试一个事件的多个函数执行"); } </script> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } </style> </head> <body onload="testOnload()"> <h3>js的事件机制学习1</h3> <hr /> <input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" /> <input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" /> <hr /> <br /><br /> <div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()"> </div> <hr /> 键盘事件学习： <br /> 键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br /> 键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/> <hr /> 焦点事件学习：<br /> 获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br /> 失去焦点： <input type="text" name="" id="" value="" onblur="testOnblur();"/> </body> </html>
部分二：
<html>
<head>
<title>js的事件机制二</title>
<meta charset="UTF-8"/>
<!--
js的事件机制学习2：
1、给合适的HTML标签添加合适的事件
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。
2、给HTML元素添加多个事件时，注意事件之间的冲突
举个栗子：单击和双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断
当事件所监听的函数的将返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能
4、超链接调用js函数
<a href="javascript:函数名()">调用js函数</a>
-->
<script type="text/javascript">
//值改变事件
function testOnchange(){
alert("我被改变了");
}
//单击事件
function testOnclick(){
alert("今天天气真好，不冷不热，贼适合学习");
}
//双击事件
function testOndblclick(){
alert("老师说的对");
}
//事件的阻断
function testA(){
alert("事件的阻断");
return true;
}
//超链接调用js函数
function testHref(){
alert("我是超链接调用");
}
</script>
</head>
<body>
<h3>js的事件机制二</h3>
<hr />
值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br /><br />
<select name="" id="" onchange="testOnchange();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<hr />
事件的冲突：<br />
<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<hr />
事件的阻断：<br />
<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
<hr />
超链接调用js函数:
<a href="javascript:testHref()">调用js函数</a>
</body>
</html>
以上是关于08-js的事件机制学习.html的主要内容，如果未能解决你的问题，请参考以下文章