程序员社区

JS基础9

2022-05-02 分类：未分类 阅读(490)

事件

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

定义

  1. 事件源
  2. 事件类型
  3. 事件处理函数

事件绑定两种方法

  • 绑定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

  1. 只要触发事件，系统生成创建事件对象Event
  2. 获取事件对象，在事件处理函数中获取
  3. 更改事件对象名
    事件处理函数定义形参，触发时Event自动赋值给形参
  4. 事件兼容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 抬起事件

盒子随鼠标移动

  1. 盒子开始隐藏display: none;
  2. 鼠标移入时盒子显示minbox.style.display = 'block'
  3. 获得鼠标坐标e.clientX和e.clientX
  4. 判定盒子不要超出边界
  5. minbox.style.top赋值
  6. 鼠标移出时再次隐藏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 键盘按下再抬起事件

注：键盘响应顺序

  1. 对于字符键，keydown=>keypress=>keyup
  2. 对于非字符键，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 获取焦点

注：

  1. 焦点事件没有及时性，事件不会跟随文本内容变化而变化，在事件触发后才会发生变化
  2. onblur常用于文本内容验证
  3. 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>

事件传播机制

  1. 当点击元素时，元素会触发事件，元素的父元素也会触发，父元素的父元素 会触发
  • 由外到内（事件捕获）
    window=>document=>html=>body=>h=>p
  • 由内到外（事件冒泡）
    p=>h=>body=>html=>document=>window
  1. 事件传播方向是可以改变的，只需将事件监听机制
    事件源.addEventListener('事件类型'，'处理函数'，'冒泡事件或事件捕获')中第三个参数改为true(事件捕获) || false(事件冒泡)
  2. 事件目标对象
  • 触发事件后，系统创建
  • 获取事件目标对象event
  • 事件event的属性target

停止传播事件

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

事件委托

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

赞(0) 打赏
未经允许不得转载：IDEA激活码 » JS基础9

相关推荐

  • 暂无文章

IDEA永久激活破解教程,IDEA激活码

pycharm激活破解教程,pycharm激活码

Java视频资源

Java电子书

DataGrip激活教程 Docker Git教程 IntellIJ idea IntelliJ IDEA激活码 Java Java IO Java基础 Java基础面试题 Java集合面试题 Java面试题 JVM JVM面试题 Linux MySQL MySQL面试题 Nginx PyCharm PyCharm激活 Redis redis SpringBoot SpringBoot SpringBoot面试题 Web开发 剑指Offer系列 多线程 多线程并发面试题 字符串面试题 数据库 数据库 数据结构与算法 未分类 爬虫 电子书 软件下载

一个分享Java & Python知识的社区