网站尺寸规范,深度搜索,it培训机构怎么样,河北住建城乡建设网站文章目录 一、事件对象1.1 事件对象是什么#xff1f;1.2 使用方法 二、环境对象this以及回调函数2.1 它是什么#xff1f;2.2 演示示例 三、事件的高级操作3.1 事件流3.2 事件捕获3.3 事件冒泡以及阻止冒泡3.4 事件解绑3.5 mouseover和mouseenter事件的区别3.6 事件委托它是… 文章目录 一、事件对象1.1 事件对象是什么1.2 使用方法 二、环境对象this以及回调函数2.1 它是什么2.2 演示示例 三、事件的高级操作3.1 事件流3.2 事件捕获3.3 事件冒泡以及阻止冒泡3.4 事件解绑3.5 mouseover和mouseenter事件的区别3.6 事件委托它是什么代码示例 3.7 阻止使用的默认行为 总结 一、事件对象
1.1 事件对象是什么
事件对象是什么 也是个对象这个对象里有事件触发时的相关信息 例如:鼠标点击事件中事件对象就存了鼠标点在哪个位置等信息 使用场景 可以判断用户按下哪个键比如按下回车键可以发布新闻 可以判断鼠标点击了哪个元素从而做相应的操作
1.2 使用方法
在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e
示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodybuttonaaa/button/bodyscriptconst btn document.querySelector(button)btn.addEventListener(click, function(e){console.log(e)})/script/html这个对象里面有非常多的属性大家可以通过名称得到他的作用是什么这里就不多赘述了
二、环境对象this以及回调函数
2.1 它是什么
环境对象:指的是函数内部特殊的变量 this它代表着当前函数运行时所处的环境普通函数的this指向window在事件函数里面指向的是触发这个函数的对象。
作用:弄清楚this的指向可以让我们代码更简洁 函数的调用方式不同this 指代的对象也不同 [谁调用this 就是谁] 是判断 this 指向的粗略规则 直接调用函数其实相当于是 window.函数所以this 指代 window
2.2 演示示例
示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodybuttonaaa/button/bodyscriptfunction fn(){console.log(this)}window.fn()const btn document.querySelector(button)btn.addEventListener(click, function(e){console.log(this)})/script/html三、事件的高级操作
3.1 事件流
当我们在网页上进行一些交互操作比如点击按钮或者输入文字时浏览器会按照一定的顺序来处理这些事件。这个顺序被称为事件流。 事件流分为两种冒泡流Bubbling和捕获流Capturing。以点击按钮为例冒泡流表示点击按钮后事件会从按钮开始向外层元素冒泡而捕获流则是从外层元素开始捕获一直到按钮。 通俗来说就像是在水里扔了一块石头水波会从石头的位置开始扩散一方面水波向外扩散另一方面水波也会向石头的位置聚拢。在事件流中这个石头就是触发事件的元素而水波就是事件在元素间传播的过程。 JavaScript 允许我们在事件流的不同阶段捕获、目标、冒泡中注册事件处理函数通过这些函数我们可以在不同的阶段进行操作影响事件的处理过程。理解事件流有助于我们更好地处理和控制用户交互。 3.2 事件捕获
示例代码 addEventListener参数三的作用 一个布尔值用于指定事件是在捕获阶段true还是冒泡阶段false调用事件处理程序。
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodybuttonaaa/button/bodyscriptdocument.addEventListener(click, function(){console.log(document被点击啦)},true)const btn document.querySelector(button)btn.addEventListener(click, function(e){console.log(button被点击啦);},true)/script/html3.3 事件冒泡以及阻止冒泡
示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodybuttonaaa/button/bodyscriptdocument.addEventListener(click, function(){console.log(document被点击啦)})const btn document.querySelector(button)btn.addEventListener(click, function(e){console.log(button被点击啦);})/script/html阻止冒泡使用这个函数阻止冒泡
事件对象.stopPropagetion()注意:此方法可以阻断事件流动传播不光在冒泡阶段有效捕获阶段也有效
3.4 事件解绑
格式
事件对象.removeEventListener(事件类型如click,要移除的函数名称)示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodybuttonaaa/button/bodyscriptfunction fn(){console.log(button被点击啦);}const btn document.querySelector(button)btn.addEventListener(click, fn)btn.removeEventListener(click,fn)/script/html3.5 mouseover和mouseenter事件的区别
mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)
3.6 事件委托
它是什么
想象一下你在一个大型音乐会上有很多观众。每个观众手里拿着一支荧光棒而你是负责收集这些荧光棒的工作人员。你可以选择一直巡视每个观众看看他们是否想把荧光棒给你然后把每支都收下来。这样做确实可以但有点费力。
现在想象你站在舞台上然后大声说“谁有荧光棒要给我都扔到舞台上来吧”观众们听到后就开始把荧光棒扔到舞台上。这时你只需要站在舞台上集中注意力收集掉在舞台上的荧光棒而不用一个个地巡视每个观众。这就是事件委托的概念。
在 JavaScript 中事件委托是指我们把事件监听器添加到父元素而不是每个子元素都添加一个监听器。当事件发生时事件会从子元素向父元素传播。这样我们只需要在父元素上处理事件就能捕获所有子元素上发生的事件。
举个例子如果有一个列表你可以把点击事件监听器添加到整个列表的父元素。当用户点击列表中的任何一个项时事件会冒泡到列表的父元素上你就可以通过判断事件的目标来知道用户点击了哪个列表项。这样无论列表有多长我们只需一个监听器就能搞定而不用给每个列表项都添加监听器这样更高效。这就是事件委托的作用。
原理:事件委托其实是利用事件冒泡的特点 给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件
代码示例
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodydivbuttonTestButton/buttonbuttonTestButton/buttonbuttonTestButton/buttonbuttonTestButton/buttonbuttonTestButton/button/div
/bodyscriptconst div document.querySelector(div)div.addEventListener(click, (e) {console.log(有按钮点击啦)})/script/html我们可以使用event对象里面的target来分辨对象是哪个
3.7 阻止使用的默认行为
我们某些情况下需要阻止默认行为的发生比如 阻止链接的跳转表单域跳转
我们可以使用event对象的preventDefault函数来阻止默认行为
示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: pink;}/style
/head
bodya hrefhttps://baidu.com/打开百度/a
/bodyscriptconst a document.querySelector(a)a.addEventListener(click, function(e){e.preventDefault()console.log(点击了链接)})
/script/html这样我们点击链接就没用啦 总结
通过深入了解事件对象、环境对象和回调函数我们能够更好地处理用户交互和构建动态的 Web 应用。同时掌握事件的高级操作如事件委托和自定义事件使得我们能够更高效、灵活地管理事件流和通信。这些概念的深入理解对于成为一位优秀的前端开发者至关重要。
