事件传播以及相关事件概念

最新推荐文章于 2022-11-01 20:22:07 发布

APPTX4869

最新推荐文章于 2022-11-01 20:22:07 发布

阅读量166

点赞数

文章标签： linq html wpf

本文链接：https://blog.csdn.net/APPTX4869/article/details/121974715

版权

键盘事件：

只有window，document，表单元素可以触发

keydown

keypress

keyup（触发一次）

键盘事件的事件对象的属性：

事件对象包含一系列的信息：

哪些信息：

1. 事件源头

2. 事件类型

3. 按下哪个键（ev.keyCode ：返回数字，每个键对应不同的数字，回车键对应的13 ）

4. 是否按下了ctrl（ev.ctrlKey: 返回true代表你按了ctrl 返回false没有按下ctrl）

（ev.altKey: 返回true代表你按了alt 返回false没有按下alt）

$('input').onkeyup=function(e){

        var ev=e || window.event

        console.log(ev.keyCode);
    }

$('input').onkeyup=function(e){

        var ev=e || window.event

        // console.log(ev.keyCode);

        console.log(ev.altKey);     //按下其他键的同时按下alt键返回true，否则false
    }

案列按下ctrl键+enter键添加一个li到ul

<body>
    <input type="text">
    <ul>
        
    </ul>
</body>






<script src="../js/js.js"></script>
<script>
    // var ipt=document.querySelector('input')
    // var ul=document.querySelector('ul')
    
    // ipt.onkeyup=function(e){
    //     var ev=e || window.event;
    //     //2. 判断是否按下了ctrl+enter键
    //     if(ev.keyCode==13 && ev.ctrlKey)

    //     var li=document.createElement('li')

    //     li.innerHTML=this.value
    //    ul.appendChild(li)
    //    this.value=''

       
    // }





      外部引入式获取

     $('input').onkeyup=function(e){
        var ev=e || window.event;
        //2. 判断是否按下了ctrl+enter键
        if(ev.keyCode==13 && ev.ctrlKey)

        var li=document.createElement('li')

        li.innerHTML=this.value
       $('ul').appendChild(li)
       this.value=''

       
    }

1. 获取元素的大小

1.1 元素的可视宽（不包含边框） odiv.clientWidth

1.1 元素的占位宽（包含边框） odiv.offsetWidth

2,获取浏览器窗口的宽度

window.innerWidth( 包含滚动条）

document.body.clientWidth（不包含滚动条）

3. 元素.offsetLeft: 获取距离它最最近的具有定位的父级元素的左偏移量，父级没有定位，会相对于body来获取

注意：元素（绝对定位的）

元素.offsetTop: 获取距离它最最近的具有定位的父级元素的上偏移量，父级没有定位，会相对于body来获取

注意：元素（绝对定位的）

事件流（事件传播）

描述页面接收事件的顺序

事件发生时，会在元素节点之间传播的顺序

网景公司：事件捕获：事件发生时，从最不具体元素，依次向下传播到最具体的元素（外-》内）

微软公司：事件冒泡：事件发生时，从最具体元素，依次向上传播到最不具体的元素（内-》外）

w3c:规定：事件传播有三个阶段

1. 捕获阶段

2. 目标阶段(具体点击的是谁 ev.target)

3. 冒泡阶段

dom2级可以支持捕获

事件源.addEventListener('事件类型',事件处理函数，布尔true事件捕获、false事件冒泡,不写默认是冒泡)

dom0级不支持捕获写法

       <style>
            div{
                width: 300px;
                height: 300px;
                background-color: #000;
            }
            p{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            a{
                 display: block;
                width: 100px;
                height: 100px;
                background-color: aquamarine;
            }
        </style>






 function $(id){
        return document.querySelector(id)
    }
    // $('a').onclick = function(){
    //     alert('a')
    // }
    // $('p').onclick = function(){
    //     alert('p')
    // }
    // $('div').onclick = function(){
    //     alert('div')
    // }
   $('a').addEventListener('click',function(){
       alert('a')
   },true)
   $('p').addEventListener('click',function(){
       alert('p')
   },true)
   $('div').addEventListener('click',function(){
    alert('dic')
   },true)
   $('a').addEventListener('click',function(){
       alert('a')
   },false)
   $('p').addEventListener('click',function(){
       alert('p')
   },false)
   $('div').addEventListener('click',function(){
    alert('dic')
   },false)

阻止事件冒泡：

为啥要阻止呢？

按钮，div

点击按钮，div显示

点击body。div隐藏

var oDiv = document.querySelector('div')

var oBtn = document.querySelector('button')

// 点击按钮，实际上也点击body

// 会先执行obtn上的事件，再走body事件

所以阻止事件冒泡：

1. ev.stopPropagation() 阻止事件冒泡标准写法

2. ev.cancelBubble = true 阻止事件冒泡 IE支持的写法（了解）

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <div></div>
</body>






 var oDiv = document.querySelector('div')
    var oBtn = document.querySelector('button')
    // 点击按钮，实际上也点击body
    // 会先执行obtn上的事件，再走body事件

    // 所以阻止事件冒泡：
    /* 
       1. ev.stopPropagation()  阻止事件冒泡标准写法
       2. ev.cancelBubble = true 阻止事件冒泡 IE支持的写法（了解）
    */
    oBtn.onclick = function (e) {
        var ev = e || window.event;
        oDiv.style.display = 'block'
        ev.stopPropagation();
        console.log(ev);
    }
    document.body.onclick = function () {
        oDiv.style.display = 'none'

事件默认行为：

a的跳转行为

鼠标右键会有一个弹出默认菜单的行为。。。

需求：点击a标签，显示一个div，不进行跳转

所以：

阻止事件默认行为：1.ev.preventDefault();

2.return false;( 只支持dom0级)

3.ev.returnValue = false; ie支持（了解）

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

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

    </div>
</body>







var oA = document.querySelector('a')

    var oDiv = document.querySelector('div')

    oA.onclick = function (e) {

        var ev = e || window.event;

        //    ev.preventDefault();//阻止事件默认行为方式

        oDiv.style.display = 'block'

        return false;//阻止事件默认行为方式2

    }

需求：想获取具体点击的是谁

ev.target:获取点击的具体的元素

ev.srcElement:获取点击的具体的元素(ie支持的写法)

 var oDiv = document.querySelector('div')

    oDiv.onclick = function (e) {

        var ev = e || window.event;

        // this指的是绑定事件的那个元素

        // console.log(this);

        // 想获取点击的具体是谁

        console.log(ev.target);

事件的委托

每一个添加点击事件：

1. 先获取所有的li

2. 遍历

3. 给每一个添加点击事件

缺点：每一个li身上都有一个onclick

占用系统内存，资源消耗大

事件委托可以解决这个事情：

原理：利用的是冒泡元素，把绑定事件委托父元素来处理

好处：1. 资源消耗少，降低内存占用，

2. 新增元素也会获取到父元素的事件

var oUl = document.querySelector('ul')
    var oBtn = document.querySelector('button')

    // 普通的绑定元素方式:发现新增的元素没有绑定上li的变黄色的事件
    // var oLis = oUl.children;//所有的li
    // for (var i = 0; i < oLis.length; i++) {
    //     oLis[i].onclick = function () {
    //       this.style.backgroundColor ='yellow'
    //     } 
    // }
    // 点击新增功能









事件委托法

    oBtn.onclick = function(){
        var oLi = document.createElement('li');
        oLi.innerHTML = '6'
        oUl.appendChild(oLi)
    }
    // 事件委托的方式来添加点击事件，发现新增元素也自动的获取到了父元素绑定的事件
    oUl.onclick = function(e){
     var ev = e || window.event;
     ev.target.style.background = 'yellow'