JS DOM事件

it2022-05-07  0

一.DOM事件格式

元素对象.on事件名称 = function(){ // 事件发生时,执行的代码 } onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。

eg1: onfocus onblur onmouseover onmouseout

<body> <form action="" id="from1"> <input type="text" name="username" value="请输入用户名"><span style="font-style: italic"></span> <p></p> <input type="text" name="passwd" value="请输入密码"> <p></p> <input type="submit" value="提交"> </form> <h1 id="one">点击我领取屠龙宝刀!</h1> <script> ele_form = document.getElementById("from1"); ele_form.onsubmit=function(){ console.log(this) //阻止事件方式1 false表示拦截表单提交 其他放行 return false; }; ele_form.οnsubmit=function(event){     console.log(this)     //阻止事件方式2 event.preventDefault    event.preventDefault(); }; var name_ele = document.getElementsByName("username")[0]; //获得焦点时执行 name_ele.onfocus = function () { // 函数中name_ele可以用this替代 if (this.value == "请输入用户名") { //if (name_ele.value == "请输入用户名") { name_ele.value = ""; ele_span = name_ele.nextElementSibling; ele_span.innerHTML = "SB"; console.log(ele_span); } console.log(name_ele.value); }; //失去焦点执行 name_ele.onblur = function () { if (!name_ele.value.trim()) { name_ele.value = "请输入用户名"; ele_span = name_ele.nextElementSibling; ele_span.innerHTML = ""; } console.log(name_ele.value); }; console.log(name_ele.value); var btn = document.getElementById("one"); btn.onclick = function () { alert("我是渣渣辉,是兄弟就来砍我"); }; /* mouseover 鼠标停留的时候 */ btn.onmouseover = function () { btn.style.color = "red"; }; /* mouseout 鼠标离开的时候 */ btn.onmouseout = function () { btn.style.color = "blue"; }; </script>

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode;

思考:onclick=function(event){};这个方法是谁调用的?

 

事件传播:

 

 

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").οnclick=function(){ alert('111'); } document.getElementById("abc_2").οnclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外层div传播. } </script>

 

 

 

 

参考:

https://www.cnblogs.com/chichung/p/9688399.html

https://www.cnblogs.com/yuanchenqi/articles/5980312.html

转载于:https://www.cnblogs.com/icemonkey/p/10498823.html

相关资源:js DOM的事件常见操作实例详解

最新回复(0)