绑定事件两种方式：
<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
}
4232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
