能去百度上班意味着什么,商城类网站如何做seo,用电脑做网站服务器,手机app开发工具有哪些目录
1.事件对象
1.1获取事件对象
1.2事件对象常用属性
2.事件流
1.1事件流的两个阶段#xff1a;冒泡和捕获 1.2阻止事件流动 1.3阻止默认行为
1.4两种注册事件的区别
3.事件委托 1.事件对象
1.1获取事件对象 事件对象#xff1a;也是一个对象#xff0c;这个对象里…目录
1.事件对象
1.1获取事件对象
1.2事件对象常用属性
2.事件流
1.1事件流的两个阶段冒泡和捕获 1.2阻止事件流动 1.3阻止默认行为
1.4两种注册事件的区别
3.事件委托 1.事件对象
1.1获取事件对象 事件对象也是一个对象这个对象里有事件触发时的相关信息 例如鼠标点击事件中事件对象就存了鼠标点在哪个位置的信息 获取事件对象 在事件绑定的回调函数的第一个参数就是事件对象一般命名为eventeve 语法元素.addEventListener(click, function(e) { }) e就是事件对象 1.2事件对象常用属性 常用属性 type获取当前事件类型clientX/clientY获取光标相对于浏览器可见窗口左上角的位置pageX/pageY获取光标相对于浏览器窗口左上角的位置offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下的键盘键的值现在不再使用keyNode 案例图片跟随鼠标 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {position: absolute;top: 0;left: 0;}/style
/head
bodyimg src./pictures/tianshi.gif altscriptlet img document.querySelector(img)document.addEventListener(mousemove, function(e) {// 鼠标坐标赋值给图片// 减值是为了让鼠标在图片上面img.style.left e.pageX - 50 pximg.style.top e.pageY - 40 px})/script
/body
/html
2.事件流
1.1事件流的两个阶段冒泡和捕获 事件流事件完整执行过程中的流动路径 假设页面里有一个div当触发事件时会经历两个阶段捕获阶段和冒泡阶段 ①事件冒泡 当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发依次向上调用所有父级元素的同名事件这一过程称为事件冒泡 Note 事件冒泡是默认存在的 ②事件捕获 从DOM的根元素开始去执行对应的事件从外到里 Note 事件捕获需要写对应的代码才能看到DOM.addEventListener(事件类型事件处理函数是否使用捕获机制)第三个参数传入true代表是捕获阶段触发不常用传入false代表冒泡阶段触发默认false若是用L0事件监听则只有冒泡阶段没有捕获阶段 捕获父级到子级 冒泡子级到父级 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.grand {margin: 100px;width: 500px;height: 500px;background-color: red;}.father {width: 400px;height: 400px;background-color: pink;}.son {width: 200px;height: 200px;background-color: skyblue;}/style
/head
bodydiv classgranddiv classfatherdiv classson/div/div/divscriptlet grand document.querySelector(.grand)let father document.querySelector(.father)let son document.querySelector(.son)grand.addEventListener(click, function(e) {alert(爷爷级元素的点击事件)})father.addEventListener(click, function() {alert(父级元素的点击事件)})son.addEventListener(click, function() {alert(子级元素的点击事件)})/script
/body
/html 上面的案例中当点击子级元素时先触发子级元素的绑定的点击事件再依次向上触发父级元素绑定的点击事件依次类推直到访问完所有的父级元素这个过程即为事件冒泡 事件捕获的过程同理只不过是从根元素向下访问所有的子级元素 1.2阻止事件流动 冒泡模式默认存在可能会导致事件影响到父级元素若想把事件限制在当前元素内就要阻止事件流动 语法时间对象.stopPropagation() Note 阻止事件流动需要拿到事件对象因此回调函数的形参列表必须写e/event 上面的案例中组织事件流动后当点击子级元素时只触发子级元素的点击事件不会触发父级元素的点击事件 Note鼠标经过事件 mouseover和mouseout会有冒泡效果mouseenter和mouseleave没有冒泡效果推荐 1.3阻止默认行为 默认行为比如链接点击不跳转表单域的跳转 语法e.preventDefault() 1.4两种注册事件的区别 两种注册事件的区别 传统on注册L0 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)直接使用null覆盖偶就可以实现事件的解绑都是冒泡阶段执行的 事件监听注册L2 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)、后面注册的事件不会覆盖前面注册的事件(同一个事件)可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)匿名函数无法被解绑 3.事件委托 利用事件流的特征解决一些开发需求 场景多个子级元素进行同样的操作时可以将这个操作委托给父级元素比如所有的子级元素都要绑定点击事件则可以给它们的父级添加点击事件由于冒泡模式默认存在所以当自身没有绑定点击事件时会触发父级的点击事件 获取点击的对象语法e.target 获取点击的对象的名字语法e.target.tagName
