JavaScript-表单处理(1)

        终于开始了我的第一篇博文。记得我最早接触编程是在高中，当初我的表哥送了我一本JavaScript入门的书籍，着实没看明白。云里雾里的，就是标签才稍微看得懂。如今，在学习了JAVA、HTML、CSS后，再来看JavaScript的相关知识，感觉亲切了很多，也轻松了很多。

       从今天开始，我将记录我每天的学习。同时对一段时期的学习做出总结。今天学习JavaScript的表单处理。

    1.获取form元素

    html代码

   <form id="myform" name="yourform"></form>

       javascript代码

   window.addEventListener('load',function(){
	//var form = document.getElementById('myform');
	//alert(form);				//HTMLFormElement
	//var form = document.getElementsByTagName('form')[0];
	//alert(form);				//HTMLFormElement
	//var form = document.forms[0];	
	//alert(form);				//HTMLFormElement
	//var form = document.forms['yourform'];		//yourform是form表单的name属性
	//alert(form);				//HTMLFormElement
	//var form = document.yourform;					//yourform是form表单的name属性
	//alert(form);				//HTMLFormElement
   },false);

   2.form表单提交

      html代码

    <form id="myform" name="yourform">
    用户名:<input name='user' type="text" />
	<input type="submit" />
    <input id="subButton" type="button" value="点此提交" />
    </form>

       javascript代码

   window.addEventListener('load',function(){
	var form = document.getElementsByTagName('form')[0];
	form.addEventListener('submit',function(e){
		e.preventDefault();						//阻止提交
	});
	var subButton = document.getElementById('subButton');
	subButton.addEventListener('click',function(){
		form.submit();							//不能用subButton.submit.提交表单应该用form.submit
	});
	document.addEventListener('keydown',function(e){
		if(e.ctrlKey && e.keyCode===13){
			form.submit();						//利用键盘ctrl + Enter提交
		}
	},false);
   },false);

   3.附

   实现右键自定义事件

    html代码

    <ul id="menu">
    	<li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
    </ul>

   css代码

    #menu {
	width:70px;
	height:100px;
	background:#F0F;	
	position:absolute;
	display:none;
    }

    javascript代码

   window.addEventListener('load',function(){
	var menu = document.getElementById('menu');
	var clientX = 0;
	var clientY = 0;
	document.addEventListener('click',function(evt){		//单击事件
		preRi(evt,menu);
	},false);
	document.addEventListener('dblclick',function(evt){		//双击事件
		preRi(evt,menu);
	},false);
        },false);

    function preRi(evt,element){								//阻止右键弹出菜单,并弹出自定义菜单
	var button = evt.button;
	if(button === 2){										//value = 2表示鼠标右键按击
		preDef(evt);
		clientX = evt.clientX + 'px';
		clientY = evt.clientY + 'px';
		element.style.display = 'block';
		element.style.left = clientX;
		element.style.top = clientY;
	}else{
		element.style.display = 'none';						//单击其他的按键的时候，隐藏自定义菜单
	}
    }

    function preDef(evt){										//取消默认使件
	var e = evt||window.event;								//兼容IE低版本浏览器
	if(e.preventDefault()){
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
    }

   4.总结

     今天学习的很少,主要是因为家中有事而且和小伙伴一起玩耍.其实和朋友娱乐的时候很开心,而且花的有意义.但是自己一个人的时候还是应该用知识来丰富自己.不能把时间浪费在一些没有意义的事情上.毕竟人的精力是有限的,忙了这边,必然会影响另一边.总之,做好对时间的合理分配,做到心中有数.明天继续学习javascript表单处理的相关内容.