js 事件行为以及传播和委托

最新推荐文章于 2024-09-18 14:33:27 发布

致我逝去的青春

最新推荐文章于 2024-09-18 14:33:27 发布

阅读量186

点赞数 2

分类专栏：性能优化 javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/wang_js_amateyr/article/details/103948318

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

性能优化

6 篇文章 0 订阅

订阅专栏

事件

 事件：浏览器的一种行为，也可以是用户行为
  发生在HTML元素上事件
  src是异步的
      	onclick  onmouseover   onmouseout  onmouseenter  onmouseleave   onmousemove   ondblclick
        onkeydown onkeyup onkeypress
        ontouchstart ontouchend ontouchmove

JQuery的ready函数与JS的onload的区别：

	 1.执行时间
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

    2.编写个数不同
        window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
        $(document).ready()可以同时编写多个，并且都可以得到执行

事件的绑定

		 1.box.onclick = function(){}
         2.$('#box').click(function(){})
         3.$('#box').on('click',fn)

addEventListener

	给一个元素绑定多个事件  在window里没有  只有元素可以调到
		addEventListener(事件行为(去掉on),事件回调函数，布尔)
    	removeEventListener  移出时需要和添加参数完全一致
    		第三个参数是布尔值，false代表冒泡阶段执行，true 捕获阶段执行
    在IE8以下不兼容
    只能给同一个元素的同一个事件行为绑定同一个方法。如果都相同 就会覆盖

事件绑定的区别

标准浏览器 IE9以上   现在框架都是不考虑IE8以下
        addEventListener  
        attachEvent  IE8及以下
    区别：
    1.顺序 
        addEventListener先绑定谁 先执行谁    attachEvent倒序
    2.this
        addEventListener 函数中this指向被绑定的元素    attachEvent  this指向window
    3.绑定次数
        addEventListener 给同一个元素同一个事件只能绑定一次这个相同的方法    attachEvent 绑定同一事件 多次执行多次

事件对象

	 事件对象：当用户通过鼠标键盘去操作或触发元素的事件行为时，浏览器会默认将一些事件的信息传递给这个函数的第一个参数(比如鼠标点击的位置距离页面左右的距离，或距离点击元素边框的距离)

 box.onclick=function(e){
            console.log(e);// 鼠标事件对象
            在IE8及以下，浏览器将事件信息放到了window.event上，并没有传递给函数的形参；
            console.log(window.event);
            e=e||window.event;
            1.clientX : 当前鼠标点击的位置距离可视窗口左边的距离
            2.clientY : 当前鼠标点击的位置距离可视窗口上边的距离

            3.offsetX : 当前鼠标点击的位置距离盒子左边框的距离
            4.offsetY : 当前鼠标点击的位置距离盒子上边框的距离

            5. pageX  :当前鼠标点击的位置距离页面左边框的距离
            6. pageY：当前鼠标点击的位置距离页面上边框的距离

            7. target : 事件源;事件在哪个元素上触发，事件源就是谁；
            8. type: 事件类型（"click"）
            e.cancelBulle: 取消事件默认的冒泡传播
            // 事件冒泡传播： 当触发子元素的事件时，由于事件有冒泡传播机制，会依次触发祖先元素对应的事件行为
            e.cancelBubble=true;
            e.stopPropagation();// IE8及以下不兼容
        }
        outer.onclick=function(){
            console.log(1);
        }

事件默认行为

 let abc = document.getElementById("abc");
        // a标签的点击默认跳转就是a的默认行为
        // form 表单submit,会默认提交；
        abc.onclick = function(e){
            // e.preventDefault : 阻止事件的默认行为
            // e.preventDefault();
            //e.returnValue=false;
            console.log(e);
        }

input框事件

    1. onfocus:获取鼠标焦点
    2. onblur : 失去鼠标焦点
    3. onchange:当鼠标离开input框，并且input框中的内容发生改变，会触发该事件
    4. oninput:当input框每改变一次，都会执行一次
    5. onkeydown:当键盘按下时，触发的事件；获取到上一次的值；
    6. onkeyup:当键盘抬起获取到最新的值；

btn.onkeyup=function(e){
        //console.log(this.value);
        console.log(e);// 键盘事件对象
        // 在键盘上，每一个键盘的键都有一个对应的keyCode;根据keyCode可以判断当前点击的是哪一个键；
    }

事件的传播

	事件有冒泡传播的机制：当触发子元素的事件时，会依次触发当前元素祖先元素上对应的事件；
    true: 捕获阶段执行，从外向里
    	当找到事件源，目标阶段，先绑定谁，谁先执行；
    false : 冒泡阶段执行，从里向外的；

<body>
    <div id="outer">
        <div id="inner">
            <div id="center"></div>
        </div>
    </div>
    <script>
        let outer=document.getElementById("outer");
        let inner=document.getElementById("inner");
        let center=document.getElementById("center");
        // center.onclick  = null;
        // 事件有冒泡传播的机制：当触发子元素的事件时，会依次触发当前元素祖先元素上对应的事件；
        // true: 捕获阶段执行，从外向里
        // 当找到事件源，目标阶段，先绑定谁，谁先执行；
        // false : 冒泡阶段执行，从里向外的；
        function fn1(e){
            console.log("center","冒泡");
        }
        function fn2(e){
            console.log("inner","冒泡");
        }
        function fn3(e){
            console.log("outer","冒泡");
        }
        function fn4(){
            console.log("center","捕获");
        }
        function fn5(){
            console.log("inner","捕获");
        }
        function fn6(){
            console.log("outer","捕获");
        }
        center.addEventListener("click",fn4,true)
        center.addEventListener("click",fn1,false);
        inner.addEventListener("click",fn2,false)
        inner.addEventListener("click",fn5,true)
        outer.addEventListener("click",fn3,false);
        outer.addEventListener("click",fn6,true);
  
        // 捕获阶段-->目标阶段-->冒泡阶段

事件委托

	事件委托：主要利用事件的冒泡传播机制，给最外层的盒子绑定事件，根据事件源的不同，进行判断，处理不一样的需求；

 // 三个div将onmouseover这个事件委托给这三个盒子的父元素 
        let parent  = document.getElementById("parent");
        parent.onmouseover=function(e){
            if(e.target.innerHTML==="1"){
                console.log("红色");
            }else if(e.target.innerHTML==="2"){
                console.log("绿色"); 
            }else if(e.target.innerHTML==="3"){
                console.log("黄色");
            }
        }