day76-JS-事件
1. 事件：用户点html的标签触发js的函数，意思是点标签触发一个动作。 1.1 常用事件：onclick、ondblclick、onfocus、onblur、onchange经常被使用。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。 1.2 绑定方式： 方式一： <div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script> 注意： this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参。 点一下“”点我“”就触发onclick等号右边的函数changeColor(this)， 实参this传给形参ths。this指的就是div标签。 方式二： <div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); //找到标签 divEle2.onclick=function () { //点击标签，等于触发一个动作 this.innerText="呵呵"; } </script> 1.3 搜索框示例：搜索框有默认的内容，用户点击搜索框，内容消失。如果用户什么都没输入就离开搜索框，默认的内容回来了。 <body> <input type="text" id="d1" value="迈腾2020"> <input type="button" value="搜索"> <script> var d1Ele = document.getElementById('d1');//用户找到输入框，即找到d1标签 d1Ele.onfocus = function () { //用户点一下输入框，即d1标签获得焦点，等于清空内容 this.value = ''; //this等于d1Ele }; d1Ele.onblur = function () { //用户离开输入框，即d1标签失去焦点 if (!this.value.trim()) { //this.value = ''也就是false，!false就是true，执行下面代码。.trim()去掉空格，以防用户误输入空格。 this.value = '迈腾2020' } }; </script> 注意：placeholder="迈腾2020",默认的内容"迈腾2020"会一直存在。 <input type="text" placeholder="迈腾2020">
1.4 背景色切换示例：//ths.classList就是this.classList结果是"c1 c2"，.toggle('c2')存在c2就删除，那么显示c1背景色， 不存在c2就添加，那么显示c2背景色。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景色切换</title> <style> .c1{ width:200px; height:200px; background-color:greenyellow; border-radius:50%; } .c2{ background-color:yellow; } .c3{ width:200px; height:200px; background-color:yellow; border-radius:50%; } .c4{ background-color:red; } </style> </head> <body> <div class="c1 c2" onclick="change(this)"></div> <div class="c3 c4"></div> <script> function change(ths){ ths.classList.toggle('c2'); }; var c4Ele = document.getElementsByClassName('c4'); c4Ele[0].onclick = function () { //c4Ele[0]才是<div class="c3 c4"></div>，c4Ele是数组 this.classList.toggle('c4'); //this就是c4Ele[0] } </script> </body> </html>
