<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单击事件 </title>
<script type="text/javascript">
function openwin(){
window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
</script>
</head>
<body>
<form>
<input name="点击我" type="button" value="点击我" onclick="openwin()"/>
</form>
</body>
</html>
2018-09-30
在<form>中和在<input>中关联onclick事件的函数openwin()还是有所区别的。为了方便说明，我修改了示例HTML程序，加入了2个<input type="button">。通过下面的代码说明区别：
一、在<form>中加入onclick属性
作用：在点击表单<form>范围内任意位置都会触发openwin()函数。
<script> <form onclick="openwin()"> <input type="button" value="确定1" /> <input type="button" value="确定2" /> </form> </script>
此时，无论点击哪个按键都会触发openwin()函数打开网页。甚至在两个按键中间的空白位置点击鼠标也会触发openwin()函数。因为，两个按键之间的空白位置也属于这个<form>的范围之内。
二、在<input>中加入onclick属性
作用：只有在点击对应的按键<input type="button">时才会触发openwin()函数。
<script> <form> <input type="button" value="确定1" onclick="openwin()" /> <input type="button" value="确定2" /> </form> </script>
此时，只有点击按键“确定1”才会触发openwin()函数打开网页，点击其他位置则无此效果。
举报
