事件监听: 语法: 元素.addEventListener('事件类型',事件处理函数)

事件对象:简单来说就是事件触发时产生的对象,事件对象是事件处理函数中加入的第一个形参,这个形参通常用e、ev、event、ev_、e_来表示

事件对象常见属性:

事件对象.key---(e.key)

常用来判断用户按下的键盘值

document.addEventListener('keyup', function (e) {
      console.log(e.key); //得到的键盘值是字符串类型
    }) 
         

利用 e.key 得到组合键: ctrl + A :

//给document注册事件
 document.addEventListener('keydown',function (e) {
     //判断用户按下的键盘值为 ctrl 和 A
      if (e.ctrlKey && e.key === 'A') {
        console.log(123);
      }
    })

事件对象.target---(e.target)

用于事件委托中找到目标元素

事件委托:把时间注册给上级元素 (利用事件冒泡)

步骤:
 1.给上级元素注册事件
 2.利用  事件对象.target 找到目标元素
 3.用  事件对象.target.tagName  判断标签名  tagName返回的标签名是大写

  <div>
    <h1>一级标题</h1>
    <p>1</p>
    <p>2</p>
    <h2>二级标题</h2>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>

  <script>

    // 利用事件委托,点击p使p的背景颜色变成粉色
    const div = document.querySelector('div')
    div.addEventListener('click',function (e) {
     if ( e.target.tagName === 'P') {
      //  如果p的背景颜色是pink,点击p 背景颜色消失;如果p没有颜色,点击p使p的背景颜色变为pink
       if (e.target.style.background === 'pink') {
        e.target.style.background = ''
       } else {
        e.target.style.background = 'pink'
       }
      
     }
    })      
  </script>

事件对象.bubbles---(e.bubbles)

用来查看可以查看事件类型是否支持冒泡,不支持返回false,支持返回true

 document.addEventListener ('click',function (e){
      console.log(e.bubbles);  //true
    })

 document.addEventListener ('mouseenter',function (e){
      console.log(e.bubbles);  //false
    })

其他

1. type 获取当前的事件类型
2. clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
3. offsetX/offsetY 获取光标相对于当前DOM元素对象左上角的位置
4. ctrlKey 检测按下的是不是ctrl键 是ctrl键返回true

事件对象常见方法

事件对象.stopPropagation()---e.stopPropagation()

用于阻止事件冒泡或者说阻止事件流

<div> 
  <p>abc</p> 
</div>

const p = document.querySelector('p'); 
const div = document.querySelector('div');  
                                            
 p.addEventListener('click', function (e) {  
 console.log('p');                           
 // 阻止冒泡：                              
// 事件对象.stopPropagation();                  
 e.stopPropagation();                        
 });                                         
                                           
div.addEventListener('click', function () { 
console.log('div')                          
 });

事件对象.preventDefault()--- e.preventDefault()

阻止元素默认行为

<a href="http://www.jd.com">链接</a>
<script>
    //例: 阻止a链接跳转
       const a = document.querySelector('a')
      a.addEventListener('click',function (e) {
        e.preventDefault()
      })
  </script>

补

关于事件对象的属性和方法可以打印在控制台查看

 document.addEventListener('click', function (e) {  
 console.log(e);                                                  
 });