js:事件流程

最新推荐文章于 2024-04-25 20:29:33 发布

前端小王*

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量277

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48493160/article/details/109838740

版权

js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

学习js第九天

快捷尺寸

box.clientWidth
获取盒子width + 左右padding
box.clientHeight
获取盒子height + 上下padding

box.offsetWidth
盒子左右border + 获取width + 左右padding
box.offsetHeight
盒子上下border + 获取height+ 上下padding

获取边框宽度
box.clientLef//左
box.clientTop//上

快捷位置

定位父元素：指的是自己的祖先元素中离自己最近的那个拥有定位属性的元素

box.offsetParent
离自己最近的那个拥有定位属性的父元素
box.offsetLeft
box.offsetTop
自己的外边框距离定位父元素的内边框的距离
IE8中计算的方式：自己元素的边框外到定位父元素的边框外

document.body.scrollTop
获取页面上面卷动值
document.body.scrollLeft
获取页面左侧卷动值(因为有版心所以这个属性很少用)

事件流程

事件流程分为两个阶段： 事件捕获、事件冒泡
捕获：事件从最顶层元素开始执行一层层往下直到最精确元素
冒泡：事件从最精确元素开始执行一层层往上直到最顶层元素
先捕获再冒泡

DOM0级事件绑定

元素.on类型 = 事件处理函数 的方式叫做DOM0级
DOM0级只能够往冒泡阶段进行绑定

DOM2级事件绑定

元素.addEventListener(类型, 处理函数, 布尔值)
类型：“click” “mousedown” “mousemove”
处理函数: function() {}
布尔值: true 绑定到捕获 false 绑定到冒泡
元素.removeEventListener(类型, 处理函数, 布尔值)

DOM0级：绑定方式是添加属性
只能添加一个函数
删除很方便
只能绑定到冒泡阶段
DOM2级：绑定方式是调用方法
可以添加多个函数
删除不是很方便
可以绑定到捕获和冒泡阶段
DOM0级和DOM2级绑定方式可以同时使用事件触发的顺序与代码的书写顺序有关
this都是绑定事件的元素
事件对象也在

事件绑定兼容

ie8不支持addEventListener 支持自己的attachEvent
attachEvent 绑定的事件是倒序执行
当dom0级和attach一起存在时总是先执行dom0级
attach里面的this是window
attach里面有事件对象
onclick里面的是绑定事件的元素
onclick里面没有事件对象

function bindEvent(dom, type, fun) {
        if (dom.addEventListener) {
            dom.addEventListener(type, fun, false);
        } else if (dom.attachEvent) {
            dom.attachEvent("on" + type, fun);
        } else {
            dom["on" + type] = fun
        }

    }

事件对象

事件对象: 当事件被触发的时候会产生很多信息这些信息被浏览器封装成了一个对象这个对象被浏览器主动传递到了事件函数中

e.altKey
alt键有没有被按下
e.ctrlKey
ctrl键是否按下
e.shiftKey
shift键是否按下
e.offsetX,e.offsetY
鼠标在盒子内的坐标不包含边框这个属性会被子元素影响
e.clientX，e.clientY
鼠标距离视口的距离
e.pageX，e.pageY
页面距离
e.screenX，e.screenY
屏幕距离
e.target
触发事件的元素
e.currentTarget
绑定事件的元素 this === e.currentTarget

IE中的事件对象

DOM0级没有将事件对象传递给函数而是作为window的一个属性

window.event
IE中没有的属性: target currentTarget pageX pageY
兼容方式
var e = e || window.event;

阻止冒泡

普通浏览器
.stopPropagation()
IE浏览器
e.cancelBubble = true;

兼容：
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}

阻止默认行为

浏览器给部分标签和事件设置了默认的操作.
比如 a 标签会自动跳转页面

		var a = document.querySelector("a");

        a.onclick = function(e) {
            // 询问用户是否真的要跳转页面
            // alert()
            var isLeave = confirm("是否跳转?");
            if (!isLeave) {
                e.preventDefault();
            } 
            // prompt()
        }

// 右击菜单
        document.oncontextmenu = function (e) {

            console.log(2222)
            // 除了IE的阻止默认行为
            // e.preventDefault();
            // IE中的阻止默认行为
            // event.returnValue = false;
            // 如果是使用的dom0级绑定 我们可以通过 return  false 来阻止默认行为
            return false;
        }