网站建设申报方案,郑州网站营销推广公司,设计师导航网站,设计师个人网站源码一、什么是事件监听 DOM允许书写JavaScript代码以让HTML元素对事件作出反应什么是事件: 用户与网页的交互动作当用户点击元素时当鼠标移动到元素上时当文本框的内容被改变时当键盘在文本框中被按下时当网页已加载完毕时… “监听”#xff0c;顾名思义…一、什么是事件监听 DOM允许书写JavaScript代码以让HTML元素对事件作出反应什么是事件: 用户与网页的交互动作当用户点击元素时当鼠标移动到元素上时当文本框的内容被改变时当键盘在文本框中被按下时当网页已加载完毕时… “监听”顾名思义就是让计算机随时能够发现这个事件发生了从而执行程序员预先编写的一些程序。 设置事件监听的方法主要有onxxx和addEventListener()两种 常见的鼠标事件监听 事件名事件描述onclick当鼠标单击某个对象ondblclick当鼠标双击某个对象onmousedown当某个鼠标按键在某个对象上被按下onmouseup当某个鼠标按键在某个对象上被松开onmousemove当某个鼠标按键在某个对象上被移动onmouseenter当鼠标进入某个对象相似事件onmouseoveronmouseleave当鼠标离开某个对象相似事件onmouseout 常见的键盘事件监听 事件名事件描述onkeypress当某个键盘的键被按下系统按钮如箭头键和 功能键无法得到识别onkeydown当某个键盘的键被按下系统按钮可以识别 并且会先于onkeypress发生onkeyup当某个键盘的键被松开 常见的表单事件监听 事件名事件描述onchange当用户改变域的内容onfocus当某元素获得焦点比如tab键或鼠标点击onblur当某元素失去焦点onsubmit当表单被提交onreset当表单被重置oninput当表单输入 常见的页面事件监听 事件名事件描述onload当页面或图像被完成加载onunload当用户退出页面
二、事件传播 事件的传播是先从外到内然后再从内到外 onxxx写法和addEventListener()方法区别 onxxx写法只能监听冒泡阶段DOM0级事件监听。addEventListener()通过参数控制可以监听捕获或者冒泡DOM2级事件监听。 注意 最内部元素不再区分捕获和冒泡阶段会先执行写在前面的监听然后执行后写的监听。如果给元素设置相同的两个或多个同名事件则DOM0级写法后面写的会覆盖先写的而DOM2级会按顺序执行。
三、事件对象 事件处理函数提供一个形式参数它是一个对象封装了本次事件的细节 这个参数通常用单词event或字母e来表示。 oBox.onmousemove function (e) {// 对象e就是这次事件的事件对象}鼠标位置 属性属性描述clientX鼠标指针相对于浏览器的水平坐标clientY鼠标指针相对于浏览器的垂直坐标pageX鼠标指针相对于整体网页的水平坐标pageY鼠标指针相对于整体网页的垂直坐标offsetX鼠标指针相对于事件源元素的水平坐标offsetY鼠标指针相对于事件源元素的垂直坐标 e.charCode 和 e.keyCode属性 e.charCode属性通常用于onkeypress事件中表示用户输入的字符的字符码。e.keyCode属性通常用于onkeydowm事件中和onkeyup中表示用户按下的按键的键码。 charCode字符码 字符字符码数字0~数字948~57大写字母A~Z65~90小写字母a~z97~122 keyCode键码 按键键码数字0~数字948~57字母不分大小a~z65~90四个方向键左、上、右、下37、38、39、40回车键13空格键32 e.preventDefault()方法 e.preventDefault()方法用来阻止事件产生的默认动作。 e.stopPropagation()方法 -e.stopPropagation()方法用来阻止事件继续传播 一些场合非常有必要切断事件继续传播否则会造成页面特效显示bug。
四、事件委托 批量添加事件监听 题目页面上一个无序列表ul它内部共有20个li元素请批量给它们添加点击事件监听实现效果点击哪个 li元素哪个li元素就变红。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyul idlistli列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/lili列表项/li/ulscriptvar oList document.getElementById(list);var lis oList.getElementsByTagName(li);// 书写循环语句批量给元素添加监听for (var i 0; i lis.length; i) {lis[i].onclick function () {// 在这个函数中this表示点击的这个元素this涉及函数上下文的相关知识我们在“面向对象”课程中介绍this.style.color red;};}/script
/body/html批量添加事件监听的性能问题 每一个事件监听注册都会消耗一定的系统内存而批量添 加事件会导致监听数量太多内存消耗会非常大。实际上每个li的事件处理函数都是不同的函数这些函数本身也会占用内存。 新增元素动态绑定事件 题目页面上有一个无序列表ul它内部没有li元素 请制作一个按钮点击这个按钮就能增加一个li元素。 并且要求每个增加的li元素也要有点击事件监听实现效果 点击哪个li元素哪个li元素就变红 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodybutton idbtn按我添加新的li列表项/buttonul idlist/ulscriptvar oBtn document.getElementById(btn);var oList document.getElementById(list);var lis oList.getElementsByTagName(li);// 按钮的点击事件oBtn.onclick function () {// 创建一个新的li列表项孤儿节点var oLi document.createElement(li);oLi.innerHTML 我是列表项;// 上树oList.appendChild(oLi);// 给新创建的这个li节点添加onclick事件监听oLi.onclick function () {this.style.color red;};};/script
/body/html动态绑定事件的问题 新增元素必须分别添加事件监听不能自动获取事件监听。大量事件监听、大量事件处理函数会产生大量内存消耗。 事件委托 利用事件冒泡机制将后代元素事件委托给祖先元素。 事件委托通常需要结合使用e.target属性 参数描述target触发此事件的最早元素即事件源元素currentTarget事件处理程序附加到的元素!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodybutton idbtn按我创建一个新列表项/buttonul idlistli列表项/lili列表项/lili列表项/li/ulscriptvar oList document.getElementById(list);var oBtn document.getElementById(btn);oList.onclick function (e) {// e.target表示用户真正点击的那个元素e.target.style.color red;};oBtn.onclick function () {// 创建新的li元素var oLi document.createElement(li);// 写内容oLi.innerText 我是新来的;// 上树oList.appendChild(oLi);};/script
/body/html事件委托的使用场景 当有大量类似元素需要批量添加事件监听时使用事件委 托可以减少内存开销。当有动态元素节点上树时使用事件委托可以让新上树的 元素具有事件监听 使用事件委托时需要注意的事项 onmouseenter和onmouseover都表示鼠标进入它们有什么区别呢? onmouseenter不冒泡onmouseover冒泡。 使用事件委托时要注意不能委托不冒泡的事件给祖先元素。最内层元素不能再有额外的内层元素了。
