当前位置：网站首页>JS基础9

JS基础9

2022-04-22 12:23:00 【鹏程933】

事件

注：事件前都加on，并且不分大小写，方法或者函数区分大小写

定义

事件源
事件类型
事件处理函数

事件绑定两种方法

绑定HTML元素属性
绑定DOM对象属性

<button type="button" οnclick="test1()">测试1</button><br> <button type="button" id="btn">测试2</button> <script> function test1(){
    
            console.log('HTML绑定事件');
//结果HTML绑定事件
        }
        var btnEle=document.querySelector('#btn') btnEle.οnclick=function(){
    
            console.log('DOM绑定事件');
//结果DOM绑定事件
        }
    </script>

事件对象Event

只要触发事件，系统生成创建事件对象Event
获取事件对象，在事件处理函数中获取
更改事件对象名
事件处理函数定义形参，触发时Event自动赋值给形参
事件兼容IE写法
e=e||window.event

//获取点击时鼠标X轴坐标 <div></div> <script> var divEle=document.querySelector('div') divEle.οnclick=function(e){
    
            e=e||window.event
            console.log(e.clientX)
        }
    </script>

事件对象属性

鼠标（光标）位置属性

属性	含义
clientX clientY	x,y位置（相对于浏览器窗口）
offsetX offsetY	x,y位置（相对于自身窗口）
pageX pageY	x,y位置（相对于页面）

  <style> div{
    
            width: 100px;
            height: 100px;
            border: 10px solid #000;
            margin: 10px;
        }
    </style> </head> <body> <div></div> <script> var divEle=document.querySelector('div') divEle.οnclick=function(e){
    
            e=e||window.event
            console.log(e.clientX)
//结果10
            console.log(e.offsetX)
//结果 20
            console.log(e.pageX)
//结果10
        }
    </script>
</body>

鼠标事件

属性	含义
mouseover	鼠标移入
mouseout	鼠标移出
mousemove	鼠标移动
click	鼠标点击
dbckick	鼠标双击
contextmenu	右键点击事件
mousedown	按下事件
mouseup	抬起事件

盒子随鼠标移动

盒子开始隐藏display: none;
鼠标移入时盒子显示minbox.style.display = 'block'
获得鼠标坐标e.clientX和e.clientX
判定盒子不要超出边界
minbox.style.top赋值
鼠标移出时再次隐藏minbox.style.display = 'none'

 <style> #wrap {
    
    width: 400px;
    height: 400px;
    background-color: pink;
    position: relative;
}

#box {
    
    width: 100px;
    height: 100px;
    background-color: skyblue;
    display: none;
    pointer-events: none;
//绝对定位，鼠标移动位置赋值的地方
    position: absolute;
    left: 0;
    top: 0;
}
    </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> <script> function test() {
    
    	bigbox = document.querySelector('#wrap') minbox = document.querySelector('#box') bigbox.onmouseover = function () {
    
//移入盒子显示
        minbox.style.display = 'block'
    }
    bigbox.onmousemove = function (e) {
    
        e = e || window.event //获取坐标并减去盒子自身位置一半 var x = e.clientX - minbox.clientWidth / 2 var y = e.clientY - minbox.clientHeight / 2 //超出边界判定 if(x<0){
    
            x=0
        }
        if(y<0){
    
            y=0
        }
        if(x>(bigbox.clientWidth-minbox.clientWidth)){
    
            x=bigbox.clientWidth-minbox.clientWidth
        }
        if(y>(bigbox.clientHeight-minbox.clientHeight)){
    
            y=bigbox.clientHeight-minbox.clientHeight
        }
//赋值给定位元素
        minbox.style.top = y + 'px'
        minbox.style.left = x + 'px'
    }
    bigbox.onmouseout = function () {
    
//鼠标移出隐藏
        minbox.style.display = 'none'
    }


}
test()
</script>
</body>

表单事件

属性	含义
submit	提交事件
change	内容转变事件
input	表单输入事件
select	选中文本时触发
invalid	表单元素的值不满足时触发
reset	表单重置时触发

注：阻止表单默认提交行为e.preventfalult()

<form action="https://www.baidu.com/"> <input type="text" name="text"> <input type="password" name="password"> <input type="submit" name="submit"> </form> <script> var textEle=document.querySelector('input[name="text"]') var passwordEle=document.querySelector('input[name="password"]') var submitEle=document.querySelector('input[name="submit"]') var formEle=document.querySelector('form') formEle.οnsubmit=function(){
    
        alert('提交事件')
//弹出框弹出提交事件
//因为提交事件瞬间触发，所以用弹出框输出
    }
    textEle.οnchange=function(){
    
        console.log('改变事件')
//结果改变事件
    }
    textEle.οninput=function(){
    
        console.log('输入事件')
//结果输入事件        
    }
</script

浏览器事件

属性	含义
scorll	滚动事件
resize	窗口大小改变
load	加载完成事件

<script> window.οnscrοll=function(){
    
            var a=0
            a++
            console.log(a)
//在鼠标滚动时始终输出1
        }
        window.οnresize=function(){
    
            var wWidth=window.innerWidth
            console.log( wWidth)
//在浏览器窗口发生变化时，获取浏览器当前窗口大小 
        }
        window.οnlοad=function(){
    
            console.log('加载完成')
//浏览器加载完成后控制台输出加载完成
        }
    </script>

键盘事件

属性	含义
keyup	键盘抬起事件
keydown	键盘按下事件
keypress	键盘按下再抬起事件

注：键盘响应顺序

对于字符键，keydown=>keypress=>keyup
对于非字符键，keydown=>keyup

注：键盘键值获取var keyCode=e.keyCode||e.which

  <script> document.οnkeydοwn=function(e){
    
//兼容
            e=e||window.event
            var keyCode=e.keyCode||e.which
            console.log(e.keyCode)
//按下键盘的键值            
            console.log(e.shiftKey)
//判定是否为shift键
        }
    </script>

触摸事件

属性	含义
touchstart	触摸开始事件
touchend	触摸结束事件
touchmove	触摸移动事件

焦点事件

属性	含义
blur	失去焦点
focus	获取焦点

注：

焦点事件没有及时性，事件不会跟随文本内容变化而变化，在事件触发后才会发生变化
onblur常用于文本内容验证
onfocus常用于获取焦点时表单外观发生变化

 <input type="text" name="text"> <script> inputEle=document.querySelector('input') inputEle.οnblur=function(){
    
            console.log('失去焦点')
//结果点击输入框外时输出失去焦点
        }
        inputEle.οnfοcus=function(){
    
            console.log('获取焦点')
//结果选中输入框时输出获取焦点
        }
    </script>

事件监听

定义：事件监听就是让计算机等待某个事件发生，当这个事件发生后，阻止其默认行为，执行自己定义的行为
注：监听事件中事件类型前不加on

事件源.addEventListener('事件类型'，'处理函数'，'冒泡事件或事件捕获')
事件源.removeEventListener('事件类型'，'处理函数'，'冒泡事件或事件捕获)

<button type="button" id="test1">测试1</button><br> <button type="button" id="test2">测试2</button> <script> var test1Ele=document.querySelector('#test1') var test2Ele=document.querySelector('#test2') function fun(){
    
            console.log('hello world');
        }
        test1Ele.addEventListener('click',fun) //监听当第一个按钮点下时输出hello world test2Ele.addEventListener('click',function(){
    
            test1Ele.removeEventListener('click',fun)
//监听当第二个按钮点下时，移出第一个按钮的 fun()函数
        })
    </script>

事件传播机制

当点击元素时，元素会触发事件，元素的父元素也会触发，父元素的父元素会触发

由外到内（事件捕获）
window=>document=>html=>body=>h=>p
由内到外（事件冒泡）
p=>h=>body=>html=>document=>window

事件传播方向是可以改变的，只需将事件监听机制
事件源.addEventListener('事件类型'，'处理函数'，'冒泡事件或事件捕获')中第三个参数改为true(事件捕获) || false(事件冒泡)
事件目标对象

触发事件后，系统创建
获取事件目标对象event
事件event的属性target

停止传播事件

阻止事件传播在任意监听器调用e.stopPropagation()，这样传播路径当前节点之后就不会被调用了，不过绑定在当前节点的其他监视器仍然被调用
e.stopImmediatePropagation()立即停止传播，其他监视器也一样
e.preventDefault()阻止浏览器默认行为

事件委托

定义：基于事件冒泡原理,子节点事件会向父节点传播，因此可以把子元素监听事件放在父元素身上，由父节点监听函数统一处理多个子元素(焦点事件不能委托)
优点：
1. 减少内存消耗，提升性能
2. 减少绑定，因为绑定在父元素身上，和目标元素没有关系，就不用每次都要绑定事件和删除事件
实例:表单框输入的内容在点击按钮时添加到列表里

<input type="text" placeholder="请输入"> <button type="button">确定</button> <ul></ul> <script> var inputELe=document.querySelector('input') var buttonEle=document.querySelector('button') var ulEle=document.querySelector('ul') //点击确定时添加 buttonEle.οnclick=()=>{
    
//创建一个li 
            let liNode=document.createElement('li')
//input里的内容给li  
            liNode.innerHTML=inputELe.value
//li加到ul里
            ulEle.appendChild(liNode)
        }
//父元素监听点击事件 ulEle.addEventListener('click',e=>{
    
            target=e.target
//移出点击节点 
            target.remove()
        })
    </script>