height: 100px; background: blue; } jquery...-1.10.1.min.js"> $(function() { //“冒泡事件:微软提出的 事件由子元素传递到父元素的过程...,叫做冒泡” //但是在实际项目开发中,我们可能并不需要元素的默认行为,所以就可以通过以下方式进行禁止。...event.stopPropagation();//则只阻止事件往上冒泡,不阻止事件本身。...}); //“冒泡事件:微软提出的 事件由子元素传递到父元素的过程,叫做冒泡” //但是在实际项目开发中,我们可能并不需要元素的默认行为,所以就可以通过以下方式进行禁止。
大图猛戳
jQuery常用的Mouse事件有7种,分别是: mouseup:鼠标在元素上松开时触发 mouseup 事件。与 click 不同,只要鼠标在元素上松开即触发。...mouseup 和 mousedown 没什么好解释的,主要说一下 mouseover 和 mouseenter ; mouseout 和 mouseleave 的区别。...其实如果是一个单独的元素,也并看不出什么问题,而且我们也常用 mouseover 和 mouseout 组合。...原来这两个组合是由区别的,一个单独的元素时效果几乎是一样的,问题就在于它们的子元素。...打印结果如下图, mouseover 和 mouseout 在包含子元素的情况下会多次触发,mouseover 即使不包含子元素也会不断触发,mouseenter 在鼠标划入时触发一次,mouseleave
案例1:测试两种方式的区别【个数+顺序】 1.2. 绑定事件两种方式 1.2.1....console.info("鼠标出去了2"); }) //hover:鼠标悬浮---显示和隐藏 //效果:鼠标移动到h2标签就显示盒子,离开就隐藏盒子 // $...(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件,点击页面的其它位置不会触发。...; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。...y坐标 // $("#xy").text(x+","+y); // }) //移出事件,直接对元素使用unbind 或 off 来移出指定的事件例如在某些情况下,按钮只能点击一次
Google 浏览器 Chrome 的发布卷起了博客界对其讨论的狂潮,哈哈 很多 blogger 都贴出自己博客这两天 Google 浏览器 Chrome 的使用率。...根据 Google Anlytics 的9月4号的数据统计,共有 77.09% 通过 IE 访问我爱水煮鱼,然后 FireFox 占到了13.63%,Chrome 已经达到了第三,有 6.58%。...现在 Google 已经有了非常多的服务和应用,比如 Email,Doc,blogger,youtube 等等,由此展开联想,虽然现在 Google Chrome 的的起始标签页只是最热门网址的缩略图,...但是Google Chrome 会不会逐渐进化为 Google 服务的工作台呢?...以后用户在使用 Google Chrome 的时候,输入自己的 Google 账号和密码,Google Chrome 就会显示你的所有 Google 应用。 ----
随着互联网的快速发展,网络安全和上网行为管理变得越来越重要了。不少企业和组织为了维护网络的安全、稳定性,还有员工的工作效率,都开始使用上网行为管理软件。...这些软件的作用就是监控、分析和控制员工的上网行为,帮助组织管理网络资源,以免潜在的网络威胁和数据泄漏。其中,事件日志分析算法发挥了关键作用,它们有各种各样的优点和用途,真的非常实用。...首先,咱们来说说事件日志分析算法在上网行为管理软件中的优势:实时守护神:这些算法就像是网络的守护神,时刻盯着网络活动,能迅速嗅出潜在的网络威胁和怪异行为,让网络更安全。...未来预测师:通过趋势分析和挖掘数据,预测未来的网络需求和问题。自动化施法师:基于事件日志的自动化规则可以增强网络安全性和解决问题。...总之,这些事件日志分析算法在上网行为管理软件中真是顶呱呱的帮手,保护网络安全,确保合规,优化性能,真是应有尽有。它们就像网络的保姆,时刻照顾着网络的稳定和可用性。
方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。...-- 即事件不是从内部元素触发的 --> ... 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。...方法输出hello world,不能跳转到百度了; 按键的事件修饰符: 在监听键盘事件时,我们经常需要检查详细的按键。...Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: 意思就是只有在按下enter键之后才能触发后面的方法 和enter键后调用方法 -->
我们来看看这两个方法吧(只摘说明问题需要的代码) jQuery.event = { /* * elem:dom元素 * types:事件 *...至此,我们可以总结jQuery的事件注册/触发机制如下: - 对元素进行事件绑定(bind/on)时,事件会以elem->handles的kv对记录在内部缓存jQuery.cache中。...- 触发事件时,从cache中查找该元素对应的所有事件,依次执行。...bug原因 从以上分析不难看出,导致我们bug的原因如下: - 子页面的jQuery和父页面的jQuery是功能相同的两个不同对象。就像双胞胎,外表一致,内里却不尽相同。...在jQuery内部代码的add和trigger中加log也可以看出这一点 ? 解决 将child.html中的js代码改为 parent.
事件(或消息)是一种经常使用的软件设计模式。可以减少消息处理者和消息公布者的之间的耦合,比方J2EE里面的JMS规范。设计模式中的观察者模式(也叫公布/订阅模式)。...之前写的JQuery相关博客中。具体介绍了JQuery的事件处理机制和特性,具体可以參考这个文件夹下的文章。...JQuery事件处理事实上就是使用了公布/订阅模式,包含它提供的命名空间机制、自己定义事件都非常的棒,可是JQuery事件处理有一个缺陷:JQuery事件都是和DOM元素相关的,可是非常多时候我们并不须要...仅仅希望使用事件的公布/订阅这样的机制。 代码1:假设某个DOM元素不存在。那么不能依靠它使用事件的公布和订阅。...2,我们就能够看出JQuery事件的不足之处了。
键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表5-4所示。...表5-4键盘按键事件 键盘事件 说 明 keydown 当键盘按下时第一个发生的事件,对所有按键有效 keypress 当键盘按下时第二个发生的事件,对中文和特殊按键无效 keyup 当键盘弹起时发生的事件...对整个页面上下文分别做了三个键盘事件的绑定,先打开chrome浏览器的console窗体,然后在文本框中随意输入一个英文字母或数字时,就可以看到这个在三个键盘事件的执行顺序,如图5-14所示。...图5-15按下中文按键测试 在jQuery中,如果你要获取键盘输入的是什么按键,那么可以利用事件参数的which属性即可(event.which)。...现在在keydown和keypress事件中都增加一条代码console.log(event.which)用来在console窗体输出按键的结果,在输出前先保持大小写按键为小写字母模式,然后在文本框中输入小写字母
就在前两天,Talos发布了Microsoft Edge浏览器的安全漏洞细节,受此漏洞影响的还包括旧版本Google Chrome(CVE-2017-5033)以及基于Webkit的浏览器(例如苹果的Safari...简单来说,同源策略的本质就是它只能够允许来自特定服务器的代码访问Web资源。...XSS允许攻击者向浏览器所执行的原始服务器代码中注入远程代码,而攻击者所注入的恶意代码将能够以合法应用程序的身份在原始服务器中执行,并访问到服务器中的敏感数据,甚至还有可能实现应用会话劫持。...但可怕的是,Microsoft Edge(未修复)、Google Chrome(已修复)和Safari(已修复)浏览器中都存在一种信息披露漏洞,攻击者将能够利用该漏洞绕过这些浏览器的Content-Security-Policy...受影响版本Microsoft Edge(v40.15063及其之前版本)Google Chrome(v57.0.2987.98及其之前版本)- (CVE-2017-5033)iOS(v10.3及其之前版本
下拉列表绑定一个双击事件dblclick() $("#id”).dblclick(function(){ //获取列表中所有被选中的option var alloptions...= $("option:selected");//这种写法存在问题,如果已分配列表中也有被选中的option同样会被选中//不可以 var alloptions = $("#id option...$("option:selected");//不可以 var alloptions = $("option:selected",$("#id"));//选择哪个下拉(select)列表的被选中的值...,选中中的值(第四种写法) alert(alloptions.length); //appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。...//实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把b追加到a,而是把a追加到b $("option:selected",this).appendTo($("
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。...查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox、Chrome、IE中均 一、使用javascript实现 <!...语法:event.ctrlKey 取值:true | false 1|0 说明: ctrlKey属性为true表示事件发生时Ctrl键被按下并保持,为false则Ctrl键没有按下。...四、详细keyCode值列表: 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B...88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值
注:对于那些渴望更深入了解Chrome扩展的人,Google的官方文档是一份极其宝贵的资源。 值得注意的是,Google Chrome 扩展可以根据其预期的功能采取多种形式。...在上述字段中,Google 将在 Chrome 的扩展管理页面和 Chrome 网上商店中显示你的扩展的名称、版本和描述。...它们可以查看和操作正在运行的页面的 DOM,从而改变网页的内容和行为。 这是我们的内容脚本。...处理鼠标粘贴事件 虽然我们的扩展检测到按键操作,但用户可以通过使用鼠标的右键菜单粘贴敏感信息来绕过这一点。为了堵住这个漏洞,我们可以添加一个用于粘贴事件的事件监听器(或者两者都监听输入事件)。...为解决这个问题,考虑引入一个功能,该功能将在下一个提交事件发生之前禁用 molly-guard。 总结 如我们所见,构建自己的 Google Chrome 扩展并不是不可逾越的挑战。
DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。...注意:DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。 兼容性: ?...行为模拟: 在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll...2.3. jQuery.ready(fn) 源码摘录 API: // jQuery offers several ways to attach a function // that will run...参考: jQuery .ready() API: https://api.jquery.com/ready/ DOMContentLoaded: https://developer.mozilla.org
使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。...该函数的作用于trigger()函数相似,但triggerHandler()函数具有以下例外情况: 1-triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为,...表单submit事件默认的提交行为)。...对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键,请监听keydown事件。 keyup事件会在按下键盘按键并释放时触发。...例如:你一直按住A键,直到10秒钟后才释放,只会在释放按键的时候触发一次keyup事件。 但在这个过程中会触发许多次keydown事件(或keypress事件)。
在前端的世界里,事件是不可或缺的一部分。用户的点击、输入、滚动等行为都触发着各种事件,而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。...JQuery 是一个快速、简洁的 JavaScript 库,它简化了 HTML 文档的遍历和操作、事件处理、动画等操作。而其中的事件绑定机制是 JQuery 的一大特色。 什么是事件绑定?...键盘事件:keydown(按键按下)、keyup(按键释放)、keypress(按键被按下并松开)等。...当按钮被点击时,会触发按钮的点击事件,同时会触发内层元素和外层元素的点击事件。...在表单提交时,通过 submit 事件阻止默认的提交行为,执行其他操作(比如异步验证、数据提交等)。 结语:奇妙世界的探索 通过本文的学习,我们深入了解了 JQuery 事件绑定的基本原理和用法。
--- 二、jQuery 的事件委托顺序: 举例: ?...输出结果: ① C 被点击了 ② B 被点击了 ③ 点击了 C,即 C 委托 A 的 click 事件被点击了 ④ 点击了 B,即 B 委托 A 的 click 事件被点击了 ⑤ A 被点击了 综上,jQuery...事件被点击了") }) ---- 三、jQuery 绑定事件上的 event 上的 target、currenttarget 和 delegateTarget 的区别?...jQuery( sel, this ).index( cur ) > -1 : //注意:jQuery.find()和jQuery().find()是不一样的...,然后进入冒泡循环,再进入委托事件循环, 关键是:jQuery.find(), cur=#C 的时候,matchedSelectors[ sel ]=jQuery.find( sel, this, null
jquery.min.js 失败了,因为Google被墙了,导致其域名下的js文件也访问不了,而这个jquery获取失败导致了后面一连串的js报错。...我之前接触过一个Chrome的插件叫 TamperMonkey,这个工具允许用户自己创建js脚本并挂载到目标网页上,以实现修改网页样式、行为的目的。...安装TamperMonkey TamperMonkey为主流浏览器(Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox)都提供了插件,...我们先给浏览器安装TamperMonkey插件,我用的Chrome,但是由于Google被墙(可恶的*),我们不能通过Google Web Store安装,所以只能从第三方下载并手动安装。...标签,将其替换成一个新的script标签,src为bootcss cdn的jquery地址(试验了jquery官方和微软的cdn,访问速度都不如bootcss快)。
chrome 插件 Chrome 上有非常多的功能强大的和插件。这些插件让 Chrome 变得更加强大。下面是我常用的一些插件。 常用工具 划词翻译 翻译工具。...对于一些优秀的,依赖广告过活的网站,请对该网站关闭广告拦截~ Replace Google CDN 将 Google CDN 的地址替换为国内中科大的地址。...中国国情,你懂的~ Awesome Screenshot 截屏工具。支持截取高度超过一屏的整带个页面的内容;也支持给截图的部分区域打马赛克的功能。...更酷的使用浏览器 Gestures for Google Chrome 鼠标手势。 Vimium 使用 Vim 的方式来浏览页面。 Link Preveiw 预览超链接指向的页面的内容。...Visual Event 查看用 jQuery 绑定的事件处理代码。如果用浏览器自带的的 Event Listeners 查看的话,可以查看到元素上绑定的事件,但指向是的 jQuery 的源码。