js的事件处理

最新推荐文章于 2022-10-09 16:37:37 发布

shuzhuang25

最新推荐文章于 2022-10-09 16:37:37 发布

阅读量190

点赞数

分类专栏：前端 javascript 文章标签：事件事件委托冒泡 javascript

本文链接：https://blog.csdn.net/qq_33429225/article/details/80344587

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

//根据看MDN整理，其中，比较重要的点

1）addEventListener()添加事件比较好

2）e.preventDefault();//阻止默认行为

3）事件冒泡和捕获

4）事件委托

一、事件介绍

1、使用网页事件的方式
1）事件处理器属性
2）行内事件处理器 - 请勿使用
3） addEventListener()和removeEventListener()
eg:btn.addEventListener('click', bgChange);//添加事件
优点：1）可以删除事件2）可以给一个事件添加多个函数
二、其他
1、事件对象
//e.target : btn
function bgChange(e) {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
e.target.style.backgroundColor = rndCol;
console.log(e);
}
btn.addEventListener('click', bgChange);
2、阻止默认行为
e.preventDefault();//阻止
//比如在submit ,如果判断以后不成立，则拒绝提交
3）事件冒泡及捕获
对事件冒泡和捕捉的解释

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是<video>元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

在捕获阶段：//从外到里

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。
在冒泡阶段，恰恰相反:
浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

**在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。(从外到里处理）
//解决方法
e.stopPropagation();//不会向上扩大
3、事件委托
在JavaScript程序中事件处理的数量直接影响了页面的整体性能，当时间处理程序过多时，例如：给100个按钮绑定事件。传统的做法就是：通过DOM操作获取每一个按钮元素分别绑定事件处理函数。
而每一个函数都是一个对象，所以都会占用内存，内存占用的越多性能毋庸置疑的会变得越差；而且每次通过DOM访问到触发事件的元素也无疑会增加交互时间延缓事件处理速度降低性能。而为了尽可能减少这种性能的消耗就引入了事件委托这一解决方案。
所谓 事件委托就是利用事件冒泡，指定一个事件处理程序，来管理多个事件。即：利用冒泡机制将一类事件触发尽可能高的委托给其父节点或祖先节点来触发事件处理函数，这样只需要定义一个函数，访问一次DOM对象，减少了内存的占用以及访问DOM元素的时间，降低了性能的消耗。

 var btns = document.getElementById("btn-warp");  
        btns.onclick = function(event){  
                    // event.target 事件源  
                     switch (event.target.id) {  
                case "btn1":  
                    alert("btn1");  
                    break;  
                case "btn2":  
                    alert("btn2");  
                    break;  
                case "btn3":  
                    alert("btn3");  
                    break;  
            }  
        }

//事件委托jQuery写法

                 $("#btn-warp").on("click",function(event){  
                      switch (event.target.id) {  
                        case "btn1":  
                            alert("btn1");  
                            break;  
                        case "btn2":  
                            alert("btn2");  
                            break;  
                        case "btn3":  
                            alert("btn3");  
                            break;  
                    }  
                });