【JavaScript】学习十三天（DOM事件、事件类型、事件对象）

最新推荐文章于 2024-11-18 12:10:44 发布

W菜菜

最新推荐文章于 2024-11-18 12:10:44 发布

阅读量720

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wu12378900/article/details/121951968

版权

1.DOM事件

事件：能被javascript监听到的行为

事件三要素：

事件源：触发事件的源头，谁触发的这个事件
事件类型：是哪种时间类型，如：鼠标事件，键盘事件…（click、dblclick、mouseover、mouseout…）
事件处理函数：事件触发后执行的行为（{ }中会执行的代码）

this

事件中的this：指向事件源
普通函数中的this：指向的是window

//    1、形式一
        oBtn.onclick = function(){
        this指向的就是oBtn  
      }
       
    //   2、形式二
        oBtn.onclick =  fn/* （不要带括号）  */  
        function fn(){   this指向的就是oBtn   }

    //    3、形式三 
        <button onclick = 'del(this)'></button>
        function del(obj){
    // obj 指代的就是点击元素
    }

    //    4、 普通函数内的this
        function method(){
        consoloe.log(this)
    }
    method()

事件绑定（事件注册）：

1.DOM 0级事件绑定

语法：事件源 . on事件类型 = 事件处理函数
例子：div . onclick = function ( ) { }
缺点：不能给同一个对象的同一个事件进行多次绑定
优点：书写简单，兼容性好

var oDiv = document.querySelector('div')

 // 1. DOM0级事件绑定
    // A写的
    oDiv.onclick = function () {
        this.style.backgroundColor = 'yellow'
    }
    // B写的
    oDiv.onclick = function () {
        this.innerHTML = 'yellow'
    }

2.DOM 2级事件绑定（事件监听）

语法：事件源 . addEventListener( " 事件类型"，事件处理函数，布尔值 )；第三参数可以省去
语法：事件源 . addEventListener( " 事件类型"，事件处理函数)；
优点：可以给同一个对象的同一个事件进行多次绑定
缺点：兼容性不好（IE低版本的不支持该写法）

 // 2. DOM2级事件绑定

    // A
    oDiv.addEven   tListener('click',function(){
        this.style.backgroundColor = 'yellow'
    })
    // B
    oDiv.addEventListener('click',function(){
        this.innerHTML = 'yellow'
    })

3.IE低版本支持

语法：事件源 . attachEvent(‘on事件类型’，事件处理函数 )；只有两个参数

事件解绑

1.DOM 0级解绑

语法：事件源 . on事件类型 = null
特点：由于赋值的特殊性，将原来的事件覆盖了

 var oBtn = document.querySelector('button')
    var oDiv = document.querySelector('div')

    // 1. DOM0级事件绑定
    // 鼠标已入
    oBtn.onmouseover = function () {
        oDiv.style.backgroundColor = 'yellow'
    }
    // 鼠标移出
    oBtn.onmouseout = function () {
        oDiv.style.backgroundColor = 'pink'
        // 移出的时候把移入事件给清除了
        oBtn.onmouseover = null;
    }

2.DOM 2级解绑

语法：事件源 . removeEventListener(‘事件类型’,事件处理函数)

注意：先绑定再移除（函数在外面单独书写）

1.绑定：事件源 . `addEventListener`('事件类型',fn)
2.移除：事件源 . `removeListener`('事件类型',fn)


var oBtn = document.querySelector('button')
    var oDiv = document.querySelector('div')
    
// 2. DOM2级事件绑定和解绑

    // 绑定了两个事件
    oBtn.addEventListener('mouseover',fn1)
    oBtn.addEventListener('mouseout',fn2)
    function fn1(){
        oDiv.style.backgroundColor = 'yellow'
    }

    function fn2(){
        oDiv.style.backgroundColor = 'pink'
        // 移除的时候，解绑移入事件
        oBtn.removeEventListener('mouseover',fn1)
    }

事件类型

JS给我们提供了可以直接使用的事件

JS内事件大致分为几类：

鼠标事件

click ：鼠标左键单击
dblclick：鼠标左键双击
mouseover：鼠标移入（光标从外面进入事件源范围内）
mouseout ：鼠标移出（光标从事件源内部离开）
mousenter ：鼠标移入
mouseleave ：鼠标移出
mousedown ：按下（拖拽）
mousemove ：移动（光标只要位置变换就会触发）（拖拽）
mouseup ：抬起（拖拽）
contextmenu ：鼠标右键单击

表单事件

focus：获取焦点时触发
blur：失去焦点时触发
input：输入内容时触发
change：内容改变时触发
submit：提交时触发
reset：重置时触发

键盘事件

注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的

keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件
keypress：按下某个键盘键并按住时触发（一般之监听数字和字母，不能监听特殊按键）
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次

浏览器事件

注意：都只有仅有window触发

window.onscroll = function(){}：页面滚动时触发
window.onresize = function(){}：页面窗口大小变化时触发
window.onload = function(){}：页面资源（图片，音频，视频，dom节点）加载完成时触发

事件对象

概念：记录本次事件的所有信息
获取事件对象
1.标准浏览器下

直接在事件处理函数位置书写一个形参, 会在事件触发的时候

odiv.onclick = function(e){
                e就事件对象
            }

由浏览器自动传递实参
传递的实参就是事件对象

2.IE 低版本
事件处理函数的内部用window.event来表示事件对象
3.处理兼容性问题：

odiv.onclick = function(e){
                var ev = e || window.event;//ev就是兼容性的事件对象
         }

鼠标事件对象的相关信息（坐标点）

clientX和clientY：光标相对于浏览器可视窗口左上角的坐标位置
pageX和pageY：光标相对于文档流左上角的坐标位置
offsetX和offsetY：光标相对于触发事件的元素左上角的坐标点

例子：拖拽

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        img {
            position: absolute;
            cursor: move;
        }
    </style>
</head>

<body>
    <img width="200px"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F7xo6kd.com1.z0.glb.clouddn.com%2Fupload-ueditor-image-20160623-1466668363029093881.jpg&refer=http%3A%2F%2F7xo6kd.com1.z0.glb.clouddn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642131089&t=d61e529f34bf53ad7bfa73c7f5c758ba"
        border='1px' alt="">
</body>

</html>
<script src="./tool.js"></script>
<script>
    /* 
      鼠标到哪儿，河马根到哪儿

      事件：移动事件（onmousemove）
      在哪儿移动：在整个文档中 document


    //   获取物体的占位大小：oDIv.offsetWidth(自身大小 包含 width+padding+border)
    //   获取物体的可视大小：oDIv.clientWidth(自身大小 包含 width+padding)
    */
    document.onmousemove = function (e) {
        var ev = e || window.event;

        var x = ev.clientX;//获取光标距离浏览器窗口的左偏移量
        var y = ev.clientY;
        // $('img').offsetWidth 图片本身的宽度

        // 把x设置给图片的left
        $('img').style.left = x - $('img').offsetWidth / 2 + "px"
        $('img').style.top = y - $('img').offsetHeight / 2 + "px"
    }

</script>