HTML DOM onreset事件;清空表单时触发的事件

HTML DOM onreset事件;清空表单时触发的事件

清空表单时触发onreset事件。

onreset事件的语法
语法
HTML文档中： <element onreset="myScript">
JavaScript文档中： object.onreset=function(){myScript};
JavaScript文档中,使用addEventListener()方法： object.addEventListener("reset", myScript);
注：IE8浏览器及之前版本不支持addEventListener()方法
技术细节
Bubbles： 是
是否可撤销： 是
事件类型： 事件
支持的HTML元素： form元素、 keygen元素
DOM版本 2

使用例1 (HTML文档中)

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>点击清空按钮，触发onreset事件</p>

<form onreset="myFc()">

姓名: <input type="text">

<input type="reset" value="清空">

</form>

<p id="demo"></p>

<script>

function myFc() {

document.getElementById("demo").innerHTML = "表单清空了";

}

</script>

</body>

</html>

使用例2 (JavaScript中使用)

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>点击清空按钮，触发onreset事件</p>

<form id="myF">

姓名: <input type="text">

<input type="reset" value="清空">

</form>

<p id="demo"></p>

<script>

document.getElementById("myF").onreset = function() {myFc()};

function myFc() {

document.getElementById("demo").innerHTML = "表单清空了";

}

</script>

</body>

</html>

使用例3 (JavaScript中使用addEventListener()方法)

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>点击清空按钮，触发onreset事件</p>

<form id="myF">

姓名: <input type="text">

<input type="reset" value="清空">

</form>

<p id="demo"></p>

<script>

document.getElementById("myF").addEventListener("reset", myFc);

function myFc() {

document.getElementById("demo").innerHTML = "表单清空了";

}

</script>

</body>

</html>

不同浏览器的对应情况

事件          
onreset yes yes yes yes yes

关联内容

posted @ 2017-01-14 15:34  天涯海角路  阅读(908)  评论(0)    收藏  举报