鹿维恩
鹿维恩

【JavaScript】Event事件（下）

文章目录

    • 一.默认行为
      • 阻止默认行为
    • 二.事件流
      • 事件的传播
      • 冒泡、捕获、目标
      • 目标
      • 冒泡
      • 捕获
      • 冒泡和捕获的区别
      • 阻止冒泡和捕获
    • 三.事件委托
      • 事件触发
      • target
      • 委托
      • 总结
    • 四.案例

一.默认行为

  • 默认行为，就是不用我们注册，它自己就存在的事情
    • 比如我们点击鼠标右键的时候，会自动弹出一个菜单
    • 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
    • …
  • 这些不需要我们注册就能实现的事情，我们叫做 默认事件

阻止默认行为

  • 有的时候，我们不希望浏览器执行默认事件
    • 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么
    • 而不是直接跳转链接
    • 那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件
  • 我们有两个方法来阻止默认事件
    • e.preventDefault() : 非 IE 使用
    • e.returnValue = false ：IE 使用
  • 我们阻止默认事件的时候也要写一个兼容的写法
<a href="https://www.baidu.com">点击我试试a>
<script>
	var oA = document.querySelector('a')
 
 a.addEventListener('click', function (e) {
   e = e || window.event
   
   console.log(this.href)
   
   e.preventDefault ? e.preventDefault() : e.returnValue = false
 })
script>
  • 这样写完以后，你点击 a 标签的时候，就不会跳转链接了
  • 而是会在控制台打印出 a 标签的 href 属性的值

二.事件流

  • 今天来聊一聊事件的执行机制

  • 什么是事件的执行机制呢？

    • 思考一个问题？

    • 当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件

    • 你点击里面的小盒子，外面的大盒子上的点击事件要不要执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3fRPFnof-1671496795783)(assets/event传播.jpg)]

事件的传播

  • 就像上面那个图片一样，我们点击在红色盒子身上的同时，也是点击在了粉色盒子上
  • 这个是既定事实，那么两个盒子的点击事件都会触发
  • 这个就叫做 事件的传播
    • 当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
    • 就像上面的图片一样
    • 点击在红色盒子上的时候，会触发红色盒子的点击事件
    • 也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
    • 也是点击在了 body 上，也会触发 body 的点击事件
    • 也是点击在了 html 上，也会触发 html 的点击事件
    • 也是点击在了 document 上，也会触发 document 的点击事件
    • 也是点击在了 window 上，也会触发 window 的点击事件
    • 也就是说，页面上任何一个元素触发事件，都会一层一层最终导致 window 的相同事件触发，前提是各层级元素得有注册相同的事件，不然不会触发
  • 在事件传播的过程中，有一些注意的点：
    1. 只会传播同类事件
    2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
    3. 内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发
  • 到现在，我们已经了解了事件的传播，我们再来思考一个问题
    • 事件确实会从自己开始，到 window 的所有相同事件都会触发
    • 是因为我们点在自己身上，也确实逐层的点在了直至 window 的每一个元素身上
    • 但是到底是先点在自己身上，还是先点在了 window 身上呢
    • 先点在自己身上，就是先执行自己的事件处理函数，逐层向上最后执行 window 的事件处理函数
    • 反之，则是先执行 window 的事件处理函数，逐层向下最后执行自己身上的事件处理函数

冒泡、捕获、目标

  • 我们刚才聊过了，每一个事件，都是有可能从自己到 window ，有可能要执行多个同类型事件
  • 那么这个执行的顺序就有一些说法了

目标

  • 你是点击在哪个元素身上了，那么这个事件的 目标 就是什么

冒泡

  • 就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
  • 也就是从下向上的执行事件处理函数

捕获

  • 就是从 window 的事件处理函数开始，依次向内，只要事件 目标 的事件处理函数执行
  • 也就是从上向下的执行事件处理函数

冒泡和捕获的区别

  • 就是在事件的传播中，多个同类型事件处理函数的执行顺序不同

阻止冒泡和捕获

  • 取消冒泡和捕获：让当前操作的具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）
    • IE下取消冒泡和捕获/chrome： event.cancelBubble=true;
    • 标准取消冒泡和捕获： event.stopPropagation();
  • 注意：事件冒泡和捕获的前提–事件和事件类型相同 父子元素关系。

三.事件委托

  • 就是把我要做的事情委托给别人来做

  • 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件

  • 所以我们就可以把子元素的事件委托给父元素来做

事件触发

  • 点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，就可以触发父元素的点击事件
<body>
 <ul>
   <li>1li>
   <li>2li>
   <li>3li>
 ul>
 <script>
 	var oUl = docuemnt.querySelector('ul')
   
   oUl.addEventListener('click', function (e) {
     console.log('我是 ul 的点击事件，我被触发了')
   })
 script>
body>
  • 像上面一段代码，当你点击 ul 的时候肯定会触发
  • 但是当你点击 li 的时候，其实也会触发

target

  • target 这个属性是事件对象里面的属性，表示你点击的目标

  • 当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

  • 这个 target 也不兼容，在 IE 下要使用 srcElement

<body>
 <ul>
   <li>1li>
   <li>2li>
   <li>3li>
 ul>
 <script>
 	var oUl = docuemnt.querySelector('ul')
   
   oUl.addEventListener('click', function (e) {
     e = e || window.event
     var target = e.target || e.srcElement
     console.log(target)
   })
 script>
body>
  • 上面的代码，当你点击 ul 的时候，target 就是 ul
  • 当你点击在 li 上面的时候，target 就是 li

委托

  • 这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件

  • 并且在事件内，我们也可以拿到你点击的到底是 ul 还是 li

  • 这个时候，我们就可以把 li 的事件委托给 ul 来做

<body>
 <ul>
   <li>1li>
   <li>2li>
   <li>3li>
 ul>
 <script>
 	var oUl = docuemnt.querySelector('ul')
   
   oUl.addEventListener('click', function (e) {
     e = e || window.event
     var target = e.target || e.srcElement
    
     // 判断你点击的是 li
     if (target.nodeName.toUpperCase === 'LI') {
     	// 确定点击的是 li
       // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL'
       // 去做点击 li 的时候该做的事情了
       console.log('我是 li，我被点击了')
     }
   })
 script>
body>
  • 上面的代码，我们就可以把 li 要做的事情委托给 ul 来做

总结

  • 为什么要用事件委托

    • 我页面上本身没有 li
    • 我通过代码添加了一些 li
    • 添加进来的 li 是没有点击事件的
    • 我每次动态的操作完 li 以后都要从新给 li 绑定一次点击事件
    • 比较麻烦
    • 这个时候只要委托给 ul 就可以了
    • 因为新加进来的 li 也是 ul 的子元素，点击的时候也可以触发 ul 的点击事件

  • 事件委托的书写

    • 元素的事件只能委托给结构父级或者再结构父级的同样的事件上
    • li 的点击事件，就不能委托给 ul 的鼠标移入事件
    • li 的点击事件，只能委托给 ul 或者在高父级的点击事件上

  • 事件委托的优缺点

    • 优点：减少事件注册次数，提升性能，因为事件是绑定在父元素上，新加入的子元素同样拥有事件。
    • 缺点：所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

四.案例

  • 跟随鼠标的提示框
  • 表格的即时编辑
  • CSS模拟下拉菜单（select）-- 提供结构
  • 百度的登录框效果
  • 拖拽的封装(控制边界范围)
  • 拖拽的碰撞检测

你可能感兴趣的:(JS,javascript,前端,开发语言)

  • 由于直接在回答中完整展示一个复杂如游戏商城的代码系统并不现实（会超出限制且难以维护），我将为你概述一个简化的游戏商城系统的架构，并提供关键部分的示例代码，这些代码将涵盖几种不同的编程语言。 NewmanEdwarda2 游戏架构
    架构概述pzswcc.cn前端：用于展示商品、处理用户交互（如查看商品详情、添加到购物车、结账等）。后端：处理业务逻辑（如商品库存管理、订单处理、用户认证等），与数据库交互。数据库：存储商品信息、用户信息、订单信息等。示例代码前端（HTML+JavaScript）HTML（简单页面布局）html游戏商城游戏商城JavaScript(使用FetchAPI调用后端API)javascript//假设后
  • 软件测试笔记｜web自动化测试｜Web 自动化测试中，有没有修改过页面元素的属性？如何修改？ 阳哥整理软件测试笔记 web自动化测试自动化
    在Web自动化测试中，可以修改页面元素的属性。通常可以使用JavaScript来实现修改元素属性。以下是使用Selenium结合JavaScript修改页面元素属性的方法：fromseleniumimportwebdriverdriver=webdriver.Chrome()#打开网页driver.get("your_url_here")#找到要修改属性的元素element=driver.find
  • idea 启动tomcat 工程_使用IDEA创建JavaWeb项目 部署本地tomcat并运行 心在天上脚在地上 idea启动tomcat工程
    一、下载商业版IDEA二、新建JavaWeb项目1、在菜单栏找到File>>New>>Project2、在弹出的窗口中找到JavaEnterPrise>>WebApplication，点击Next3、填写项目名称，选择项目位置，然后Finish4、在左侧窗口可以看到IDEA创建JavaWeb工程的目录结构，在src中写java代码，在web目录下放jsp页面。三、下载tomacat下载完成后，解压
  • 把html字符串转为可以被js操作的dom 微特尔普拉斯 javascriptwebnodejavascripthtml前端
    在JavaScript中，您可以使用DOMParserAPI将HTML字符串转换为可操作的DOM节点。以下是具体步骤：1.创建DOMParser实例：constparser=newDOMParser();2.使用parseFromString()方法解析HTML字符串：consthtmlString='Hello,world!';constdoc=parser.parseFromString(ht
  • 解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据 微特尔普拉斯 ajaxjavascriptajax前端javascript
    在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是AJAX（AsynchronousJavaScriptandXML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。在AJAX出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS
  • 写一个图片裁剪的js，JavaScript图片裁剪插件PlusCropper 微特尔普拉斯 javascriptnodevuejavascript开发语言ecmascript
    在前端开发中，图片裁剪是一个常见的需求。本文将深入解析一个功能完善的JavaScript图片裁剪插件——PlusCropper，带你一步步了解其实现原理和使用方法。一、插件概述PlusCropper是一个轻量级的JavaScript插件，它允许用户在网页上交互式地裁剪图片。它提供了以下功能：可拖拽和缩放的裁剪框:用户可以通过鼠标或触摸操作来调整裁剪区域的大小和位置。图片旋转:支持图片的顺时针和逆时
  • 数据库datetime时间前端显示格式化 微特尔普拉斯 javajavascriptjquery数据库datetime时间格式转换
    后台查询数据库返回的这种时间格式2019-04-24T02:30:00.000+0000第一种方法:vartime="2019-11-04T08:04:52.000+0000";vard=newDate(time);vartimes=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+''+d.getHours()+':'+d.getMinut
  • Vue项目中实现AES加密解密 小金子J 前端框架JavaScript分享vue.js前端javascript
    在前端开发中，保护用户数据的安全性至关重要。AES（高级加密标准）作为一种广泛使用的对称加密算法，因其高效性和安全性而受到青睐。本文将介绍如何在Vue项目中实现AES加密解密，包括ECB和CBC两种模式。环境搭建在Vue项目中使用AES加密解密功能之前，需要先安装crypto-js库。通过执行以下命令，可以轻松地将crypto-js添加到项目中：npminstallcrypto-js--save-
  • uni-app开发微信小程序 hong161688 uni-app微信小程序小程序
    uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超
  • DOM事件与元素属性操作基本应用 amanohina
    事件事件：什么时候，做什么事执行机制：触发——响应绑定事件三要素1.事件源：绑定给谁事件2.事件类型：绑定什么类型的事件比如：click单击3.事件函数：事件发生后执行什么内容，写在函数内部事件监听JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发了绑定事件，就会立即执行事件函数常见事件监听方法方法1：绑定HTML元素属性方法2：绑定DOM对象属性绑定H
  • mybatis支持json，Spring boot配置 Knight_9
    mysql5.7版本以后支持原生json格式，基于Springboot进行配置说明。mybatis支持mysql的json格式mysql-connector，mysql的驱动版本要大于等于5.1.40，否则json字段查询会发生乱码。继承BaseTypeHandler自定义一个json类型处理器，放到一个handler包下，例：packagecom.c.config.handler;importc
  • 利用Leaflet.js创建交互式地图：绘制固定尺寸的长方形 小金子J 前端框架WebGISjavascript开发语言ecmascript前端框架信息可视化
    在现代Web开发中，交互式地图已成为展示地理位置数据的重要工具。Leaflet.js是一个轻量级、功能丰富的开源JavaScript库，用于构建移动友好的交互式地图。在本文中，我们将探讨如何利用Leaflet.js在地图上绘制一个固定尺寸的长方形，扩展我们之前实现的单个多边形绘制功能。背景我们已经实现了一个功能，允许用户在地图上绘制任意形状的多边形。现在，我们希望在此基础上增加一个新功能：用户可以
  • 使用 uni-app 开发微信小程序：深入教程与技巧 代码伐木匠 笔记本uni-app微信小程序notepad++
    使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭
  • 【数据结构】字符串与JSON字符串、JSON字符串及相应数据结构（如对象与数组）之间的相互转换 理想青年宁兴星 数据结构数据结构jsonjava
    前言：下面打印日志用的是FastJSON依赖库中的@Log4j2。依赖：com.alibabafastjson1.2.80目录普通字符串->json字符串json字符串->普通字符串java对象->json字符串json字符串->java对象普通字符串->json字符串代码：publicstaticvoidmain(String[]args){Strings="ningxingxing";Stri
  • 微信小程序之轮播图组件封装 鱼在在 vueuni-app微信小程序javascript
    目录封装组件——mp-rotationchat组件的属性与方法——swiper-rotation-chat.js组件的引入使用封装组件——mp-rotationchat文件目录components（所有组件位置）swiper-roatiton-chat（轮播图组件包）swiper-rotation-chat.wxmlswiper-rotation-chat.jspages（所有页面）index（初
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • 微信小程序集成前端日志库 人工智能的苟富贵 前端小程序微信小程序前端
    在微信小程序内接入日志库的记录在开发微信小程序时，为了更好地调试和维护代码，通常需要记录日志信息。我尝试了多种日志库，包括Winston、pion和loglevel，并最终选择了loglevel作为日志库，并实现了日志上传到服务器的功能。本文详细记录了这一过程，以供参考。使用Winston失败最初，我尝试在微信小程序中使用Winston日志库。然而，Winston依赖Node.js的部分核心模块（
  • vue IE因Promise无法显示解决办法 Yao请输入昵称
    一、ie11打开vue2.0项目空白,控制台报错vuexrequiresaPromisepolyfillinthisbrowserPromise为ES6语法，有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法①npminstall--save-devbabel-polyfill②在main.js中引入import"babel-polyfill"
  • golang文件相对路径问题 jzpfbpx golang开发语言后端
    目录结构2.具体代码：constdataFile="../data/data.json"_,fileName,_,_:=runtime.Caller(1)dataPath:=path.Join(path.Dir(fileName),dataFile)fmt.Println(dataPath)//openfilefile,err:=os.Open(dataPath)iferr!=nil{log.Fa
  • golang文件相对路径问题 jzpfbpx golang开发语言后端
    1.目录结构2.具体代码：constdataFile="../data/data.json"_,fileName,_,_:=runtime.Caller(1)dataPath:=path.Join(path.Dir(fileName),dataFile)fmt.Println(dataPath)//openfilefile,err:=os.Open(dataPath)iferr!=nil{log.
  • Vue Router push方法的使用 hzw0510 Vuevue.js前端javascript
    VueRouterpush方法的使用this.$router.push是VueRouter提供的一个方法，用于在Vue.js应用中进行编程式导航。它的作用是将用户导航到应用中的不同路由。基本作用this.$router.push方法会在浏览器历史记录中添加一个新的记录，并导航到指定的路由。它的工作方式类似于点击一个组件，或者在浏览器中手动输入URL后点击回车。使用示例以下是一些使用this.$ro
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • 5分钟熟练上手ES的具体使用 佚名涙 elasticsearchjenkins大数据学习
    5分钟上手ES的具体使用相信有很多同学想要去学习elk时会使用docker等一些方式去下载相关程序，但提到真正去使用es的一系列操作时又会知之甚少。于是这一篇博客应运而生。本文就以下载好elk/efk系统后应该如何去使用为例，介绍es的具体操作。es关键字基本概念索引（Index）：类似于关系型数据库中的“数据库”，是数据存储的容器。文档（Document）：类似于关系型数据库中的“行”，是JSO
  • asp.net core的入门教学 21软件外包1班-庞兴南 asp.net后端
    什么是ASP.NETCoreasp.netcore是一个基于HTML和ASP的动态Web开发框架，主要用于web应用程序的开发。它是一个轻量级框架，使用HTML、ASP、CSS、JavaScript等技术。它易于使用和部署，可以快速构建web应用程序。asp.netcore提供了丰富的功能，包括模板引擎、文件解析、数据处理和用户管理等。本文将介绍asp.netcore的主要功能和特点，并提供使用方
  • 6.1 ASP.NET Core Web 入门 步、步、为营 .NetCoreasp.netmvc
    6.1ASP.NETCoreWeb入门ASP.NETCore中，严格来讲只有一个Asp.netCoreMVC一个框架，Asp.netCoreMVC既支持基于视图的MVC开发，也支持WebAPI和RazorPages开发。ASP.NETCoreMVC项目在VS2022中，一定选择ASP.NETCoreWeb应用（模型-视图-控制器）项目模板项目中wwwroot文件夹包含图片、JS、CSS等静态文件，
  • 八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别 翔云API api人工智能ocr开发语言自动化小程序运维
    证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证、机场出入口等场景。仅需上传证件图片，便可快速、精准识别全证面文字信息。python调用身份证识别API：varform=newFormData();form.append("img","/9j");form.append("key","M****
  • JS浮点数(小数)计算加减乘除 世界太过浮夸 JavaScript
    /****除法函数，用来得到精确的除法结果**说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。**调用：accDiv(arg1,arg2)**返回值：arg1除以arg2的精确结果**/functionaccDiv(arg1,arg2){vart1=0,t2=0,r1,r2;try{t1=arg1.toString().split("
  • vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题 miao_zz vuevue
    vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题vue.config.jsvue.config.jsconstport=process.env.port||8081//端口constTimestamp=newDate().getTime();constMiniCssExtractPlugin=require("mini-css-extract-plugin")modu
  • ios内付费 374016526 ios内付费
    近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
  • 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程
      终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们
  • Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题
    转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
  • 数据库面试题 18289753290 面试题 数据库
    1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是
  • Android TV屏幕适配 酷的飞上天空 android
    先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d
  • Timer定时器与ActionListener联合应用 永夜-极光 java
    功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){
  • Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04
    Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if
  • 学会人际关系三招 轻松走职场 aijuans 职场
    要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力
  • 《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
    移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人
  • js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载
    1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p
  • ajax同步异步参数async bijian1013 jqueryAjaxasync
            开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur
  • Webx3框架（1） Bill_chen eclipsespringmaven框架ibatis
    Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部
  • 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
    MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo
  • spring/hibernate/struts2常见异常总结 白糖_ Hibernate
    Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin
  • jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset
    在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo
  • 编程之美-烙饼排序 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */
  • Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
    struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s
  • [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
          这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &
  • ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表
    ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会
  • 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd
        在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp
  • scanf接受char类型的字符 dcj3sjt126com c
    /* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%
  • 学编程的价值 dcj3sjt126com 编程
    发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的
  • 二维数组（矩阵）对角线输出 飞天奔月 二维数组
    今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要
  • Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞
    可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
  • mysqldiff对数据库间进行差异比较 jackyrong mysqld
      mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345
  • spring data jpa 方法中可用的关键字 lawrence.li javaspring
    spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna
  • Spring的ModelAndView类 nicegege spring
    项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo
  • 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
    （一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait
  • Learn Nodejs 02 toknowme nodejs
    （1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb
  • Spring MVC 拦截器 xp9802 spring mvc
    Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他