一键难忘520

这个屌丝很懒，什么也没留下！

热门标签

JavaScript入门事件简介/事件对象位置属性 /鼠标事件/表单事件/键盘事件/浏览器相关事件/焦点事件/触摸事件 Day12_document.ontouchend

作者：一键难忘520 | 2024-07-05 06:13:57

踩

document.ontouchend

JavaScript事件简介

什么叫事件

当点击一个按钮的时候，会弹出一个对话框。在JavaScript中，
“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。

事件三要素

事件源 -触发事件的元素 ->如按钮

事件类型 -事件如何触发:点击、双击、移动等等 ->如 click点击事件

事件处理函数 -事件可以做什么

<button>按钮</button>   //事件源


var btn = document.querySelector('button')
  btn.onclick = function(){   //onclick事件类型 
      lert('弹出内容')   //function() 事件函数
}

事件对象event

什么是事件对象

处理事件与事件相关的

如何创建

由系统创建，当触发事件时，自动生成一个事件对象 duix

获取事件对象

在事件处理函数中获取名为event的事件对象

更改事件对象名

事件处理函数定义一个形参用来接受事件对象

事件对象兼容性

IE浏览器：e = e || window.event

<button>按钮</button>


var btn = document.querySelector('button')
	btn.onclick = function (e) { // e=event  e是形参 可以写成任何名字 
     e = e || window.event  // 兼容ie写法   e = e相当于给event重命名
    console.log(e)
}

事件对象位置属性

相对元素自身坐标（点击的元素）offsetX,offsetY

相对于浏览器窗口(clientX,clientY) //就是点击位置距离浏览器窗口的位置

相对于页面(pageX,pageY) //滑动的位置也算在其中

<div></div>


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)  // 相对页面窗口
}


*{padding: 0;margin: 0;}
    div{
       width: 200px;
       height: 1200px;
       background-color: skyblue;
       margin: 100px;
}

常见的事件

鼠标事件**

mouseover 鼠标移入

mouseout 鼠标移出

mousemove 鼠标移动

.onmouseover/.onmouseout/ .onmousemove = function(){}

<div>前端编程</div>


/* 
鼠标移入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 = 'blue'
  }
  // 鼠标移动
  divEle.onmousemove = function(e){
  // 事件对象
  e = e || window.event
  //打印鼠标(光标)位置
  console.log(e.offsetX, e.offsetY) 
}


  *{padding: 0;margin: 0;}
         div{
             width: 200px;
             height: 40px;
             background-color: skyblue;
             text-align: center;
             line-height: 40px;
             color: blue;
         }


*{padding: 0;margin: 0;}
        div{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 100px;
            position: relative;
        }
        p{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            display: none;   /*隐藏 */
             /*鼠标移入元素 事件不起作用 解决闪动问题*/
            pointer-events: none; 
        }


<div>
    <p>提示信息</p>
</div>

小块随鼠标移动案例


/*
鼠标移入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. 如何让元素到指定位置
      父 相对定位
      子 绝对定位
  新需求
     1.鼠标在保持小区域中间
     2. 小区块不能移出大区块
*/
divEle.onmousemove = function(e){
  e = e || window.event //事件对象
  var x = e.offsetX - pEle.clientWidth/2  // 相对自身位置
  var y = e.offsetY - pEle.clientHeight/2  //减去小盒子自身高的一半 得到光标在小盒子正中       
  //边界检查
  if(x<0){
    x = 0
  }
  if(x > (divElem.clientWidth - pEle.clientWidth) ){
    x =( divElem.clientWidth - pEle.clientWidth )
   }
  if(y<0){
    y = 0
  }
  if(y > (divElem.clientHeight - pEle.clientHeight) ){
    y =( divElem.clientHeight - pEle.clientHeight )
   }
  pEle.style.top  = y + 'px'
  pEle.style.left = x + 'px'
}

鼠标点击案例


			// 左键按下
			document.onmousedown = function () {
				console.log('mousedown')
 
				// 鼠标移动事件
				document.onmousemove = function (e) {
					e = e || window.event
					console.log('x : ', e.clientX, ' y :', e.clientY)
				}
			}
			// 左键抬起
			document.onmouseup = function () {
				console.log('mouseup')
                document.onmousemove = null
			}

鼠标点击拖动小块案例

<div></div>


 *{padding: 0;margin: 0;}
    div{
     position: relative;
     width: 100px;
     height: 100px;
     background-color: skyblue;
 }


/*按在div上，div区块随光标一起移动，抬起div区块停止移动*/
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
}

form表单事件**

表单提交事件

- 表单提交事件-默认行为

1. 触发表单提交事件

submit 是表单form元素 input等等只是表单项
.onsunbmit = function(){}

作用:

表单验证
- 非空验证：表单输入框内容不能为空

2. 默认行为

执行action属性指定的url地址跳转，同时获取表单输入框内容以名称值对形式做为参数传递

https://www.xxx.com/?username=admin&password=123

阻止表单默认行为

e.preventDefault() 阻止自动跳转页面等等


<form action="">
	<input type="text" placeholder="请输入用户名" name="username" /><br />
	<input type="password" placeholder="请输入密码" name="password" /><br />
	<input type="submit" value="确定" id="login" />
</form>


//表单form提交事件
formEle.onsubmit = function (e) {
	e = e || window.event // 事件对象
	e.preventDefault() // 阻止表单form默认行为
	//表单非空验证
	var username = usernameInput.value
	var password = passwordInput.value
	if (username === '') {
	    alert('用户名不能为空!')
        return  //为空不执行默认行为
	} else if (password === '') {
		alert('密码不能为空!')
        return     //为空不执行默认行为
	}
    // 用户名密码验证
    if(username == 'admin' && password == '123'){   
    location.href = './index.html'    // 表单验证通过 才能跳转到主界面
    }else{
        alert('用户名或密码出错!')
    }
 
}

input事件

.oninput = function(){ } 获取input输入框内容


* {
				padding: 0;
				margin: 0;
			}
			form {
				width: 500px;
				background-color: skyblue;
				margin: 100px auto;
				padding: 50px;
			}
			form input {
				width: 100%;
				line-height: 40px;
				margin-top: 20px;
			}
 
			#login {
				height: 40px;
			}


<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>


var usernameInput = document.querySelector('input[name="username"]')
usernameInput.oninput = function(){
	console.log(usernameInput.value)   //打印input框里输入的值，按一个打一个
}

内容转变事件

.onchange = function(){}


var headerInput = document.querySelector('input[name="headerimg"]')
headerInput.onchange = function(){
     alert('change')
}

焦点事件

focus 获取焦点事件

blur 失去焦点事件 [可用于表单验证，用户名密码为空时提醒]

.onfocus / .οnblur= function(){}


    <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>


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

键盘事件

只给能在页面上选中的元素（表单元素）和 document 来绑定键盘事件
注:不能给页面上一个 div 元素，设置键盘事件的

keyup 抬起

keydown 按下

keypress 按住

.onkeyup / .onkeydown / .onkeypress = function(){}

keycode 键码

兼容性写法 which e.keycode || e.which

<h2>键盘事件</h2>


document.onkeyup = function(e){
    e = e || window.event  // 兼容ie
    var keyCode = e.keyCode || e.which  // 兼容FireFox2.0
    if(e.ctrlKey && keyCode === 32){
        alert('登录成功')    //如果键盘按的enter则显示登陆成功
    }
}

组合按键

altKey +
shiftKey +
ctrlKey +

浏览器相关事件 [window对象]

load 文档加载完成事件

window.onload = function(){} html文档加载完成后执行

<div>元素一</div>


div{
    height: 1200px;
}


window.onload = function () {
	// 这里面的代码，是html文档加载完成之后执行
    var divEle = document.querySelector('div')
	console.log(divEle)
	divEle.innerHTML = '新内容'
}

scroll 滚动事件

window.onscroll = function(){}


// 浏览器窗口滚动事件
window.onscroll = function(){
     console.log(document.documentElement.scrollTop)
}

resize 窗口尺寸改变事件

window.onsresize = function(){}


window.onresize = function(){
     // 显示窗口尺寸
     console.log('w ',window.innerWidth, ' h ',window.innerHeight)
}

触摸事件[移动端]

document事件源

touchstart 触摸开始事件 (事件项)

touchend 触摸结束事件

touchmove 触摸移动事件


*{padding: 0;margin: 0;}
div{
   width: 100%;
   height: 100vh;
   background-color: skyblue;
}

<div>元素一</div>


document.ontouchstart = function(){
     console.log('touchstart');
}        
document.ontouchmove = function(e){
     e = e || window.event
     console.log('touchmove',e);  //打印按住时滑动的位置
}        
document.ontouchend = function(){
     console.log('touchend');
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/789384

JavaScript入门 事件简介/事件对象位置属性 /鼠标事件/表单事件/键盘事件/浏览器相关事件/焦点事件/触摸事件 Day12_document.ontouchend