事件类型笔记 2023.1.14

楼主^#

更多发布于：2023-01-16 09:01

<body>
事件类型：
   鼠标：onclick（点击） onmousedown（鼠标按下） onmouseup（鼠标弹起） onmouseover（鼠标移入） onmouseout（鼠标移出） onmousemove（鼠标移动）
   键盘：onkeydown onkeyup onkeypress(功能键不能识别)
   html事件：onfocus（获取焦点） onblur（失去焦点） onscroll（滚动条） onresize（窗口大小改变）
   onchange：用在input框的时候，必须是失去焦点才能获取到是否改变的结果

event对象：
   e.target :指向事件源（DOM）

default：默认行为
   1. a标签的默认行为：
   <a href="5.eventObj.html" onclick="return false">A标签跳转</a> 阻止a标签跳转
   或者调用函数获取return值
   <a href="5.eventObj.html" onclick="return test()">A标签跳转</a>
   function test() {
   let num=Math.random()*10;
   alert(num)
   if(num>5){
   return true
   }
   return false;
   }
   2. form表单的默认行为
   <form action="5.eventObj.html" onsubmit="sb()">
   <input type="text" name="username">
   <button>submit</button>
   </form>
   function sb() {
   let e=window.event||arguments[0];
   let username=document.getElementsByName("username")[0].value;

   if(username!=""){
   //表单.submit()
   let form=document.getElementsByTagName("form")[0]
   form.submit()//用js方法提交表单
   }else{
   e.preventDefault();//阻止表单提交
   }
   }

BOM: browser object model 浏览器对象模型
   window对象
   location对象：对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
   location.href="地址" ---页面跳转
   location.search ---- ?username="admin"
   location.hash ----#xxx=xxx

   history历史记录：
   history.back();---后退一页
   history.forward() ----前进一页
   history.go(数字) ---正数表示前进，负数表示后退

   window.open()：
   window.open();//开空白窗口
   window.open("http://www.baidu.com") //打开指定url的窗口，默认打开新窗口，没有第二个参数
   window.open("http://www.baidu.com","_self") //打开指定url的窗口，从当前窗口打开

   window.close() 窗口关闭

</body>

喜欢1

事件类型笔记 2023.1.14

最新喜欢：