JS / 事件基础知识

最新推荐文章于 2024-05-15 20:43:52 发布

winglamx

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量216

点赞数

分类专栏：前端学习文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_39565174/article/details/126730262

版权

前端学习专栏收录该内容

38 篇文章 0 订阅

订阅专栏

事件对象

onmousemove 鼠标移动事件

- 坐标获取：clientX clientY （总是相对于可见窗口）

- 相对于整个页面的坐标：pageX pageY （ie8及以下不可用，可以加上scrollTop）

（chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的。兼容性：

var st = document.body.scrollTop || document.documentElement.scrollTop

）

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

event / e，不定义也传。在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘哪个按键被按下。

在IE8中，响应函数被触发时，浏览器不会传递事件对象

在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

window.event.clientX / window.event.clientY

但是火狐不兼容这种方式

兼容性：

if(!event){

event=window.event

}

或者 event=event || window.event

事件冒泡 Bubble

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，开发中大部分情况冒泡是有用的，如果不希望事件冒泡，则可以通过事件对象来取消冒泡

event.cancelBubble=true

事件委派

为每一个超链接都绑定一个单击响应函数，这种操作比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定

只绑定一次事件，即可应用道多个元素上，即使元素是后添加的：

可以将其绑定给元素的共同的祖先元素

事件委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

会发现点击空白的地方也能触发。

如果触发的事件是我们期望的元素则执行，否则不执行：

事件绑定时：返回触发此事件的元素事件对象的target表示触发事件的对象

event=event || window.event

target=event.target

if(target.className=='link'){

... ...

}

隐患：class可以有多个如果一个元素class既有link又有other 则不会触发该事件，可以用正则表达式解决该隐患。

事件绑定

方式一：btn.οnclick=function(){}

使用对象.事件=函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果同一个元素绑定了多个相同的事件，后面的会覆盖前面的，只有最后一个生效

方式二：btn.addEventListener() ie8及以下不支持

通过这个方法也可以为元素绑定响应函数，可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

参数：1.事件的字符串 click mousemove （不要on）

2.回调函数，当事件触发时，该函数会被调用

3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

（如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为 true

一般情况下不会希望在捕获阶段执行触发事件，所以这个参数一般都是false）

btn.addEventListener("click",function(){

alert(1)

},false)

ie8及以下使用 attachEvent(),别的浏览器不支持，执行顺序不同，后绑定先执行

参数：1.事件的字符串，要on

2.回调函数

btn.attachEvent(“onclick”,function(){

alert(2)

})

兼容性：定义一个函数，用来为指定元素绑定响应函数

addEventListener中的this是绑定事件的对象btn

attachEvent里的this是window

需要统一两个方法this

参数：obj 要绑定事件的对象

eventStr 事件的字符串不要on

callback 回调函数

function bind(obj,eventStr,callback){

        if(obj.addEventListener){

        //大部分浏览器兼容的方式

                obj.addEventListener(eventStr,callback,false)

        }else{

        //ie8及以下

                obj.attachEvent("on"+eventStr,function(){

                    //在匿名函数中调用回调函数,使this变成obj

                    callback.call(obj);

                })

         }

}

this是谁由调用方式决定

callback.call(obj)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 160px;
            height: 160px;
            background-color: yellowgreen;
        }

        #box2 {
            width: 140px;
            height: 140px;
            background-color: blueviolet;
        }

        #box3 {
            width: 120px;
            height: 120px;
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1")
            var box2 = document.getElementById("box2")
            var box3 = document.getElementById("box3")
            bind(box1, "click", function (e) {
                alert("success!box1!" + e.target.id)
            })
            bind(box2, "click", function (e) {
                alert("success!box2!" + e.target.id)
            })
            bind(box3, "click", function (e) {
                alert("success!box3!" + e.target.id)
            })

            function bind(obj, eventStr, callback) {
                if (obj.addEventListener) {
                    obj.addEventListener(eventStr, callback, false)
                } else[
                    obj.attachEvent("on" + eventStr, function () {
                        callback.call(obj)
                    })
                ]
            }
        }
    </script>
</head>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
</body>

</html>

事件传播

微软认为事件应该是由内而外，向外传播，当事件触发时，先触发当前元素上的事件

然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行

网景公司认为事件应该由外向内传播，即先触发当前元素的最外层的祖先元素

然后再向内传播给后代元素

事件的捕获阶段：

W3C综合两个公司的方法，将事件分成三个阶段：

1.捕获阶段：从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件（从document开始捕获，大部分浏览器从window开始）

2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为 true

一般情况下不会希望在捕获阶段执行触发事件，所以这个参数一般都是false

在ie8及以下没有捕获阶段

winglamx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS / 事件基础知识

事件委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。使用对象.事件=函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果同一个元素绑定了多个相同的事件，后面的会覆盖前面的，只有最后一个生效。所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，开发中大部分情况冒泡是有用的，如果不希望事件冒泡，则可以通过事件对象来。
复制链接

扫一扫