备案期间关闭网站,福田公司董事长,dede手机网站开发,网络营销实务教案写在前面#xff1a;本文仅包含DOM内容#xff0c;JavaScript传送门在这里#xff0c;BOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频#xff08;十分感谢Pink老师#xff09;#xff0c;原文保存在个人的GitLab中#xff0c;如果需要写的网页内容信息等可以评… 写在前面本文仅包含DOM内容JavaScript传送门在这里BOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频十分感谢Pink老师原文保存在个人的GitLab中如果需要写的网页内容信息等可以评论联系我若是编辑博文中出现了忘记上传的图片或者错位的图片欢迎评论区指正。写作不易欢迎点赞、收藏关注。 文章目录 DOMDOM 专有名词DOM树 DOM 获取元素 DOM | 事件点击按钮事件示例执行事件过程鼠标到Div上跳出弹框示例 操作元素修改元素内容示例 | 鼠标移动进去显示中文离开显示英文区别 | innerText 与 innerHTML 的区别通过innetText 和 innerHTML 获取文字内容innerTextinnerHTML 修改元素属性表单属性操作修改表单文字示例 | 输入密码 表单样式修改示例 | 修改背景颜色示例 | 淘宝精灵图示例 | 得到焦点与失去焦点 使用className修改样式自定义属性值 节点操作node.parentNode | 获取父节点node.childNodes | 获取子节点获取特定子节点获取兄弟节点获取下一个兄弟节点获取上一个兄弟节点 创建节点删除节点拷贝节点document.write() | 不推荐 监听事件方式比较传统方式监听事件 添加监听事件解绑事件 事件流事件执行流程捕获阶段目标节点冒泡阶段 验证 事件对象获取事件对象传统方式获取事件对象监听方式获取事件对象在ie678中使用监听对象 事件对象的常见属性和方法阻止默认行为 阻止冒泡事件事件委托示例 禁用鼠标右键禁用文字选择获取鼠标坐标信息常用键盘事件keydown | 键盘被按下keyup | 键盘弹起事件keypress | 键盘按下事件 按下s键输入框获取焦点案例 DOM
DOM 专有名词
DOM树 文档一个页面就是一个文档DOM中使用Document表示元素页面中所有的标签都是元素DOM中使用element表示节点网页中所有内容都是节点标签、属性、文本、注释等DOM中使用node表示 DOM 把以上内容都看做事对象。
DOM 获取元素 通过ID获取 | getElementById()通过标签名获取通过HTML5新增方法获取特殊元素获取 通过ID获取 | getElementById() 返回的是一个 bodydiv idtime2019-9-9/divscriptvar time document.getElementById(time);console.log(time);console.log(typeof time); // 返回的是一个元素对象console.log(time.id);console.dir(time); // div#time/script
/body根据标签名获取 | getElementsByTagName() | 返回的是对象集合
bodyulli知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/li/ulscriptvar eles document.getElementsByTagName(li);console.log(eles); // HTMLCollections(5) [li,li,li,li,li]// 逐个输出一下for( var i 0; i eles.length ; i ) {console.log(eles[i]);}/script
/body得到元素对象是动态的如果元素的内容发生了变化JS获取到的内容跟着一起变化 注意事项
如果页面中只有一个元素返回的也是一个伪数组如果页面中没有元素返回的是一个空的伪数组
通过父元素获取其全部子元素
bodyulli知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/lili知否知否应是绿肥红瘦。/li/ulolli哈哈哈/lili哈哈哈/lili哈哈哈/lili哈哈哈/li/olscriptvar ol document.getElementsByTagName(ol);var lis ol[0].getElementsByTagName(li);console.log(lis);/script
/bodyHTML5新增的方法 | 通过类名获取 | getElementsByClassName()
bodydiv classbox123/divdiv classbox123/divdiv classbox123/divscriptvar lis document.getElementsByClassName(box); // 长度为3的伪数组/script
/bodyquerySelectir() querySelector()获取指定选择器的第一个元素querySelectorAll()获取页面上所有元素 bodydiv classboxhahaha/divdiv classboxhahaha/divdiv classboxhahaha/divscriptvar firstBox1 document.querySelector(.box); // 通过.告诉选择器这是一个class | div classboxhahaha/divvar firstBox2 document.querySelector(#box); // 通过#告诉选择器这是一个id | nullconsole.log(firstBox1);console.log(firstBox2);/script
/bodyquerySelectirAll() | 获取所有元素
bodydiv classboxhahaha/divdiv classboxhahaha/divdiv classboxhahaha/divscriptvar firstBox1 document.querySelectorAll(.box); // 通过.告诉选择器这是一个class | div classboxhahaha/divvar firstBox2 document.querySelectorAll(#box); // 通过#告诉选择器这是一个id | nullconsole.log(firstBox1); // 长度为3的伪数组console.log(firstBox2); // 空的伪数组/script
/body获取特殊标签 | body、htlm 一般来说只有一个body标签或者一个htlm标签 获取 BODY
bodyscriptvar bodyEle document.body;console.log(bodyEle); // 输出Body对象/script
/body获取 HTML
bodyscriptvar htmlEle document.documentElement;console.log(htmlEle); // HTML 对象/script
/bodyDOM | 事件 JavaScript 使我们有能力创建动态页面而时间是可以被JavaScript侦测到的行为 简单理解出发—响应机制 网页中的每个元素都可以产生某些可以出发JavaScript的事件例如我们可以在用户点击某个按钮的时候产生一个事件然后去执行某些操作。 事件是由三部分组成事件源、事件类型、事件处理程序一般称为事件三要素 事件源时间的触发的对象是由谁来触发比如按钮事件类型如何出发比如鼠标点击出发、鼠标经过出发、键盘按下触发事件处理程序通过一个函数赋值的方式完成 点击按钮事件示例
bodybutton idbtn点击一下/buttonscriptvar btn document.getElementById(btn);btn.onclick function () {alert(点击了一下~);}/script
/body执行事件过程
获取事件源注册时间绑定事件添加事件处理程序采用函数赋值形式
鼠标到Div上跳出弹框示例
bodydiv stylebackground: antiquewhite;text-align: center;width: 200px;border-radius: 5px;box-shadow: 0 0 3px gray123/divscriptvar div document.querySelector(div);div.onmouseover function (){alert(Hello World~);}/script
/body鼠标事件描述onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseenter鼠标进入触发onmouseout鼠标离开触发onfocus获取鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmousedown鼠标按下触发onmouseup鼠标弹起触发contextmenu右键的时候触发selectstart选择文字的时候触发 注意mouseover存在冒泡事件经过自身盒子会触发事件子盒子也会触发。mouseenter不存在冒泡事件只有经过自身时才会触发。 操作元素
修改元素内容 element.innerText | 起始位置稻种植未知的内容但它去除Html标签同时空格和空行也会去掉element.innerHTML | 起始位置到终止位置的全部内容包括html同时保留空格和换行 示例 | 鼠标移动进去显示中文离开显示英文
bodybutton显示中文/buttondiv stylebackground: antiquewhite;border: .1px solid grayHello World/divscript//1. 获取元素var btn document.querySelector(button);var div document.querySelector(div);btn.onmouseover function () {div.innerText 你好世界}btn.onmouseleave function () {div.innerText Hello World}/script
/body鼠标移动上去显示中文鼠标移出之后显示英文。 区别 | innerText 与 innerHTML 的区别 innetText它会原封不动的将我们给它的字符串显示到页面上(无法识别HTML标签) innerHTML如果发现是html标签它会解析html标签并显示 尽量使用innerHTML这是W3C发布的标准 bodybutton点击加粗名字/buttondiv我是Jim.kk/divscriptvar btn document.querySelector(button);var div document.querySelector(div);btn.onclick function () {div.innerHTML b我是Jim.kk/b;}/script
/body如果是使用innerText的方式的话则会原封不动的显示双引号的内容下面看示例
body
button点击加粗名字/button
div我是Jim.kk/div
scriptvar btn document.querySelector(button);var div document.querySelector(div);btn.onclick function () {div.innerText b我是Jim.kk/b;}
/script
/body通过innetText 和 innerHTML 获取文字内容 两者的区别在于innerText只会获取文字 innerText
bodyp一段文字span我是Jim.kk/span/pscriptvar p document.querySelector(p);console.log(p.innerText); // 一段文字 我是Jim.kk/script
/bodyinnerHTML
bodyp一段文字span我是Jim.kk/span/pscriptvar p document.querySelector(p);console.log(p.innerHTML); // 一段文字换行span我是Jim.kk/span/script
/body修改元素属性 src、hrefid、alt、title bodybutton idbtn1图片1/buttonbutton idbtn2图片2/buttondiv stylemargin-top: 20pximg srcimg/img1.png alt stylewidth: 500px titleIMG1/divscript// 修改图片属性var btn1 document.getElementById(btn1);var btn2 document.getElementById(btn2);var img document.querySelector(img);btn1.onclick function () {img.src img/img1.png;img.title IMG1;}btn2.onclick function () {img.src img/img2.png;img.title IMG2;}/script
/body以上代码点击按钮2显示一张图片点击按钮1又会变回来 表单属性操作
修改表单文字 type、value、checked、selected、disabled bodyinput typetext value请输入内容button idbtn1按钮/buttonbutton idbtn2禁用/buttonscript// 1. 获取元素var btn1 document.getElementById(btn1);var btn2 document.getElementById(btn2);var input document.querySelector(input);btn1.onclick function () {input.value 123;}btn2.onclick function () {input.disabled true;this.disabled true; // this指向的是btn谁调用函数就指向谁这里是btn2}/script
/body示例 | 输入密码 点击小眼睛显示密码同时小眼睛睁开 再次点击隐藏密码同时小眼睛关闭 bodydiv classboxlabel forimg srcimg/icons/close.png alt ideye/labelinput typepassword name idpwd/divscriptvar btn document.getElementById(eye);var pwd document.getElementById(pwd);var flag 0;btn.onclick function () {if(flag 0) {this.src img/icons/open.pngpwd.typetext;flag 1;} else {this.src img/icons/close.pngpwd.typepassword;flag 0;}}/script
/body表单样式修改 可以用以下两种方式修改 element.stylebackground: red;element.style.backgroundred; 区别在于第一种方式可以在引号内写入很多样式第二种需要一个样式定义一行 示例 | 修改背景颜色 设置一个DIV鼠标移入之后改变背景颜色示例如下 !DOCTYPE html
html langen
headmeta charsetUTF-8title样式操作1/titlestylediv {width: 200px;height: 200px;background: antiquewhite;}/style
/head
body
div/div
scriptvar div document.querySelector(div);div.onmouseover function () {div.style background: red;}div.onmouseleave function () {div.style background: antiquewhite;}
/script
/body
/html或者像下面这么写
!DOCTYPE html
html langen
headmeta charsetUTF-8title样式操作2/titlestylediv {width: 200px;height: 200px;background: antiquewhite;}/style
/head
bodydiv/divscriptvar div document.querySelector(div);div.onmouseover function () {div.style.background red;}div.onmouseleave function () {div.style.background antiquewhite;}/script
/body
/html示例 | 淘宝精灵图
!DOCTYPE html
html langen
headmeta charsetUTF-8title淘宝精灵图案例/titlestyle* {margin: 0;padding: 0;}li {list-style-type: none;}.box {;width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background: pink;margin: 15px;background: url(img/icons/sprite.png) no-repeat;}/style
/head
bodydiv classboxulli/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/li/ul/divscript// 1. 获取所有livar lis document.querySelectorAll(li);for (var i 0; i lis.length ; i){// 让索引号*44获取每个li的背景y坐标var index i * 44;lis[i].style.backgroundPosition 0 - index px}/script
/body
/html 示例 | 得到焦点与失去焦点 以下示例有一个磨人的输入框若是输入框的默认值是’手机’则在得到焦点的时候清空输入框若是失去焦点的时候输入框内容是空的则显示手机。 bodyinput typetext value手机/inputscriptvar input document.querySelector(input);input.onfocus function () {// console.log(得到焦点);if ( input.value 手机 ) {this.value ;}}input.onblur function () {if ( input.value ) {input.value 手机;}}/script
/body使用className修改样式 上述方法是一条一条的style属性除了以上方法外我们还可以同时定义多个div然后通过element.classNamedivName的方式修改它的样式 如果想要即保留原来的类名有来个新的类名只需要element.classNameoldDivName newDivName 下面源码是个很好的示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleclassName/titlestyle.div1{height: 50px;background: antiquewhite;box-shadow: 0 0 5px gray;border: 3px solid gray;border-radius: 5px;}.div2{height: 100px;background: red;box-shadow: 0 0 20px gray inset;border: .1px solid gray;border-radius: 50px;}/style
/head
bodydiv classdiv1/divscriptvar div document.querySelector(div);div.onmouseenter function () {div.className div2;}div.onmouseleave function () {div.className div1;}/script
/body
/html自定义属性值 通过element.getAttribute()可以获取属性这种方式可以获取自定义属性通过element.setAttribute(属性名,属性值)可以为元素自定义属性 通过getAttribute获取自定义属性值 div中本来是不存在index这个内置属性的但是我们设置之后可以通过getAttribute来获取 bodydiv index1 iddiv1/divscriptvar div document.querySelector(div);console.log(div.getAttribute(id)); // div1console.log(div.getAttribute(index)); // 1/script
/body通过setAttribute设置自定义属性 除了直接将自定义属性写在标签里面以外还可以通过setAttribute的方式设置自定义属性 bodydiv iddiv1/divscriptvar div document.querySelector(div);div.setAttribute(xx,123);console.log(div.getAttribute(xx)); // 123// 修改内置属性值div.setAttribute(id,divx);console.log(div.getAttribute(id)); // divx/script
/bodyH5 新标准 H5新标准中规定所有的自定义属性都得以data-开头所以又新增了dataset方法让我们获取自定义属性 这种方法只能获取data-开头的自定义属性 div data-index1 data-list-nameJim.kk/div
scriptvar div document.querySelector(div);console.log(div.dataset.index); // 1console.log(div.dataset[index]) // 1console.log(div.dataset.listName); // Jim.kkconsole.log(div.dataset[listName]) // Jim.kk
/script节点操作 什么是节点网页中所有的内容都是节点标签、属性、文本、注释等在DOM中节点使用node来表示。 HTML DOM树种的所有节点均可通过JavaScript进行访问所有的HTML元素节点均可被修改也可以被创建或者删除。 节点一般由nodeType节点类型、nodeName节点名称和nodeValue节点值这三个基本属性。 以上截图对应以下代码注意由于没有规定编码在浏览器中打开可能存在乱码
html langenheadtitle节点操作/title/headbodya hrefwww.baidu.com我的链接/ah1我的标题/h1/body
/html 利用DOM树可以把节点划分为不同的层级关系常见的是父子兄层级关系。 node.parentNode | 获取父节点
bodydivspan新年快乐龙年行大运/span/divscriptvar span document.querySelector(span);var div span.parentNode;console.log(div);/script
/bodynode.childNodes | 获取子节点 childNode默认会获得所有的子节点包括文字和标签所以以下代码输出的node长度为9有五个换行 如果不想要换行毕竟也没什么用可以使用children来代替childNode children并不是官方的但是获得了各浏览器的支持所以放心使用。 bodyulli新年快乐龙年行大运/lili新年快乐龙年行大运/lili新年快乐龙年行大运/lili新年快乐龙年行大运/li/ululli我是Jim.kk!!/lili我是Jim.kk!!/lili我是Jim.kk!!/lili我是Jim.kk!!/li/ulscriptvar ul document.querySelector(ul);console.log(ul.childNodes); // NodeList(9) [text, li, text, li, text, li, text, li, text]console.log(ul.children); // HTMLCollection(4)/script
/body获取特定子节点 可以使用firstChild来获取第一个节点但是这种获取方式仍然会获取换行等文本节点 方法说明备注element.firstChild获取第一个元素但是会包含文本信息也就是会获取你的换行等信息element.lastChild获取最后一个元素但是会包含文本信息也就是会获取你的换行等信息element.firstElementChild获取第一个元素不包含文本信息也就是只获取标签元素IE9以上才支持element.lastElementChild获取最后一个元素不包含文本信息也就是只获取标签元素IE9以上才支持element.children[0]用下标的方式获取某个指定的元素实际开发中的用法
获取兄弟节点
获取下一个兄弟节点
方法说明备注注意nextSibling获取下一个兄弟节点也会获取text节点nextElementSibling获取下一个兄弟节点只会获取标签节点IE9以上才支持
bodydiv新年快乐龙年行大运/divspan我是Jim.kk/spanscript// 下一个兄弟节点存在var div document.querySelector(div);console.log(div.nextSibling) // #textconsole.log(div.nextElementSibling) // span// 下一个兄弟节点是Scriptvar span document.querySelector(span);console.log(span.nextSibling) // #textconsole.log(span.nextElementSibling) // script// 下一个兄弟节点不存在var script document.querySelector(script);console.log(script.nextSibling) // link typetext/css relstylesheet iddark-mode-custom-linkconsole.log(script.nextElementSibling) // link typetext/css relstylesheet iddark-mode-custom-link/script
/body获取上一个兄弟节点
方法说明备注注意previousSibling获取上一个兄弟节点也会获取text节点previousElementSibling获取上一个兄弟节点只会获取标签节点如果不存在则会返回nullIE9以上才支持
bodydiv新年快乐龙年行大运/divspan我是Jim.kk/spanscriptvar span document.querySelector(span);console.log(span.previousSibling); // #textconsole.log(span.previousElementSibling); // div新年快乐龙年行大运/div// 当前节点是第一个节点会获取一个空var div document.querySelector(div);console.log(div.previousSibling) // #textconsole.log(div.previousElementSibling) // null/script
/body创建节点 创建一个节点 | document.createElement();添加到某个地方去 2.1 fatherElement.appendChild(childElement); | 在父节点内部追加节点 2.2 fatherElement.insertBefore(childElement,fatherElement.children[0]); | 在父节点内部的某个子节点前面插入这个元素 bodyul/ulscriptvar li1 document.createElement(li);var ul document.querySelector(ul);ul.appendChild(li1); // 在ul的子节点中追加这个元素var li2 document.createElement(li);ul.insertBefore(li2,ul.children[0]); // 在ul的0号元素前面插入一个li2/script
/body删除节点 node.removeChild() | 删除父亲中的某个孩子 bodyulli兔年/li !-- 打错了删除掉 --li龙年/lili行大运/li/ulscript// 1. 获取元素var ul document.querySelector(ul);// 2. 删除元素ul.removeChild(ul.children[0]);/script
/body拷贝节点 我们可以使用node.cloneNode()来拷贝节点但是如果括号中为空或者是false则只会克隆节点本身而不会克隆里面的子节点如果想要克隆里面的子节点我们在括号内写入true即可。 bodyulli1/lili2/lili3/li/ulscriptvar ul document.querySelector(ul);// 1. node.cloneNode();var li1 ul.children[0].cloneNode();ul.appendChild(li1); // 节点为空 | 因为上面的括号参数为空或者false是浅拷贝则只克隆节点本身不克隆里面的子节点var li2 ul.children[0].cloneNode(true);ul.appendChild(li2); // 节点为空 | 因为上面的括号参数为空或者false是浅拷贝则只克隆节点本身不克隆里面的子节点/script
/bodydocument.write() | 不推荐 document.write是直接将内容写入页面的内容流但是文档流执行完毕会导致页面全部重绘。 简单解释下若是我们在页面加载的时候就直接在script中写入document.write那么里面的元素会追加在页面的最下面但是若是通过页面中一个按钮点击后再加载的话那么整个页面会只剩下这一个元素。 示例如下 直接加载元素
bodypabc/pscriptvar btn document.querySelector(button);document.write(div我是Jim.kk/div);/script
/body可以看到由于页面加载的时候就已经执行了这个方法所以该方法中的内容是被追加到页面最下面的。
bodybutton点击/buttonpabc/pscriptvar btn document.querySelector(button);btn.onclick function () {document.write(div我是Jim.kk/div)}/script
/body由于页面已经渲染完毕这时候我们点击按钮写入这个元素页面中的内容直接被覆盖了只留下了我们写入的元素建议自己试验一下试试效果。 监听事件
给元素添加事件称为注册事件或者绑定事件。
注册事件有两种方式传统方式和方法监听注册方式。
方式比较
传统方式 传统方式利用on开头的事件比如onclick、onmouseenter特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数最后注册的处理函数会覆盖前面注册的处理函数。 下面代码中由于我们给btn先后注册了两个点击事件所以后面的点击事件会覆盖掉前面的点击事件点击之后会跳出弹框’Hello~’
bodybutton点击/buttonscriptvar btn document.querySelector(button);btn.onclick function () {alert(Hi~)}btn.onclick function () {alert(Hello~)}/script
/body监听事件 W3C 标准 推荐方式addEventListener() 是一个方法IE9之前的IE浏览器不支持此方法可以使用attachEvent()代替同一个元素同一个事件可以添加多个 添加监听事件 书写方式 eventTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener() 方法将制定的监听器注册到eventTarget上目标对象当该对象出发指定的事件时就会执行事件处理函数。 type事件类型字符串比如click、mouseover注意这里不带onlistener事件处理函数事件发生时会调用该监听函数useCapture可选参数是一个布尔值默认是false。 添加监听事件的两个方法
方法说明备注addEventListenerIE9以后才支持推荐attachEventIE9以前才支持
bodybutton监听事件/buttonscript// 2. 监听事件var btn document.querySelector(button);btn.addEventListener(click,function () {alert(Hello World);})btn.addEventListener(click,function () {alert(我是Jim.kk);})/script
/body以上代码点击按钮之后会连续跳出两次弹框第一个弹框显示Hello World当你关闭该弹框之后会再次跳出一个弹框显示我是Jim.kk。 解绑事件 传统方式中我们可以使用element.onclick null的方式解绑事件监听事件中我们要移除事件就不能再用匿名函数了而是要给函数一个名字然后removeEventListener这个事件 body!-- 传统方式 --button idbtn1传统事件/buttonscriptvar btn document.querySelector(#btn1);btn.onclick function () {alert(我是Jim.kk);btn.onclick null; // 解绑事件再次点击就没用了}/script!-- 监听方式 --button idbtn2监听方式/buttonscriptvar btn document.querySelector(#btn2);function fun() {alert(Jim.kk祝大家新年快乐);btn.removeEventListener(click,fun)}btn.addEventListener(click,fun);/script
/body在IE9之前的浏览器中我们只能使用attachEvent添加监听函数在这种情况下我们要使用detachEvent的方式来移除事件用法与removeEventListener无异这里不做演示。 事件流
事件执行流程 事件流描述的是从页面中接收事件的顺序 事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即DOM事件流。 比如我们给DIV注册了点击事件 DOM事件流分为三个阶段 补货阶段当前目标节点冒泡阶段 捕获阶段
虽然我是给Div添加的点击事件但是点击事件的接收者是DocumentDocument并没有绑定这个点击事件接下来向下找找到htmlhtml也没有绑定继续向下找找到bodybody也没有绑定接下来找到div这时候发现div绑定了这个事件
目标节点
找到div之后进入到当前目标阶段开始执行事件
冒泡阶段
div执行事件结束将事件向上传播依次给body-html-Document这里就是冒泡阶段 事件冒泡IE最早提出事件开始时由最具体的元素接收然后主机箱上传播到DOM最顶层节点的过程 事件捕获网景公司最早提出有DOM最顶层节点开始然后逐级向下传播到最具体的元素接收过程 验证 如果addEventListener第三个参数是true那么则处于捕获阶段执行顺序是由外向内也就是document-html-body-target 如果addEventListener第三个参数是false或者空那么则处于冒泡阶段执行顺序是由内到外也就是target-body-html-document 以下代码点击之后先弹出father框关闭后再弹出son框 headmeta charsetUTF-8title事件流/titlestyle.father {width: 400px;height: 400px;margin: 200px auto;padding: 50px;background: antiquewhite;}.son {background: gray;width: 100%;height: 100%;}/style
/head
bodydiv classfatherdiv classsonson盒子/div/divscript// dom 事件流三阶段// 1. JS 代码中只能执行捕获或者冒泡其中一个阶段// 2. onclick 和 attachEvent(ie)只能得到冒泡阶段// 3. 捕获阶段如果addEventListener第三个参数是true那么则处于捕获阶段 document-html-body-father-sonvar son document.querySelector(.son);son.addEventListener(click,function () {alert(son);}, true);var father document.querySelector(.father);father.addEventListener(click,function () {alert(father);}, true)/script
/body以下代码点击后先弹出son框再弹出father框最后弹出document框。 headmeta charsetUTF-8title事件流/titlestyle.father {width: 400px;height: 400px;margin: 200px auto;padding: 50px;background: antiquewhite;}.son {background: gray;width: 100%;height: 100%;}/style
/head
bodydiv classfatherdiv classsonson盒子/div/divscript// 4. 冒泡阶段如果addEventListener第三个参数是false或者省略那么就是冒泡阶段执行顺序 son-father-body-html-documentvar son document.querySelector(.son);son.addEventListener(click,function () {alert(son);});var father document.querySelector(.father);father.addEventListener(click,function () {alert(father);});document.addEventListener(click,function () {alert(document);})/script
/body事件对象 event 就是一个事件对象写到侦听函数的小括号中事件对象只有有了事件才会存在它是系统自动创建的无需传递参数事件对象是事件相关的一系列相关数据的集合跟事件相关比如鼠标点击里面就包含了鼠标的相关信息如果是键盘事件里面就包含了键盘的信息比如判断用户按下了哪个键事件对象不一定非要写成event名字可以随便写事件对象也有兼容性问题ie678通过window.event获取事件对象。 获取事件对象
传统方式获取事件对象
bodydiv一个盒子/divscriptvar div document.querySelector(div);div.onclick function (event) {// 1. event 就是一个事件对象写到侦听函数的小括号中// 2. 事件对象只有有了事件才会存在它是系统自动创建的无需传递参数// 3. 事件对象是事件相关的一系列相关数据的集合跟时间相关比如鼠标点击里面就包含了鼠标的相关信息如果是键盘事件里面就包含了键盘的信息比如判断用户按下了哪个键console.log(event);}/script
/body以上代码点击之后会在控制台输出鼠标的相关信息如截图中所示 监听方式获取事件对象 以下代码的执行顺序与上面代码无异不做演示 bodydiv一个盒子/divscriptvar div document.querySelector(div);div.addEventListener(click,function (event) {console.log(event);})/script
/body在ie678中使用监听对象
bodydiv一个盒子/divscriptvar div document.querySelector(div);div.addEventListener(click,function (event) {console.log(event); // undefinedconsole.log(window.event); // 事件对象})/script
/body事件对象的常见属性和方法
事件对象属性方法说明备注e.target返回触发事件的对象标准e.srcElement返回触发事件的对象非标准 ie678使用e.type返回时间的类型比如’click’、‘mouseover’不带one.cancelbubble该属性组织冒泡非标准 ie678使用e.returnValue该属性组织默认时间默认行为非标准 ie678使用比如不让连接跳转e.preventDefault()该方法阻止默认事件默认行为标准比如不让链接跳转e.stopPropagation()阻止冒泡标准 this我们给谁绑定了事件那么this就指向谁event.target指向我们点击的那个对象event.currentEvent类似于this但是ie678不支持 阻止默认行为 什么是默认行为比如a标签是跳转。 bodya hrefhttps://baidu.com百度/ascriptvar a document.querySelector(a);// 1. 监听方式a.addEventListener(click,function (e) {e.preventDefault(); // DOM 标准写法})// 2. 传统方式a.onclick function (e) {// 普通浏览器 e.preventDefault(); 方法e.preventDefault();// 低版本浏览器 ie678 returnValue 属性e.returnValue;// 也可以使用return false 阻止默认方法没有兼容问题return false;}/script
/body其中监听浏览器只能使用e.preventDefault()的写法 传统方式可以采用三种方式 e.preventDefault();e.returnValue; // 仅支持 ie678return false; 最推荐的写法没有兼容问题 阻止冒泡事件
冒泡事件开始时由最具体的元素接收然后主机箱上传播到DOM最顶层节点。
事件冒泡本身的特定会带来一定的好处也会带来一定的坏处需要我们灵活掌握。 阻止冒泡排序 stopPropagation()方法 在事件方法中对事件对象使用stopPropagation()即可
在ie678中使用window.event.cancelBubble true;的写法
事件委托 事件委托也称为事件代理在jQuery里面成为事件委派。 不是每个子节点单独设置事件监听器而是事件监听器设置在其父节点上然后利用冒泡原理影响设置每个子节点。 示例 给ul注册点击事件然后利用时间对象的target来找到当前点击的li因为点击li事件会冒泡到ul上ul有注册事件就会触发事件监听器。 一起看一下以下代码
我们给父元素ul添加点击事件这样当我们点击子元素li之后就会通过冒泡的方式传递到ul上我们在点击事件中通过target获取我们点击的元素然后给它一个背景颜色完美
bodyulli弹框咯/lili弹框咯/lili弹框咯/lili弹框咯/lili弹框咯/lili弹框咯/lili弹框咯/li/ulscriptvar ul document.querySelector(ul);ul.addEventListener(click,function (e) {e.target.style.backgroundColor pink;})/script
/body禁用鼠标右键
scriptdocument.addEventListener(contextmenu,function (e) {e.preventDefault();})
/script注意由于是监听事件不支持return false;的写法必须要用e.preventDefault();
禁用文字选择
bodyspan我是Jim.kk/spanscriptdocument.addEventListener(selectstart,function (e) {e.preventDefault();})/script
/body获取鼠标坐标信息
鼠标事件对象说明备注e.clientX返回鼠标相对于浏览器窗口可视区的X坐标e.clientY返回鼠标相对于浏览器窗口可视区的Y坐标e.pageX返回鼠标相对于文档页面的X坐标IE9 支持e.pageY返回鼠标相对于文档页面的Y坐标IE9 支持e.screenX返回鼠标相对于电脑屏幕的X坐标e.screenY返回鼠标相对于电脑屏幕的Y坐标
headmeta charsetUTF-8title获取鼠标坐标 /titlestylebody {height: 3000px;}/style
/head
body
scriptdocument.addEventListener(click,function (e) {console.log(e.clientX); // 可视窗口的X坐标纯网页部分console.log(e.clientY); // 可视窗口的Y坐标纯网页部分console.log(e.pageX); // 页面上的X坐标若是页面发生了滚动则该值也会增大缩小clientX/Y不会console.log(e.pageY); // 页面上的X坐标若是页面发生了滚动则该值也会增大缩小clientX/Y不会console.log(e.screenX); // 当前屏幕的坐标包含浏览器上册的操作栏部分console.log(e.screenY); // 当前屏幕的坐标包含浏览器上册的操作栏部分})
/script
/body以上代码点击后输出内容如下所示页面已经滚动: 常用键盘事件
键盘事件触发条件备注onkeyup某个按键松开时触发onkeydown某个按键按下时触发onkeypress某个按键按下时被触发可以区分字母大小写但是不能识别功能键比如ctrl、shift、箭头等
keydown | 键盘被按下
body
scriptdocument.addEventListener(keydown,function (e) {console.log(e.key被按下了);})
/script
/body以上代码当我在页面上按住s键不放效果如下 keyup | 键盘弹起事件 与键盘按下不太一样当键盘持续被按着时键盘按下事件会一直被触发但是键盘弹起事件只有在弹起的时候会被触发一次见以下代码。 bodyscriptdocument.addEventListener(keyup,function (e) {console.log(e.key弹起了);})/script
/body以上代码在我点击键盘后长按弹起后才会生效控制台输出如下 keypress | 键盘按下事件
与上面两个方法不同的是keypress按钮对功能键不生效。
bodyscriptdocument.addEventListener(keypress,function (e) {console.log(e.key被按下了);})/script
/body以上代码当我在键盘上分别点击a、s、d、f和ctrl键后控制台输出如下 可以看到ctrl键并没有生效。
我们可以通过event.key来获取键盘的值或者event.keyCode来获取ASCII码值。
按下s键输入框获取焦点案例
bodyinput typetextscriptvar search document.querySelector(input);document.addEventListener(keyup,function (e) {if ( e.key s) {search.focus();}})/script
/body以上代码用户在页面中点击s键输入框就会获取焦点用户就可以在输入框中输入内容了。
