JavaScript事件

最新推荐文章于 2024-02-06 15:10:24 发布

yx-02

最新推荐文章于 2024-02-06 15:10:24 发布

阅读量352

点赞数

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

本文链接：https://blog.youkuaiyun.com/YANG_helloworld/article/details/122460106

版权

事件的绑定语法

语法形式1
事件监听:

              标签对象.addEventListener('click',function(){ })

语法形式2
on语法绑定

              标签对象.onclick = function(){ }

事件绑定的三要素

        标签对象 :   事件源 , 也就是绑定事件的标签对象
         click  :   事件类型 , 也就是绑定给标签对象的事件的类型.
         function(){} : 事件处理函数 , 也就是触发事件时执行的函数程序 , 是回调函数语法形式, 可以是函数名称, 可以是匿名函数.

on语法和事件监听语法的区别:

        on语法 是 通过 = 赋值绑定的事件处理函数
         = 本质上是覆盖赋值 , 后赋值的数据会覆盖之前存储的数据 , 
         也就是on语法 一个标签对象相同的事件类型只能赋值绑定一
         个事件处理函数 , 如果赋值绑定多个处理函数 , 后赋值的事件
         处理函数会覆盖之前存储的事件处理函数 , 最终执行的是最后
         赋值的事件处理函数.

事件的删除语法

on语法绑定的事件的删除
因为 on语法是 = 等于赋值操作 , 只要赋值一个null/空函数时 , 触发事件时, 就没有调用执行的函数程序 , 达到删除事件的效果.

事件监听语法的删除
需要调用专门的删除函数方法 ,

          标签对象.removeEventListener('事件类型',事件处理函数) ;

只能删除绑定的是函数名称的事件处理函数 , 如果绑定的是匿名函数则不能删除.

总的来说:
实际操作中 , 如果不需要删除事件处理函数 , 推荐使用匿名函数语法形式.
实际操作中 , 如果必须要删除事件处理函数 , 只能绑定函数名称.

事件对象 event

事件处理函数中 , 参数存储的数据数值 , 是触发事件的对象相关数据信息 .

触发事件的对象和绑定事件的不一定是同一个对象 .

触发事件时 , JavaScript程序自动向形参中存储实参 , 也就是向事件对象中自动存储触发事件的标签对象相关的数据信息.

      事件源.addEventListener(事件类型, function(事件对象){  })

事件对象.target
存储的是触发事件的标签对象
支持所有的DOM操作.

事件对象中的坐标数据
e.offsetX
e.offsetY
相对于触发事件标签对象左上角的坐标

         如果div嵌套p标签
            点击的p标签 e.offsetX e.offsetY  就是相对于 p标签左上角的坐标
            点击的div标签 e.offsetX e.offsetY  就是相对于 div标签左上角的坐标

e.clientX
e.clientY
相对于视窗窗口左上角的坐标

e.pageX
e.pageY
相对于HTML页面左上角的坐标

默认事件

      默认事件是html标签默认执行的程序结果.

阻止默认事件 :
在事件处理函数中定义一个形参 , 形参名称一般是 e / event
标签对象.addEventListener(‘事件类型’, function(e/event){
形参.preventDefault();
})

事件类型:
        1, 超链接的点击跳转
              给超链接添加点击事件

        2, form标签的点击跳转
            给form标签添加submit提交事件

        3, 鼠标右键
             给document添加contextmenu 鼠标右键事件

兼容性:

       标准浏览器
          e.preventDefault();
       
       低版本IE浏览器
          e.returnValue = false;

   <body>
       <a href="https://www.baidu.com">百度</a>
     <form action="./DOM操作的节点操作.html">
         <button>点击</button>
     </form>
   </body>

   <script>
 // a标签阻止默认跳转
         // 获取标签对象
         var oA = document.querySelector('a');

         // 阻止超链接标签 , 执行默认的点击跳转操作
         oA.addEventListener('click',function(event){
             // 阻止执行默认事件
             event.preventDefault();
         })

 // form标签阻止默认跳转
         // 获取form标签
         var oForm = document.querySelector('form');
         oForm.addEventListener('submit',function(e){

            //阻止执行默认事件
             e.preventDefault();
         })

         //鼠标右键阻止默认事件
         // 给整个document添加事件

         document.addEventListener('contextmenu ' , function(e){
             e.preventDefault();
             console.log(1110);
         })
         // contextmenu 鼠标右键 , 阻止默认事件
     </script>

阻止事件的传播 / 阻止冒泡事件

    父级标签 和后代标签 添加了相同类型的事件 , 如果 后代标签 触发事件 ,父级标签也会触发相同类型的事件 , 这样的执行原理称为 事件的传播性/冒泡事件 .

阻止事件的传播语法:

       标签对象.addEventListener('事件类型',function(e){
           e.stopPropagation();
       })

事件传播的方式
之前的旧版本中事件的传播方式有两种:

       捕获
            子级  --->  父级

       冒泡
            父级  --->  子级

现在新版本浏览器中默认只有冒泡 , 没有捕获
事件监听语法绑定事件处理函数 , 参数3 如果设定为true事件的传播执行捕获方式 .

    标签对象.addEventListener('click' , function(){ } , true) ;

常见的事件类型

window相关的事件类型

      1,  window.addEventListener('resize';function(){ })
                 浏览器视窗窗口大小监听事件

      2,  window.addEventListener('scroll';function(){ })
                 页面滚动监听事件

      3,  window.addEventListener('load',function(){ })
                 浏览器加载事件

      4,  window.open(url地址)
                 新窗口打开url连接

      5,  window.close()
                关闭当前窗口

鼠标相关的事件类型

     1,   click  鼠标左键单击
     2,   dbclick 鼠标左键双击
     3,   contextmenu  鼠标右键单击

     4,   mousedown  鼠标按键按下
          mouseup 鼠标按键抬起

         (一个单击事件的判定 ,是鼠标按键按下 和 鼠标按键抬起 两个动作)

     5,  mousemove 鼠标移动
           在定义的标签对象范围内, 移动借触发事件, 一直移动一直触发
           
     6, mouseover 鼠标移入
            经过 标签对象的边缘时 , 触发一次事件, 它的后代对象也会触发事件
           mouseout 鼠标移出
           经过后代标签边界线时 , 触发移出移入两个事件, 移出当前标签 , 移入下一个标签.

     7, mouseenter 鼠标移入
           当前的标签触发, 后代标签不会触发.
        mouseleave  鼠标移出

键盘相关的事件类型

     1,   keydown  键盘按键按下
     2,   keyup  键盘按键抬起
     3,   keypress 键盘按键按下

表单相关事件 (常见的可以获取焦点的标签)

     1,   submit  表单提交事件
     2,   focus  标签获取焦点
     3,   blur 标签失去焦点
     4,   change  标签失去焦点同时数据改变
     5,   input 输入数据

移动端事件

      1,     touchstart 触摸开始
      2,     touchend 触摸结束
      3,     touchmove 触摸移动

特殊事件

           transitionstart 过渡开始
           transitionend 过渡结束

           animationstart 动画开始
           animationend 动画结束

事件委托语法

不是直接给标签对象绑定事件 , 而是给父级元素绑定事件 , 通过事件对象.target 来判断触发事件的不同的标签对象 , 以执行不同的函数程序.

    1,  标签对象.target 就是一个 DOM 标签对象 . 
    2,  标签对象.target.tagName 是大写英文字符的标签名称
    3,  标签对象.target 执行DOM 操作判断 点击的是什么标签

实际操作中 ,只要根据不同的条件能触发不同的if判断 ,执行不同的程序.

事件委托语法的优点:

1, 只给一个标签对象添加事件 , 通过判断,执行不同的程序 , 执行效率更高 .

2, 更加有利于动态渲染生成的标签来添加事件 .

        <1> 一开始没有 动态生成的标签
           一开始就获取标签对象 , 无法获取到的 获取结果只能是null , 不能直接绑定事件

        <2> 一开始有 之后 会 动态写入替换这个标签
        一开始绑定的事件 如果替换写入了其他标签 , 这个一开始就存在的标签就会被覆盖替换掉 , 绑定的事件也就没有了

 因此 ,动态渲染生成的标签 使用 事件委托 , 给一直存在的父级 添加事件 , 通过事件委托判断事件对象.target 是什么
        标签 触发什么程序.

<h1>
        我是h1标签
        <span>我是span标签</span>
        <a href="JavaScript:;">我是a标签</a>
      </h1>
      
...
        var oH1 = document.querySelector('h1');
        oH1.addEventListener('click',function(e){
          if(e.target.tagName === 'H1'){
              console.log('我是h标签') ;
            } else if(e.target.tagName === 'SPAN'){
              console.log('我是span标签') ;
            }else if(e.target.getAttribute('href') === 'JavaScript:;'){
               console.log('我是a标签');
            }
        })