事件学习讲解

最新推荐文章于 2022-11-09 11:45:48 发布

男孩12

最新推荐文章于 2022-11-09 11:45:48 发布

阅读量365

点赞数

分类专栏： js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_51666715/article/details/122261522

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

事件常见类型

事件:onchage()—html元素改变
事件:onclick：用户点击HTML元素
事件：onmouseover—用户将鼠标移入到HTML元素上
事件:onmouseout— 用户将鼠标移动HTML元素外
事件 : onkeydown -----用户按下键盘按键
事件—onkeyup ：用户松开键盘按键
事件:onkeypress–用户按下按键
事件:onload—浏览器已完成页面加载
事件oninput----键盘输入事件
事件touchStart—触碰开始
事件touchMove–滑动
事件touchEnd—触碰结束

event.key可以获得按键的值

 <script>
      window.onclick=function(even){
        console.log(even.key);
      }
    </script>

onchange事件

<body>
   <input type="text">
   <script>
     var input=document.querySelector('input');
     input.onchange=function(){
       alert('input的值发生改变了');
     }
   </script>
  </body>

事件对象

每个事件, js系统都会提供事件对象, 对象包含了很多内容

event.type 事件类型
event.key 触发事件的按键(针对input,keypress等键盘事件)
event.target 事件触发的目标元素
currentTarget 事件绑定的元素
event对象(事件对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">btn</button>
    <button id="btn2">btn2</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#btn1').on('dblclick', function() {
            console.log(event);
        })
        $('#btn2').on('dblclick', function(ev) {
            console.log(ev);
        }) 
         $('#box').on('click', function(ev) {
            console.log('点击的元素: ',ev.target);
            console.log('事件绑定的元素: ',ev.currentTarget);
        })
    </script>
</body>
</html>

事件冒泡

1. 事件流(事件传播方式)

事件捕获阶段
目标阶段
事件冒泡阶段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
        button {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>

</head>

<body>
    <div id="box">
        <button>点我</button>
    </div> 
     
    <script>
        var box = document.querySelector('#box');
        box.addEventListener('click',function() {
            alert('box被点击了');
        },false);


         var button = document.querySelector('button');   
         button.addEventListener('click',function() {
            alert('button被点击了')
         },false)

    </script>
</body>

</html>

事件冒泡应用: 事件委托#
// 原生js事件托管

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {cursor: pointer;}
        ul {
            border: 1px solid;
        }
    </style>

</head>

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>

    <script>
         var ul = document.querySelector('ul');
         ul.onclick = function() {
             console.log(event.target);
         }
    </script>
</body> 
</html>

// jquery事件托管

原生js事件只要点击ul范围内的任意元素, 都会触发事件, 而jquery事件则只有点击li才触发事件, 会更方便

3. 阻止默认事件和阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Document</title>
</head>
<body>
  <div class="box">
    <a href="http://www.baidu.com">百度</a>
  </div>

  <script>
    document.querySelector('a').onclick = function() {
      // 阻止默认事件
      event.preventDefault();
      // 阻止事件冒泡
      event.stopPropagation();
      console.log(2222);
    } 

    document.querySelector('.box').onclick = function() {
      alert('我是父元素');
    }
  </script>
</body>
</html>

男孩12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件学习讲解

事件常见类型事件:onchage()—html元素改变事件:onclick：用户点击HTML元素事件：onmouseover—用户将鼠标移入到HTML元素上事件:onmouseout— 用户将鼠标移动HTML元素外事件 : onkeydown -----用户按下键盘按键事件—onkeyup ：用户松开键盘按键事件:onkeypress–用户按下按键事件:onload—浏览器已完成页面加载事件oninput----键盘输入事件事件touchStart—触碰开始事件touchMove–滑
复制链接

扫一扫