toLowerCase()将大写字母转化成小写字母； toUpperCase() 将小写字母转化为大写字母。 js里面的this this–可以指代当前事件的执行对象 this—函数里面的this对象指代当前的window对象
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block{ width: 300px; height: 300px; border: 1px solid red; } ul{ width: 300px; height: 100px; border: 1px solid black; padding: 0; margin: 0; } ul>li{ width: 100px; height: 100px; line-height: 100px; text-align: center; box-sizing: border-box; float: left; list-style: none; } ul>li:hover{ background: pink; } </style> </head> <body> <button class="btn" id="btnn">按钮1</button> <div class="block"> <button class="anniu">按钮2</button> </div> <ul class="list_block"> <li class="list">1</li> <li class="list">2</li> <li class="list">3</li> </ul> <script> var btn=document.getElementsByClassName("btn"); console.log(btn[0]); // e 执行参数可以写在函数的形参 也可以直接window.event 写或者e=event； //事件的执行参数 e event //this指代当前事件的执行对象 btn[0].onclick=function (e){ console.log(e); console.log(window); var target= e.target|| e.srcElement; //target srcElement 当前点击的目标元素 console.log(target); } //键盘事件 document.body.onkeypress=function(){ var e=window.event; console.log(e.keyCode);//keycode键盘上对应字符的ascll码值 } //鼠标移动事件 document.body.onmousemove=function(e){ // var pagr= e.pageX|| e.clientX; //var cli= e.pageY|| e.clientY; //console.log(pagr,cli); } //* * js里面事件的冒泡 * 事件的冒泡如何处理 * */ var btn1=document.getElementsByClassName("block")[0]; var btn2=document.getElementsByClassName("anniu")[0]; console.log(btn1); console.log(btn2); var num=0; btn1.onclick=function (e){ num++; console.log(num); } btn2.onclick=function (e){ num++; e.stopPropagation();//阻止事件冒泡 //e.preventDefault();//阻止事件的默认行为 //return false; //阻止事件冒泡 console.log(num); } //事件的委托 //父容器的事件委托给自容器进行执行 var btn3=document.getElementsByClassName("list_block")[0]; var btn4=document.getElementsByClassName("list")[0]; btn3.onclick=function(e){ var target= e.target|| e.srcElement; //console.log(target); // console.log(target.nodeName.toLowerCase()); if(target.nodeName.toLowerCase()=="li"){ console.log(1); } } </script> </body> </html>dom的事件 js的事件前缀都带on 键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件等。 onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件) onfocus(获得焦点) onblur（失去焦点） onclick（单击） ondbclick（双击） onmouseleave(水平离开) onmouseout（离开） onmousemove（鼠标移动） onmouseenter（鼠标进入） onmouseover（鼠标悬停） onmousewheel(鼠标滚轮事件) window事件 onload（加载完成事件） onresize(窗口变化事件) onerror（报错事件） onscroll(滑动事件) touch（触屏） touchstart （开始触屏 ） touchmove（触屏移动） touchend(触屏结束) 如何给dom元素添加事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="btndou(1)">按钮</button> <button id="btn">按钮</button> <button id="btn2">按钮2</button> <script> * 如何给dom元素添加事件 * 1.常规添加 直接在标签上添加事件 * */ function btndou(a) { console.log(a); } /* *2. 动态给dom元素添加事件 * */ var btn = document.getElementById("btn"); btn.onclick = function () { console.log(1); } btn.onclick = showinfo; /*不能添加小括号*/ function showinfo() { console.log(1); } /* *事件的监听 * */ var btn2 = document.getElementById("btn2"); //两种方式 第一种用自执行函数 第二种 用函数名添加，但是要注意：这里的函数名后面不能带小括号（） //第一种 /* btn2.addEventListener("click",function (){ console.log(2); });*/ //第二种 btn2.addEventListener("click", showbtn);//第一个参数是事件，这里的事件前面不加on function showbtn() { console.log(2); } </script> </body> </html>