js事件对象

最新推荐文章于 2024-07-31 16:33:32 发布

Daken_TlB

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量200

点赞数 6

文章标签： javascript 前端 chrome

本文链接：https://blog.csdn.net/Daken_TlB/article/details/104467262

版权

一、什么是事件（event）

事件是发生并得到处理的操作，既：事情来了，然后得到处理。

事件发生	事件处理
电话铃声响起	需要接电话
学生举手请教问题	需要解答
拍摄图片	需要摁下快门

二、事件绑定

事件绑定三部分组成：对象.事件处理函数=函数。

1.function()匿名函数是被执行的函数，用于触发后执行。

//匿名函数
document.onclick=function(){};

// 除了用匿名函数的方法作为被执行的函数，也可以设置成独立的函数。
document.onclick=box; //直接赋值函数名即可，无须括号
function box(){}；

2.通过下面两组函数中，我们发现，通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。


function box() {
//普通空参函数
    alert(arguments.length); //0，没有得到任何传递的参数
}
input.onclick=function(){
//事件绑定的执行函数
     alert(arguments.length); //1，得到一个隐藏参数
};

3.事件对象的兼容性写法，低版本IE下使用 window.event。


input.onclick=function(evt){
    var e = evt || window.event;
};

三、事件冒泡和捕获

1.首先我们要明确什么是事件流：

事件流是描述的从⻚⾯接受事件的顺序，当⼏个都具有事件的元素层叠在⼀起的时候，那么你点击其中⼀个元素，并不是只有当前被点击的元素会触发事件，⽽层叠在你点击范围
的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

事件冒泡

在这里插入图片描述
就是从事件⽬标的事件处理函数开始，依次向外，直到 window 的事件处理函数触发也就是从下向上的执⾏事件处理函数。（默认事件流）。

<script>
    window.onload = function(){
        var aDivs = document.getElementsByTagName("div");
        for(var i = 0; i < aDivs.length; i++){
            aDivs[i].onclick = function(ev){
                var e = ev || window.event;
                alert(this.id);
            }
        }
    }
</script>
 <body>
        <div id = 'div1'>
            爷爷
            <div id = 'div2'>
                父亲
                <div id = 'div3'>
                    孙子
                </div>
            </div>
        </div>
    </body>

事件捕获

要想实现事件捕获必须由事件监听去添加


addEventListener()

方法用于向指定元素添加事件句柄，IE8及其以下不支持，

■事件监听器target.addEventListener("click", fun, false);
     “click” ：是事件名；注意，要去掉事件名的on
      fun：是函数名;注意，函数名上没有双引号
      第三个参数是否使用捕捉(反向冒泡)，默认false，为冒泡。

■可以绑定多个函数在一个对象上
     执行顺序按照绑定的顺序来
     如： document.getElementById("fun").addEventListener("click",fun,false);

■当绑定的函数有参数时，当传递参数值时，使用"匿名函数"调用带参数的函数：
document.getElementById("fun").addEventListener("click", function() {
    myFunction(p1, p2);
});

removeEventListener() 方法移除由 addEventListener() 方法添加的事件函数.

事件捕获就是从 window 的事件处理函数开始，依次向内，只要事件⽬标的事件处理函数执⾏也就是从上向下的执⾏事件处理函数。


<script>
     window.onload = function(){
        var aDivs = document.getElementsByTagName("div");
            for(var i = 0; i < aDivs.length; i++){
                aDivs[i].addEventListener("click", function(ev){
                    var e = ev || window.event;
                    alert(this.id);
                }, true);
                //第三个参数如果是false 默认是冒泡
            }
        }
</script>
     <body>
        <div id = 'div1'>
            爷爷
            <div id = 'div2'>
                父亲
                <div id = 'div3'>
                    孙子
                </div>
            </div>
        </div>
    </body>

阻止事件冒泡跨浏览器兼容

function stopBubble(ev){
    if(ev.stopPropagation){
        ev.stopPropagation();
    }else{
        ev.cancelBubble = true;
    }
}
//cancelBubble=true IE写法
//stopPropagation() 其他浏览器

Daken_TlB

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js事件对象

一、什么是事件（event）事件是发生并得到处理的操作，既：事情来了，然后得到处理。事件发生事件处理电话铃声响起需要接电话学生举手请教问题需要解答拍摄图片需要摁下快门二、事件绑定事件绑定三部分组成：对象.事件处理函数=函数。1.function()匿名函数是被执行的函数，用于触发后执行。//匿名函数document.onclick=funct...
复制链接

扫一扫