事件详解C - 键盘事件及事件流 2024-06-18 07:37:06 键盘事件格式:document.键盘事件1.onkeypress; 按下字符键触发2.onkeydown; 按下任意键触发先来看onkeypress和onkeydown:运行结果如下:altKey、ctrlKey、shiftKey; 也是键盘事件的属性//返回布尔值true或者false来判断是否按了某一个键来看一下使用方法:运行结果如下:evt.keyCode; 判断是否按了某个键运行结果如下:事件流事件流描述的是页面接收事件的顺序事件流的的三个阶段︰捕获,目标,冒泡阻止冒泡事件委托机制∶利用事件冒泡的原理,把本应添加给某元素上的事件委托给他的父级(外层)举个小例子:运行结果如下:点击红色区域只显示outer;但是点击蓝色区域会显示inner和outer,inner先输出。此时,点击蓝色区域相当于先点蓝色再点红色下面红色区域也会输出,就是因为有冒泡情况的出现冒泡:最特定的目标,到最不特定的目标的过程那我们该如何阻止冒泡显示呢?这里需要先定义evt,然后使用下面两种方式:evt.cancelBubble = true; //适合于所有高低版本的浏览器evt.stopPropagation(); //适用于新版的浏览器我们还是拿上面的例子来看一下:只需要在上面的例子上加上这几句代码运行结果如下:即可成功取消冒泡操作,点击蓝色只会出现inner事件委托机制上面我们提到事件委托就是利用事件冒泡的原理,把本应该添加给某元素上的事件委托给它的外层父级为什么会有事件委托机制呢?因为在我们的实际操作的过程当中,我们有显示某些数据的一个列表,我们在进行页面布局的时候,默认的显示5条数据,这5条数据假设我们都需要添加一个单击事件,当我们点击加载更多,或者有其他操作、需要更多数据的时候,后面的这个数据它就不具备单击事件这时候不是我们所希望看到的,就需要用到事件委托了,即使是后添加到页面当中的数据,也能具备相应的事件处理函数我们还是通过具体的代码来看一下:运行结果如下:当我们点击前5个的时候,都没有问题可以正常显示但是当我们点击后面在js中创建的5个时,不会显示任何效果我们来利用事件委托来拯救一下这个问题:这里我们要把本来添加到li上的事件添加到ul上,下标写在获取时,方便书写运行结果如下:无论点击之前的5个还是新建的5个,包括空白区域只要点击ul中的东西就会返回aa显然这也不是我们需要的效果这里将获取节点nodeName时,改为大写,是因为当你输出nodeName时你会发现全是大写的nodeName代表指定的节点名称现在的运行效果如下:分别点击就会显示正确的对应数值- 写作不易,大家多多关注,谢谢啦----web分享,分享的不只是web 赞 (0) 相关推荐 参数传递 this 和 event 的区别 当我们调用一个方法的时候一般都会传递this作为参数,但是今天小编遇到了一个问题就是传递this作为参数时 evt.target 是undefined 如果传递的参数是event时 就能找到 evt. ... 败类刘连昆,为何当叛徒?详解20世纪著名间谍事件 败类刘连昆,为何当叛徒?详解20世纪著名间谍事件 从历史事件详解周易六十四卦的“卦象”! 这几年西方的占星术在我们国内很热门,甚至一度超过我们祖祖辈辈最亲近的"四柱八字"和"周易预测". 其实我们中国传统的预测学要比占星术厉害很多,只是国人不懂而已. ... 详解C#中委托,事件与回调函数讲解 .Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等. "protected vo ... 荣誉的叛国者——德国“720事件”详解(上) 1944年7月20日,施陶芬贝格上校刺杀希特勒,是被人所周知的15次刺杀希特勒的行动中最为知名的一次.但是,因为德国民众的哲学基因以及二战后两个德国的意识形态的宣传,对"720事件" ... 荣誉的叛国者——德国“720事件”详解(中) 瓦尔基里 实际上,在1944年7月20日以前,低级国防军将领一共组织了6次刺杀希特勒的行动,前文的"闪电行动"即是其中之一.但是种种刺杀行动要不是因为执行者临时胆怯,要不是由于希特 ... 荣誉的叛国者——德国“720事件”详解(下) 荣誉的叛国者--德国"720事件"详解(上) 荣誉的叛国者--德国"720事件"详解(中) 事件的后续 炸弹爆炸时,施陶芬贝格上校和费尔吉贝尔将军在后者的办公室 ... 事件详解D - 默认行为及DOM2事件 浏览器的默认行为 JavaScript事件本身所具有的属性,例如 a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 阻止默认行为的方式: event.preventDefault ... JavaScript事件详解A(兼容性) 课程大纲 1.事件基础 2.事件处理函数( console.log ); 3.事件对象 4.事件默认行为及阻止方式 5.DOM2级时间处理 6.事件委托机制 我们依次来学习 事件基础 Ja ... JavaScript事件详解B - 坐标 事件对象常用的属性 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型.以及其它与特定事件相关的信息. 通过事件绑定的执行函数是可以得到一个 ...