HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
''' onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。 '''
两种为元素附加事件属性的方式
<div onclick="alert(123)">点我呀</div> <p id="abc">试一试!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script>
注意：
<div id="abc" onclick="func1(this)">事件绑定方式1</div> <div id="id123">事件绑定方式2</div> <script> function func1(self){ console.log(self.id) } //jquery下是$(self), 这种方式this参数必须填写; //------------------------------------------ var ele=document.getElementById("id123").onclick=function(){ console.log(this.id); //jquery下是$(this), 这种方式不需要this参数; } </script>
onload：
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // window.onload=function(){ // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // }; function fun1() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun1()"> <p id="ppp">hello p</p> </body> </html>
onsubmit:
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> <script type="text/javascript"> //阻止表单提交方式1(). //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 alert("验证失败 表单不会提交!"); event.preventDefault(); }
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？
事件传播：
<div id="abc_1" style="border:1px solid red;300px;height:300px;"> <div id="abc_2" style="border:1px solid red;200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); } document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外层div传播. } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* onload事件：一张页面或一幅图像完成加载 */ // var ele=document.getElementsByClassName('div1')[0]; // console.log(ele.innerHTML); // 放在上面，报错了Uncaught TypeError: Cannot read property 'innerHTML' of undefined；换window.onload绑定一个函数 // window.onload=function () { // var ele=document.getElementsByClassName('div1')[0]; // console.log(ele.innerHTML); // }; // 还可以把onload放在body标签中 function f3() { var ele=document.getElementsByClassName('div1')[0]; console.log(ele.innerHTML); }; </script> </head> <body onload="f3()"> <!--onfocus元素获得焦点onblur元素失去焦点--> <!--<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">--> <script> // var ele=document.getElementById('search'); // function f1() { // if (ele.value=='请输入用户名') { // ele.value=''; // }; // }; // 当用户点击输入框即标签获取到焦点，因为value默认值为'请输入用户名'，所以标签value会为空； // // function f2() { // if (!ele.value.trim()) { // ele.value='请输入用户名'; // }; // }; // 当标签失去焦点后，判断value(去除空格后)是否为空，如果为空那么value等于'请输入用户名'；这里的value赋值要与f1的判断相等，不然f1执行一次后就无法继续了 </script> <div class="div1">hello div</div> <!--事件绑定写法(尽量不要写在html标签里)--> <div class="v1"> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <p id="p1">ppp</p> </div> <script> var ele1=document.getElementsByClassName('v1')[0]; var eles=ele1.children; console.log(eles); for (var i=0;i<eles.length;i++) { eles[i].onclick=function () { alert('hello world'); }; }; </script> <!--参数this的用法--> <div id="v1" onclick="func(this)">this is div</div> <!--参数this代表所引用函数可直接找到这个标签--> <script> function func(that) { // 参数除了this命名其它都可以 console.log(that); // <div id="v1" onclick="func(this)">this is div</div> console.log(that.parentElement); // 找到父级body标签以及里面的内容 }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: antiquewhite; } .inner{ width: 100px; height: 100px; background-color: rebeccapurple; } </style> </head> <body> <!--onsubmit事件，on的意思代表监听--> <form action="" id="form1"> <input type="text" name="username"> <input type="submit" value="提交"> </form> <script> var ele=document.getElementById('form1'); ele.onsubmit=function (event) { alert(123); // 先触发onsubmit事件，然后提交表单(action为空那么发送到当前页面，也可发现点击提交后页面有刷新) // return false; // 不往后端发送表单(比如判断输入格式不正确即可拦截)，这是第一种方式 event.preventDefault(); // 通知浏览器不要执行与事件关联的默认动作，这是第二种方式 }; </script> <!--事件传播：如果不阻止事件传播，那么点击里面的div时会有两次弹窗--> <div class="outer"> <div class="inner"></div> </div> <script> var ele1=document.getElementsByClassName('inner')[0]; ele1.onclick=function (event) { // event对象的使用，必须用这种事件绑定方法 alert('I am inner'); event.stopPropagation(); // stopPropagation()阻止事件向外层div传播 }; var ele2=document.getElementsByClassName('outer')[0]; ele2.onclick=function () { alert('I am outer'); }; </script> </body> </html>