hi,欢迎访问本站!
当前位置: 首页学习笔记正文

JavaScript事件,事件对象event,点击事件的光标坐标点获取,鼠标事件,表单事件,焦点事件,键盘事件,浏览器相关事件,触摸事件及页面中Div的拖动

用户投稿 学习笔记 24阅读

绑定事件两种方式: 

<div οnclick="alert('')</div>

divele.οnclick=function(){}

什么是事件?

点击一个按钮,弹出的对话框叫事件。

事件三要素:

事件源(触发事件的元素)----按钮

 事件类型-----事件是如何触发的:点击,双击,移动。如click事件事件处理函数-----事件做什么

事件对象(event)

处理事件与事件相关的当触发事件时,自动生成一个事件对象。如何获取事件对象:在事件处理函数中获取名为event更改事件名?在事件处理函数定义一个形参,接受事件对象:function(e){}事件对象兼容性,IE浏览器window.event<button>按钮</button> <script> var btn = document.querySelector('button') btn.onclick = function (e) { e = e || window.event //IE的兼容写法 console.log(e) } </script>

 事件对象位置属性:

1.相对事件源(你点击的元素)offsetX,offsetY,是相对于你点击的元素的边框内侧开始计算

2.相对于浏览器窗口(clientX,clientY),是相对于浏览器窗口来计算的,不管你页面滚动到什么情况,都是根据窗口来计算坐标

3.相对于页面(pageX,pageY),是相对于整个页面的坐标点,不管有没有滚动,都是相对于页面拿到的坐标点

<body> <div></div> <script> var divEle = document.querySelector('div') /* 绑定点击事件 1.事件源 div元素 2.事件类型 事件类型名click 3.事件处理函数 事件对象 event */ divEle.onclick = function(e){ e = e || window.event // 获取事件对象 console.log('offsetX',e.offsetX,'offsetY',e.offsetY) console.log('clientX',e.clientX,'clientY',e.clientY) console.log('pageX',e.pageX,'pageY',e.pageY) } </script></body>

鼠标移入移出改变样式事件:

mouseover 移入

mouseout 移出

mousemove移动

<style> *{padding: 0;margin: 0;} div{ width: 200px; height: 40px; background-color: skyblue; text-align: center; line-height: 40px; color: blue; } </style></head><body> <div>前端编程</div> <script> /* 鼠标移入div区块,字体颜色变为红色 复杂问题简化 分解: 1. 鼠标移入div区块 div.onmouseover = function(){ 改变字体颜色 } 2. 字体颜色变为红色 div.style.color = 'red' */ var divEle=document.querySelector('div') //鼠标移入 divEle.onmouseover=function(){ divEle.style.color='red' } //鼠标移出 divEle.onmouseout=function(){ divEle.style.color="green" } //鼠标移动,获取光标位置 divEle.onmousemove=function(e){ e=e||window.event console.log(e.offsetX,e.offsetY) } </script> </body></html>

 综合案例需求如下:

1.鼠标移入div时,在div内隐藏的信息会被显示出来;2.鼠标移出div时,内容会隐藏起来;3.div里面的内容会随着鼠标的移动而移动;4. 元素不能移出div区块

思路: 1. 鼠标移入区块显示提示信息                 mouseover 移入           2. 鼠标移出区块隐藏提示信息                  mouseout 移出           3. 鼠标在区块移动,提示信息跟随移动                => mousemove 移动                => 光标的坐标位置                     => 浏览窗口 e.clientX e.clientY                     => 事件源元素本事 e.offsetX  e.offsetY                     => 文档页面 e.pageX  e.pageY

               => 光标实时坐标位置设置给提示信息元素                             解决闪烁问题               => 光标位置与提示信息位置重叠一起, 当光标移入div区块,显示p区域,这时光标相当于落在p区域,               移出div区块,提示信息隐藏.                  p{ pointer-events: none;} 光标(鼠标)事件,值设置none之后当前元素事件无效            4. 元素不能移出div区块

<div> <p>提示信息</p> </div> <script> // 鼠标移出div显示P区域 var divEle = document.querySelector('div') var pEle = document.querySelector('p') divEle.onmouseover = function () { pEle.style.display = 'block' } divEle.onmouseout = function () { pEle.style.display = 'none' } /* p小区块随光标在大区块div中移动 获取光标位置坐标赋值给小区块 1. 获取光标位置 当光标在大区块移动时,获取坐标 2. 如何让元素到指定位置 父 相对定位 子 绝对定位 */ divEle.onmousemove = function(e){ e = e || window.event //事件对象 var x = e.offsetX // 相对自身位置 var y = e.offsetY pEle.style.top = y + 'px' pEle.style.left = x + 'px' } // 新需求 // 1.鼠标在保持小区域中间 // 2. 小区块不能移出大区块 divEle.onmousemove=function(e){ e=e||window.event var x=e.offsetX-pEle.clientWidth/2 var y=e.offsetY-pEle.clientWidth/2 console.log(x,y) //边界检查 if(x<0){ x=0 } if(x>(divEle.clientWidth-pEle.clientWidth)){ x=(divEle.clientWidth-pEle.clientWidth)//像素宽度,宽度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条,是一个整数,单位是像素 px。 } if(y<0){ y=0 } if(y>(divEle.clientHeight-pEle.clientHeight)){ y=(divEle.clientHeight-pEle.clientHeight) } pEle.style.top=y+'px' pEle.style.left=x+'px' }

表单事件

change : 表单内容改变事件

<body><form action=""><input type="text" placeholder="请输入用户名" name="username" /><br /><input type="password" placeholder="请输入密码" name="password" /><br /> <input type="file" name="headerimg"><input type="submit" value="确定" id="login" /></form><script> var headerInput = document.querySelector('input[name="headerimg"]') headerInput.onchange = function(){ alert('change') } var usernameInput = document.querySelector('input[name="username"]') usernameInput.oninput = function(){ console.log(usernameInput.value) }</script></body>

input : 表单内容输入事件 submit : 表单提交事件

<body> <form action=""> <input type="text" placeholder="请输入用户名" name="username" /></br> <input type="=password" placeholder="请输入密码" name="password" /></br> <input type="submit" value="确定" id="login" /> </form> <script> var formEle=document.querySelector('form') var usernameInput=document.querySelector('input[name="username"]') var passwordInput=document.querySelector('input[name="password"]') formEle.onsubmit=function(e){ e=e||window.event e.preventDefault()//阻止表单默认行为 //非空 var username=usernameInput.value var password=passwordInput.value if(username===""){ alert('用户名不能为空') return }else if(password===""){ alert('密码不能为空!') return } //用户名验证 if(username=="rc"&& password=='love'){ //表单通过验证 location.href='https://mp.csdn.net/mp_blog/creation/editor/126596920?spm=1000.2115.3001.5352' }else{ alert('用户名或密码错误') } } </script></body>

 focus 获取焦点事件,blur 失去焦点事件

例如:在用户名为空的情况下失去焦点则提醒其为空:

<script> var usernameInput = document.querySelector('input[name="username"]') usernameInput.onfocus = function(){ console.log('获取焦点') } usernameInput.onblur = function(){ console.log('失去焦点') var username = usernameInput.value if(username === ''){ alert('用户名不能为空!') } } </script>

键盘事件:

keyup : 键盘抬起事件 keydown : 键盘按下事件 keypress : 键盘按下再抬起事件

<h2>键盘事件</h2> <script> document.onkeyup = function(e){ e = e || window.event // 兼容ie var keyCode = e.keyCode || e.which // 兼容FireFox2.0 if(e.ctrlKey && keyCode === 32){ alert('登录成功') } } </script>

 浏览器相关事件

 load    文档加载完成事件                                                                                                                   scroll   滚动事件                                                                                                                                 resize   窗口尺寸改变事件

<div>元素一</div> <script> // 浏览器窗口滚动事件 window.onscroll = function(){ console.log(document.documentElement.scrollTop) } // 浏览器窗口尺寸改变事件 - 移动端适配 window.onresize = function(){ // 显示窗口尺寸 console.log('w ',window.innerWidth, ' h ',window.innerHeight) } </script>

触摸事件

          touchstart : 触摸开始事件           touchend : 触摸结束事件           touchmove : 触摸移动事件

<div></div><script> var divEle = document.querySelector('div')// 左键按下divEle.onmousedown = function () {console.log('mousedown')// 鼠标移动事件document.onmousemove = function (e) {e = e || window.event var x = e.clientX var y = e.clientY// console.log('x : ', e.clientX, ' y :', e.clientY) divEle.style.left = x + 'px' divEle.style.top = y + 'px'}}// 左键抬起document.onmouseup = function () {console.log('mouseup')document.onmousemove = null}

标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消