js默认事件汇总

默认事件

　　就是浏览器通过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 class="user-info">
    <input type="text" name="user-id" id="">
    <input type="text" name="user-pwd" id="">
    <input type="submit" name="btn" value="提交" id="">
</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;
    }
}

未完待续...

 

转载于:https://www.cnblogs.com/keliguicang/p/10998039.html