默认事件
就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键呼出的菜单等等。我们可以通过js取消或更改这些默认事件。
取消默认事件
默认事件都是定义在DOM元素相应的事件类型上的,我们只需要知道产生默认事件的是哪个元素,这个事件是什么类型的,就可以阻止或修改它。实现方式就是注册相应的事件处理函数,在其中通过如下API阻止默认事件的发生。
event.preventDefault() : 阻止默认行为
(IE9以下)event.returnValue=false:返回值=false 阻止默认行为
a标签的跳转
存在形式:在a标签的点击事件中。
// 获取一个a标签 禁止他的跳转行为document.getElementsByTagName("a")[0].onclick = function(e){ var event = e||window.event; if(e.preventDefault){ e.preventDefault(); }else{ event.returnValue = false; }}
右键呼出菜单事件
存在形式:document的contextmenu事件中。
// 取消之后右键就没有菜单了
document.oncontextmenu = function(e){ var event = e||window.event; if(e.preventDefault){ e.preventDefault(); }else{ event.returnValue = false; }}
不得不提的表单
存在形式:from表单会赋予它包含的button标签或type为submit的input,提交(submit)事件。
submit事件:根据from元素的method属性值决定提数据的方式,通常是get/post,提交表单元素的值。
// 一个默认使用get方法提交数据的表单<form > <input type="text" name="user-id" > <input type="text" name="user-pwd" > <input type="submit" name="btn" value="提交" ></form>// 组着user-info表单中的提交事件document.getElementsByClassName("user-info")[0].onsubmit = function(e){ var event = e || window.event; if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }}
未完待续...