JavaScript之事件操作

目录

鼠标类事件

 鼠标左键单击（鼠标按下+鼠标抬起）：

 鼠标左键双击

 右键单击

鼠标按键按下

 鼠标键抬起

mousemove

 键盘类事件

触摸类事件

表单事件

1.获取焦点

2.失去焦点

3.失去焦点并且数据改变

4.input输入事件

事件对象

事件传播

键盘事件 事件对象数据信息

点击事件 事件对象的相关数据

事件委托

---

鼠标类事件

 鼠标左键单击（鼠标按下+鼠标抬起）：

         // 获取div标签
      var oDiv = document.querySelector('div');

      // 左键单击事件
      oDiv.addEventListener('click' , function(){ console.log(111) });

 鼠标左键双击

         // 获取div标签
      var oDiv = document.querySelector('div');

      // 左键双击事件
      oDiv.addEventListener('dbclick' , function(){ console.log(111) });

 右键单击

         // 获取div标签
      var oDiv = document.querySelector('div');

      // 右键单击事件
      oDiv.addEventListener('contextmenu' , function(){ console.log(111) });

默认效果可以阻止；

 document.addEventListener( 'contextmenu' , function( event ){
            // 阻止默认事件
            event.preventDefault();

        })

鼠标按键按下

var oDiv = document.querySelector('div');

        oDiv.addEventListener( 'mousedown' , function(){
            console.log('鼠标按键按下了');
        })

 鼠标键抬起

var oDiv = document.querySelector('div');

        oDiv.addEventListener( 'mouseup' , function(){
            console.log('鼠标按键抬起了');
        })

mousemove

在 事件源 范围内移动 会触发事件,鼠标移动才能触发事件  鼠标只是悬停 不能触发事件

   var oDiv = document.querySelector('div');
        oDiv.addEventListener( 'mousemove' , function(){
            console.log('div的鼠标移动了');
        })

 7.鼠标移入移出

1. 事件源标签 和 事件源标签的后代标签 都会触发

mouseover 鼠标移入

mouseout 鼠标移出

特点：经过 后代标签边界线时 同时触发 移入移出两个事件 触发执行的顺序是 先移出 再移入

    2. 事件源标签 会触发

     mouseenter 鼠标移入    mouseleave 鼠标移出

var oDiv = document.querySelector('div');

        //  鼠标移入事件    over
        oDiv.addEventListener( 'mouseover' , function(){
            console.log('over移入事件触发了')
        })


        //  鼠标移入事件    enter
        oDiv.addEventListener( 'mouseenter' , function(){
            console.log('enter移入事件触发了')
        })



        //  鼠标移出事件    out
        oDiv.addEventListener( 'mouseout' , function(){
            console.log('out移出事件触发了')
        })


        //  鼠标移出事件    leave
        oDiv.addEventListener( 'mouseleave' , function(){
            console.log('enter移出事件触发了')
        })

 键盘类事件

1.不是所有的标签都能直接绑定键盘事件，只有可以获取焦点的标签支持直接绑定键盘事件

input   select  textarea    button  a

其他标签需要使用 事件抛发的语法形式 绑定事件

// 一般是给整个文档绑定键盘事件
        document.addEventListener( 'keydown' , function(event){
             console.log( 111 ) });

        document.documentElement.addEventListener( 'keydown' , function(){
             console.log( 222 ) });

        document.body.addEventListener( 'keydown' , function(){ 
            console.log( 333 ) });

不是所有的按键都会触发keypress，但是keydown所有的键都会触发

触摸类事件

移动端设定，pc端不适应

1. touchstart:触摸开始
2. touchend:触摸结束
3. touchmove：触摸滑动

表单事件

1.获取焦点

 oIpt.addEventListener('focus', function () {

            // 让span标签显示
            oSpanMsg.style.display = 'block';
        })

2.失去焦点

 oIpt.addEventListener('blur', function () {

            // 让span标签隐藏
            oSpanMsg.style.display = 'none';
        })

3.失去焦点并且数据改变

数据改变是：获得焦点与失去焦点数据不相同；

 oIpt.addEventListener('change', function () {
            
           
            console.log('change');
       
 
        })

4.input输入事件

 oText.addEventListener( 'input' , function(){
            // 获取 文本域输入的内容
            var text = oText.value ;

            // 在 文本域span标签中写入字符串长度数据
            oSpanText.innerHTML = `${text.length} / 50` ;

        })

5.load输入事件

javaScript中最常用到的一个事件就是load。当页面完全加载后（包括所有图像、javaScript文件、css文件等外部资源），就会触发window上边的load事件。

常用于Ajax请求；

oBtn.addEventListener( 'click' , ()=>{

            // 创建 ajax 实例化对象
            const xhr = new XMLHttpRequest() ;

            // 设定 open() 请求方式 请求地址
            xhr.open( 'post' , 'http://localhost:8888/test/fourth' );

            // 设定 请求头格式 正确解析携带参数 
            // 通过 一个固定的代码程序 执行的
            xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );

            // 设定 send() 发送请求
            // post请求方式 在 send() 中 以 键值对字符串形式 携带参数
            // '键名=键值&键名=键值...' 
            // 键名是后端程序规定好的键名 键值是input标签输入的数据
            xhr.send(`name=${oIptName.value}&age=${oIptAge.value}`);

            // 通过 load事件 请求结束 执行程序
            xhr.addEventListener( 'load' , ()=>{

                console.log( xhr.response );

            })
        })

事件对象

1. 在设定事件处理函数时，在事件处理函数中设定形参，一般设定形参为e/event

2.  触发事件时 JavaScript程序 自动向这个形参赋值实参，赋值的内容是一个对象形式的数据

3. 事件对象.target
   1. 触发事件的标签对象
   2. 可以是事件源，可以是事件源后代
   3. 本质上是DOM操作获取对象

事件传播

产生原因：事件源与父级标签绑定了相同的事，当事件源执行时，父标签也会触发相同的事件操作

默认传播方式：当前------父级标签 ；也被称为冒泡传播

设置传播方式：父级标签-----当前标签；被称为捕获传播；

当前标签.addEventListener(事件类型，执行函数，true)；

阻止事件传播：事件对象.stopPropagation()

键盘事件 事件对象数据信息

触发键盘事件时 事件对象存储的是 按键相关的数据信息

    事件对象.keyCode

    事件对象.witch

    触发键盘事件 按键的编号

 document.addEventListener( 'keydown' , function(event){
            console.log( event ); 

            // 判断同时按住 ctrl + v 
            // 按键v 的编号是 86 ctrlKey 是 true 表示两个案件同时按住
            if( event.keyCode === 86 && event.ctrlKey ){
                console.log( 'ctrl + v 同时按下了' )
            }

        })

点击事件 事件对象的相关数据

1. 鼠标点击位置距离触发事件标签左上角坐标
   1. 事件对象.offsetX
   2. 事件对象.offsetY
2. 鼠标点击位置距离body标签左上角坐标
   1. 事件对象.pageX
   2. 事件对象.pageY
3. 鼠标点击位置距离可视窗口左上角坐标
   1. 事件对象.clientX
   2. 事件对象.clientY

事件委托

一般用于动态生成页面的标签 绑定事件，给父级标签绑定事件；

优点：通过 事件对象.target 判断点击的是什么标签 触发执行程序操作；

  <div>
        我是div标签
        <p>我是p标签</p>
        <span name="span1">我是span标签1</span>
        <span name="span2">我是span标签2</span>
        <h1>我是h1标签</h1>
    </div>
    <script>
        var oDiv = document.querySelector('div');

        oDiv.addEventListener('click', function (event) {

            // console.log(event.target, event.target.tagName);
            if (event.target.tagName.toLowerCase() === 'div') {
                console.log('我是div标签');
            } 
            else if (event.target.tagName === 'P') {
                console.log('我是P标签');
            }
            else if (event.target.getAttribute('name') === 'span1') {
                console.log('我是span1标签');
            }
            else if (event.target.getAttribute('name') === 'span2') {
                console.log('我是span2标签');
            }
        })
    </script>