事件对象的preventDefault()方法

太过爱你忘了你带给我的痛 2022-12-31 01:24 117阅读 0赞

> **event.preventDefault()取消事件的默认动作**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>测试事件对象的preventDefault()方法</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>测试事件对象的preventDefault()方法</h3>
    <form action="" id="testForm">
    <input type="text" value="江西省赣州市于都县" />
    <br />
    <input id="testSubmit" type="submit" value="提交表单" /> 
    </form>
    </body>
    <script type="text/javascript">
    document.getElementById("testSubmit").onclick = function(e) {
    	alert("测试e.preventDefault()");
    	//取消事件的默认动作
    	e.preventDefault();//不会提交表单，即阻止了表单的提交
    }
    
    function fn1() {
    	console.log(arguments, arguments.length, arguments[0]);
    	console.log("**********");
    }
    
    fn1();
    
    window.onload = function() {
    	//浏览器会默认传递一个参数，该参数就是事件对象
    	console.log(arguments, arguments.length);
    	console.log(arguments[0]);
    	console.log(arguments[0].srcElement, arguments[0].target);
    	//this指的是事件绑定对象
    	console.log(this); //Window
    }
    </script>
    </html>

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/d1b74a21ec95491883747c078cf575d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201227161602811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020122716162121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70