事件导读续

最新推荐文章于 2024-08-09 21:30:00 发布

小白在追赶

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量88

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_59179354/article/details/124233733

版权

事件元素

<body>
    <div>11</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick= function(event){
        //     console.log(event);
        // }
        div.addEventListener('click',function(event){
            console.log(event);
        })
  //event就是一个事件对象 写到侦听函数的小括号里 当形参来看
  //事件对象只有有了对象才会存在，它是系统给我们自动创建的，不需要我们传递参数
  //事件对象是我们事件的一系列相关数据的集合
  //事件对象我们可以自己命名 比如event、evt、e
  //事件对象也有兼容性问题ie678 通过window.event
    </script>
</body>

事件对象的常见属性和方法

e.target 返回触发事件的对象标准

e.target和this的区别：

e.target 返回的是触发事件的对象（元素）点击了哪个元素就返回那个元素

this 返回的是绑定事件的对象（元素）绑定谁就返回谁

了解：this与e.currentTarget非常相似
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul =document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // console.log(this);//绑定的是ul 返回ul
            console.log(e.target);//点击谁返回谁
        })
    </script>
</body>

e.type 返回事件的类型比如 click mouseover .....不带on

e.preventDefault();阻止默认行为(事件)让链接不跳转或者不让提交按钮提交

<body>
    <a href="http://www.baidu.com">百度</a>

    <script>
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();//dom标准写法
        })
    //传统的注册方式（三种）
      a.onclick= function(e){
          //普通浏览器
          e.preventDefault();//方法
          //低版本浏览器 ie678 returnValue 属性
          e.returnValue;
          //我们还可以通过return false 也能阻止默认行为 没有兼容性
          return false; //return 后面的代码不在执行
         
      }
    </script>
</body>

阻止事件冒泡 dom推荐的标准 stopPropagation()

    <div class="father">
        <span class="son"></span>
    </div>
    <script>
        var div = document.querySelector('.father');
        var span = document.querySelector('.son');
        div.addEventListener('click',function(e){
            alert('father')
        })
        span.addEventListener('click',function(e){
            alert('son')
            e.stopPropagation()//阻止冒泡
            // e.cancelBubble = true //ie678写法      
        })
    </script>

事件委托（代理、委派）

事件冒泡本身的特征，有好有坏需要灵活掌握，

冒泡好的方面常景：

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

点击每一个li都会弹出对话框，以前需要给每一个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。可以通过事件委托

事件委托原理：不是给每一个子节点单独设置事件监听器，而是事件监听器设置在父节点上，利用冒泡原理影响设置的每一个子节点。

以上案列：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用：我们只操作一次DOM，提高了程序的性能。
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            alert('ul');
            //还可以改变li样式 e.target 可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

常用鼠标事件

onclick 鼠标点击左键触发 onmousedown鼠标按下触发

onmouseover 鼠标经过触发 onmouseout鼠标离开触发

onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发

onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发

案列：照片跟谁鼠标移动而移动
    <style>
        img{
            position: absolute;
            width: 20px;
            height: 50px;
        }
    </style>
</head>
<body>
    <img src="../image/1.jpg" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
             pic.style.top = y+'px';
             pic.style.left = x+'px';

        })
    </script>
</body>
<body>
    不愿意分享的文字
    <script>
        //1、contextmenu 可以禁用鼠标右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        //2、禁止选中文字selectstart
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>
</body>

鼠标事件对象：

<body>
    <script>
        document.addEventListener('click',function(e){
            //1、client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //2、page 鼠标在页面文档的x和y坐标(开发多用这个)
            console.log(e.pageX);
            console.log(e.pageY);
            //3、screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
            
        })
    </script>
</body>

常用键盘事件：

注：传统方式注册事件要加on

三个事件的执行顺序是：keydown---keypress---keyup

keypress和前面两个的区别是：它不能识别功能键

<body>
    <script>
        //1.keyup 按键弹起的时候触发
        document.addEventListener('keyup',function(){
            console.log('弹起')
        })
         //1.keydown 按键按下的时候触发  能识别功能键
        document.addEventListener('keydown',function(){
            console.log('按下')
        })
        //1.keypress 按键按下的时候触发  不能识别功能键 如:ctrl、shift 、左右箭头
        document.addEventListener('keypress',function(){
            console.log('按下keyprsss')
        })

    </script>
</body>

键盘事件对象：键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

keyup和keydown 事件不区分字母的大小写比如：a和A得到的都是65

keypress事件区别字母大小写比如：a 97 和A得到的是65

实际比较多用keydown和keyup,他们都可以识别功能键
<body>
    <script>
        document.addEventListener('keyup',function(e){
            console.log('UP'+e.keyCode);
        })

        document.addEventListener('keypress',function(e){
            console.log('press'+e.keyCode);
        })
    </script>
</body>

小白在追赶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件导读续

事件元素<body> <div>11</div> <script> var div = document.querySelector('div'); // div.onclick= function(event){ // console.log(event); // } div.addEventListener('click',function(ev.
复制链接

扫一扫