huoren_no1
huoren_no1

【前端】Event 事件那些事儿

前端 - Event 那些事儿

    • 一、事件
      • 1. 介绍
      • 2. DOM 0级事件与DOM 2级事件
    • 二、DOM 事件流
      • 1.DOM事件流三个阶段
      • 2. DOM事件流
      • 3.addEventListener
    • 三、事件对象
      • 1. 常见属性
      • 2. 获取对象
    • 四、事件委托（代理）
      • 1. 示例
      • 2. 效果图
      • 3.总结 (优点)
    • 【参考资料】

一、事件

1. 介绍

  • 事件是用来实现js和html之间交互的
  • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

2. DOM 0级事件与DOM 2级事件

  • 区别

a. DOM 0级事件有两种方式：一是在标签中定义，二是在js 中定义，前面的事件会被后面的事件覆盖(js 事件会覆盖标签中的事件)
b. DOM 2级事件在脚本中使用 addEventListener( )给指定元素添加事件

  • 0级事件 示例

<input id="btn" 
	type="button"
	οnclick="console.log('You clicked the button!');"
	value="Click"
/>


<script>
document.getElementById('btn').onclick = function(){
	console.log('Ｉ am processed by dom0!');
};
script>
  • 2级事件 示例
document.getElementById('btn').addEventListener('click', function() {
	console.log('I am processed by dom2!');
});       
document.getElementById('btn').addEventListener('click', function() {
	console.log('I am processed by dom2 again!!');
});
// 点击按钮后两个事件均会触发
  • 完整代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
<button id="btn" onclick="console.log('You clicked the button!');">点我button>
body>
<script>
/* 
document.getElementById('btn').onclick = function(){
    console.log('Ｉ am processed by dom0!');
};
*/
document.getElementById('btn').addEventListener('click', function() {
    console.log('I am processed by dom2!');
});
document.getElementById('btn').addEventListener('click', function() {
    console.log('I am processed by dom2 again!!');
});
script>
html>

二、DOM 事件流

1.DOM事件流三个阶段

事件捕获阶段，处于目标阶段与事件冒泡阶段

  • 事件捕获

从最顶层对象（window）一层一层向下到达目标对象的过程

  • 事件捕获

从具体对象（target）一层一层向上传播到达目标对象的过程

顶层对象：不同浏览器不同，部分浏览器为 document

【前端】Event 事件那些事儿_第1张图片

2. DOM事件流

  • DOM事件流同时支持两种事件模型：捕获型事件和冒泡型事件
  • 捕获型事件在捕获阶段触发，冒泡型事件在冒泡阶段触发，因此捕获型事件先发生
  • 两种事件流会触及DOM中的所有对象，从window（document）对象开始，也在window（document）对象结束

3.addEventListener

addEventListener(type, listener[, useCapture])函数

  • type：指定事件类型，如 click/mousedown/keypress 等
  • listener：监听函数，事件发生时触发
  • useCapture：指定事件是冒泡还是捕获型，布尔值，可选，默认设置 false （既冒泡阶段触发）

三、事件对象

对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

1. 常见属性

  • 鼠标/键盘属性
    • button 触发事件时的鼠标按键（0-左 1-中 2-右）
    • altKey/shiftKey/ctrlKey 对应按键是否按下
    • clientX/Y 相对浏览器的坐标（不含滚动条）
    • pageX/Y 相对浏览器的坐标（含滚动条）
    • screenX/Y 相对屏幕的坐标
  • IE属性（IE浏览器支持）
    • x/y 同screenX/Y
    • offsetX/Y 相对事件源元素的坐标
    • srcElement 同 target
  • 标准属性
    • type 事件的名称
    • bubbles 布尔值，是否为冒泡事件类型。
    • currentTarget 返回其事件监听器触发该事件的元素
    • target 返回触发此事件的元素（事件的目标节点）
      二者区别：前者为事件绑定的元素，后者为触发事件的元素
  • 标准方法（可用于自定义事件）
    • initEvent() 初始化新创建的 Event 对象的属性。
    • preventDefault() 通知浏览器不要执行与事件关联的默认动作（如链接跳转、表单提交等）
    • stopPropagation() 不再派发事件（阻止冒泡与捕获）

2. 获取对象

<button onclick="console.log(event);;">点我button>
  • 点击按钮，会在控制台打印出事件对象不同浏览器略有差异
    【前端】Event 事件那些事儿_第2张图片

四、事件委托（代理）

当监听事件较多时，若给每一个元素都绑定监听函数，对性能会有极大的影响。该问题解决方案为事件委托

事件委托利用了事件冒泡与event.target。只需把监听函数绑定在父容器上即可，便可为子容器绑定事件

1. 示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<style type="text/css">
    * {
        margin: 5px;
        padding: 5px;
    }
style>
<body>
    <div id="outer" style="border: 1px green solid">
        <div id="inner1" style="border: 1px red solid">This is inner1div>
        <div id="inner2" style="border: 1px red solid">This is inner2div>
        <div id="inner3" style="border: 1px red solid">This is inner3div>
    div>
body>
<script>
    let outer = document.getElementById('outer');
    outer.addEventListener('click', function(event) {
        console.log(event.target); //触发事件的元素(结点)
        console.log(event.currentTarget); //事件绑定的元素(结点)
        // console.log(event.srcElement); //同event.target
    }, false);

    // 可以针对不同元素绑定不同事件
    outer.addEventListener('click', function(event) {
        let target = event.target;
        switch (target.id) {
            case 'inner1':
                alert(1);
                break;
            case 'inner2':
                alert(2);
                break;
            default:
                alert(target.innerText);
                break;
        }

    }, false);

    // 新增元素会自动绑定事件
    let newDiv = document.createElement('div');//创建元素
    newDiv.setAttribute('id', 'newDiv');//设置属性
    // newDiv.setAttribute('style', 'border: 2px blue solid');//设置属性
    // newDiv.style = 'border: 2px blue solid'; // 设置样式(效果同上)
    newDiv.style.border = '2px blue solid'; // 设置样式(效果同上)
    newDiv.innerHTML = 'This is newDiv created in JavaScript';//设置文本
    outer.appendChild(newDiv); //插入子结点
script>
html>

2. 效果图

【前端】Event 事件那些事儿_第3张图片

3.总结 (优点)

  • 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少
  • 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件

【参考资料】

  • HTML DOM Event 对象
  • js事件委托总结
  • 事件对象坐标区别
  • 彻底弄懂JS事件委托的概念和作用

你可能感兴趣的:(【前端】Event 事件那些事儿)

  • 程序员转行做什么好：数据分析师、AI大模型工程师、产品经理和云计算工程师？ 雪碧没气阿 人工智能产品经理云计算大模型训练LLMAI大模型程序员
    程序员转行做什么好先给结论再说理由：数据分析师、AI大模型工程师、产品经理和云计算工程师。这些领域不仅因应了当前技术发展的趋势，也为程序员提供了转型的广阔舞台和职业发展的新机遇。一起来看看吧！数据分析师：数据驱动决策的关键程序员转行时，应考虑当前市场上的热门行业和岗位需求。例如，AI大模型工程师、数据分析师、前端开发工程师、全栈开发工程师等都是当前市场上需求量较大的职位。就拿数据分析师来说，因其在
  • 微信小程序使用上拉加载onReachBottom。页面拖不动。一直无法触发上拉的事件。 肖肖肖丽珠 微信小程序小程序
    1，可能是原因是你使用了scroll-view的标签，用onReachBottom触发加载事件。这两个是有冲突的。没办法一起使用。如果页面的样式是滚动的是无法去触发页面的onReachBottom的函数的。因此，你使用overflow:auto.来使用页面的某些元素滚动，照样也无法触发onReachBottom。2，滚动区域有部分内容被遮挡怎么解决起初我以为我给滚动区域设置一个高度。height:
  • react数据异步更新 wlt_5079 react.jsjavascript
    1.react数据异步更新定义一个类组件模板：classMyComextendsReact.Component{}设置state状态数据：state={name:"张三"}render()渲染函数：render(){return{this.state.name}}过程：this打点调用自定义函数change绑定click事件，返回一个button按钮，通过this.state打点调用自定义属性na
  • WPF MVVM 模式如何监听IsVisibleChanged 事件 踏上青云路 wpf
    原本以为这是一个很简单的问题，但是我却走了不少的弯路。记录下来自省。我使用的是库System.Windows.Interactivity.dll，首先在xaml中使用了EventTrrigger但是发现是无效的。经过改变IvokeCommandAction的参数，等方式，发现都无法触发。最后决定使用behavior来进行接下来的写法如下1、首先定义一个Behavior,（注意：这里我也遇到了一个问
  • WPF4-代码后置 苏克贝塔 wpfwpf
    1.什么是代码后置2.为什么WPF需要代码后置？2.1.分离关注点（SeparationofConcerns）2.2.事件驱动编程2.3.数据绑定和动态内容2.4.与UI控件的交互2.5.可重用性和模块化2.6.易于调试和单元测试3.WPF中代码后置的实现原理4.代码后置的组成5.代码后置与MVVM模式6.总结1.什么是代码后置在WPF（WindowsPresentationFoundation）
  • K8s架构与组件 稚辉君.MCA_P8_Java kubernetes容器云原生网络
    一、K8s架构在Master通常上包括kube-apiserver、etcd存储、kube-controller-manager、cloud-controller-manager、kube-scheduler和用于K8s服务的DNS服务器（插件）。这些对集群做出全局决策(比如调度)，以及检测和响应集群事件的组件集合也称为控制平面。其实K8s官方并没有Master这一说，只是大多数安装工具（kube
  • 【Web前端】JWT（JSON Web Tokens）概述 泡芙冰淇淋ya Web前端json
    1、简介JWT（JSONWebTokens）是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。它基于JSON对象，并通过数字签名确保其完整性和真实性。JWT因其小巧、自包含以及易于在客户端和服务器之间传输的特性而被广泛使用于身份验证和信息交换的场景中。2、组成部分JWT由三个部分组成，这三部分通过点（.）分隔：Header（头部）：头部通常包含了两部分信息：例如：typ：表示令牌的类型
  • 计算机组成原理(计算机系统3)--实验八：处理器结构拓展实验 起床悠悠 计算机系统java数据库前端嵌入式硬件
    一、实验目标：了解MIPS的五级流水线，和在运行过程中的所产生的各种不同的流水线冒险；通过指令顺序调整，或旁路与预测技术来提高流水线效率；更加了解流水线细节和其指令的改善方法；更加深入了解动态分支预测和BTB更加熟悉MIPS指令的使用。二、实验内容处理器结构实验一的扩展：用perf记录x86中的数据相关于指令序列调整前后的事件统计（stall、CPUcycles等）处理器结构实验二的扩展：在x86
  • Blazor-ApexCharts 开源项目指南 凌桃莺Talia
    Blazor-ApexCharts开源项目指南项目地址:https://gitcode.com/gh_mirrors/bl/Blazor-ApexCharts一、项目介绍Blazor-ApexCharts是一个用于Blazor框架的图表组件库封装，它基于流行的前端图表库ApexCharts.js实现。这个项目旨在简化在Blazor应用中添加交互式图表的过程，无需直接处理复杂的JavaScript互
  • 小白WEB前端学习（七） Sun ᥫᩣ涵 WEB前端前端学习
    续：小白WEB前端学习（六）继续学习CSS（五）8.响应式布局：响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式1.响应式布局介绍：优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长手机:76899212482.media媒体查询HTML标签字号手机屏幕大小不同，分辨率不同如何设置不同的htm
  • 赶紧收藏！2024 年最常见 20道分布式、微服务面试题（八） 学长爱编程 分布式微服务程序员面试分布式微服务架构面试后端跳槽中间件
    上一篇地址：赶紧收藏！2024年最常见20道分布式、微服务面试题（七）-CSDN博客十五、什么是负载均衡，它在微服务架构中如何工作？负载均衡是一种在计算机网络中分配工作负载（如网络流量、请求处理等）到多个计算资源（如服务器、数据库、存储设备等）的策略。其主要目的是优化资源的利用、提高吞吐量、增强系统可用性和容错性，以及避免任何单一资源的过载。负载均衡的关键概念：前端（Client-Side）负载均
  • Python Twisted weixin_33946605 网络运维python
    Twsited异步网络框架Twisted是一个事件驱动的网络框架，其中包含了诸多功能，例如：网络协议、线程、数据库管理、网络操作、电子邮件等。事件驱动简而言之，事件驱动分为二个部分：第一，注册事件；第二，触发事件。例：程序一#!/usr/bin/envpython#-*-coding:utf-8-*-#event_drive.pyevent_list=[]defrun():  foreventin
  • 【趣学SQL】第二章：高级查询技巧 2.2 子查询的高级用法——SQL世界的“俄罗斯套娃“艺术 精通代码大仙 数据库sql数据库
    第二章：高级查询技巧2.2子查询的高级用法——SQL世界的"俄罗斯套娃"艺术如果说JOIN是数据库的"社交达人"，那么子查询就是"逻辑鬼才"——它能像俄罗斯套娃一样，在查询中嵌套查询，甚至让AI都怀疑人生！今天我们将通过一个虚拟的「餐厅订单暴走事件」，揭秘子查询的七重幻境。2.2.1标量子查询——单身狗顾客的倔强--找出比平均消费高的顾客（子查询返回单个值）SELECTcustomer_name,
  • Flutter项目和鸿蒙平台的通信 GY-93 HarmonyOSFlutterflutterharmonyos
    Flutter项目和鸿蒙平台的通信前言Flutter和Harmonyos通信MethodChannelBasicMessageChannelEventChannel前言大家在使用Flutter开发项目的时候，Flutter提供了PlatfromChannelAPI来和个个平台进行交互。Flutter官方目前提供了一下三种方式来和个个平台交互：BasicMessageChannel：用于传递字符串和
  • js高阶-响应式原理 silver687 javascript
    在JavaScript中，响应式原理通常是指一种编程模式，它允许开发者创建能够自动响应数据变化的系统或应用。这种模式在现代前端框架（如Vue.js、React等）中非常常见，尤其是在数据绑定和UI更新方面。以下是响应式原理的核心概念和实现方式的详细解释：----1.响应式原理的核心概念响应式编程的核心是数据驱动和自动更新。当数据发生变化时，相关的UI或逻辑会自动更新，而无需手动触发更新操作。这种模
  • 2025年前端发展趋势 贵州数擎科技有限公司 前端javascript
    开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：github晓智元宇宙、数字孪生引擎、前端面试题大家好！我是[晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
  • Flutter使用Ohos原生组件的方法 六号嘉宾 OpenHarmony鸿蒙开发移动开发flutterharmonyos移动开发鸿蒙开发ArkUI跨端开发组件化
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……Flutter中有些功能使用原生组件包装会更简
  • 2024大厂高级前端面试题汇总！ 前端小羽——互联网大厂 前端react.js前端框架
    以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！阿里使用过的koa2中间件koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍pm2master挂了的话pm2怎
  • 2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案) 2401_89693619 前端面试职场和发展
    3.阐述清楚浮动的几种方式（常见问题）1.父级div定义height原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题2.父级div定义overflow:hidden原理：必须定义width或zoom:1，同时不能定义height，使用overflow:
  • 2024Web前端人事面试题总结精选_前端面试项目相关提问 2401_86638424 面试职场和发展
    api然后我们前端直接调用，当然如果后台还没写好就先自己造假数据来完成。平常都是用webpack来构建项目等等。2、你觉得你个性上最大的优点是什么？回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。3、说你最大的缺点？回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱忌妒人、非常懒、脾气大、工作效率
  • 2025年前端面试题汇总 涔溪 前端
    JavaScript核心异步编程Promise、async/await的工作原理及应用场景。如何处理并发请求，使用Promise.all()或Promise.race()等方法。解释事件循环机制，理解微任务（microtask）与宏任务（macrotask）的区别。原型链深入理解JavaScript中的原型继承模型。举例说明如何通过修改原型对象影响所有实例。闭包定义闭包及其作用，如实现私有变量和函
  • 游戏策划的分类 yaoyaoyao可爱呀 游戏策划
    P3游戏策划分类1.程序2.美术3.策划程序：一般分为客户端程序和服务器程序客户端程序一般负责游戏的前端画面表现服务器程序负责游戏的后端运算美术：角色原画，角色模型动作，场景原画，场景模型，UI设计，特效设计程序，美术，运营项目经理：给各个岗位同事安排工作计划，推进项目进度策划：主策划（4—5年）对游戏的设计进行统筹的规划和管理对工作进行分配和验收系统策划：游戏玩法和系统设计数值策划：游戏玩家的血
  • AUTOSAR——AUTOSAR RTE 桐叶岩 实时互动网络c语言架构信息与通信物联网
    AUTOSARRTEAUTOSARRTE（RuntimeEnvironment）是AUTOSAR标准中的一个重要组成部分，它提供了一个中间层，用于管理应用软件（ApplicationSoftware）和基础软件（BasicSoftware）之间的通信和调度。AUTOSARRTE负责处理不同软件组件之间的事件触发、消息传递、任务调度等，以及提供标准化的API接口供应用软件调用。主要功能事件触发与任务
  • 云原生架构下的AI智能编排：ScriptEcho赋能前端开发 前端
    在当今快速发展的数字经济时代，云原生架构已成为构建现代化应用的关键。它通过微服务、容器化和DevOps等技术，实现了应用的高可用性、可扩展性和弹性。然而，在云原生架构下，前端开发也面临着新的挑战。为了应对这些挑战，AI写代码工具（例如ScriptEcho）应运而生，通过AI智能编排，显著提升了前端开发效率。本文将深入探讨AI智能编排在云原生架构中的作用，并以ScriptEcho为例，阐述其如何加速
  • 警惕！Vant和Rspack开源项目遭遇恶意代码攻击，你的项目安全吗？ 前端
    近期，备受开发者青睐的开源项目Vant和Rspack遭遇恶意代码攻击，引发了业界广泛关注。这起事件再次敲响了警钟，提醒我们重视开源项目的安全风险。本文将深入探讨此次事件的起因、过程、影响以及应对措施，并就开源项目安全生态的未来发展进行思考。选择合适的AI代码生成器可以帮助开发者更高效地编写代码，同时也能在一定程度上降低安全风险。事件回顾：npmtoken被盗，恶意代码潜伏开源项目12月19日，有赞
  • java ssm基于微信小程序的小说图书阅读系统网上书城论坛交流（源码+文档+运行视频+讲解视频） QQ2279239102 SSM微信小程序java微信小程序开发语言SSMvue.js
    文章目录系列文章目录目的前言一、详细视频演示二、项目部分实现截图三、技术栈后端框架SSM前端框架vueSSM框架详细介绍系统测试微信小程序介绍四、代码参考源码获取目的摘要：基于JavaSsm与微信小程序的小说图书阅读系统，为书虫打造沉浸式阅读天地，兼设论坛交流，丰富阅读体验，促进文学交流。网上书城汇聚海量小说、图书，分类精细，搜索便捷，用户通过微信小程序阅读，支持字体、背景调节，书签、笔记功能方便
  • Java前端基础—HTML 缺少动力的火车 前端基础集合前端javahtml
    Java前端基础—HTML目录Java前端基础—HTML1.简介2.基础语法2.1HTML页面固定结构2.2标题标签2.3段落标签2.4换行标签2.5水平线标签2.6文本标签2.7图片标签2.8音频标签2.9视频标签2.10链接标签2.11列表标签2.12表格标签2.13表单标签2.14语义标签1.简介1.网页组成：文字，图片，音频，视频，超链接。2.代码如何转换成网页：依靠的是浏览器的渲染和解析
  • elementui树状菜单tree_element-ui 树组件（tree）展开合并菜单节点完整功能 weixin_39611863
    element-UI的树组件十分强大，但是我这边有一个需求，点击节点本身和左边小三角按钮时都需要记录菜单树的展开节点。点击左边小三角不能触发node-click事件(如果有朋友知道怎么做，麻烦告知一下，下面的代码就不需要看了/捂脸)为了使点击小三角也能追踪记录到节点的开合状态，所以启用了node-expand和node-collapse两个事件这时我遇到一个让我想原地去世的BUG，就是节点的展开闭
  • Flink的流处理和批处理 Ray.1998 大数据flink大数据数据挖掘数据分析
    1.流处理（StreamProcessing）流处理是Flink的核心功能之一，主要用于处理无限流数据，也就是不断到达的数据。它能够实时处理数据流，并对每个数据元素执行操作。流处理中的数据没有预定的边界，它的特征是持续到达，因此，流处理必须实时处理每个事件，而不能等到所有数据都到齐后再进行处理。核心特点：实时性：流处理的最大优势是实时性。Flink允许对实时数据流进行分析，计算和处理，几乎是对数据
  • 一个可以根据题目得分显示不同题目的答题demo qq_41759752 javascripthtml5vue.js前端
    前段时间有幸参与到一个全国性的某心理健康测评平台的开发工作，其答题部分的前端开发工作由我完成，现将该平台前端的主要交互逻辑重新实现做成demo，有需要的小伙伴或客户可以联系我获取了，有类似开发需求的老板和可以联系我哟。其中主要实现的交互有：1、在excel录入题目信息，后台写脚本将excel数据转化为前端页面需要的试题数据，前端通过接口拿到所有的试题数据。（后台操作，demo中数据写成了静态数据）
  • apache 安装linux windows 墙头上一根草 apacheinuxwindows
    linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1，安装 apr        下载地址：htt
  • fill_parent、wrap_content和match_parent的区别 Cb123456 match_parentfill_parent
    fill_parent、wrap_content和match_parent的区别:   1）fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte
  • 网页自适应设计 天子之骄 htmlcss响应式设计页面自适应
    网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
  • [sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
    --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
  • ImageIO写图片输出到硬盘 3213213333332132 javaimage
    package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
  • 自己的String动态数组 宝剑锋梅花香 java动态数组数组
    数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
  • pinyin4j工具类 darkranger .net
    pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小 引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。 本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
  • StarUML学习笔记----基本概念 aijuans UML建模
    介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图（Model, View and Diagram）        &
  • Activiti最终总结 avords Activiti id 工作流
    1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId
  • 从省市区多重级联想到的，react和jquery的差别 bee1314 jqueryUIreact
    在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
  • Eclipse快捷键大全 bijian1013 javaeclipse快捷键
    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
  • js 笔记 函数 征客丶 JavaScript
    一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用 函数变量的调用：      vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
  • 【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
    1. Some操作   在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明：   /** Class `Some[A]` represents existin
  • java 匿名内部类 BlueSkator java匿名内部类
    组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系 继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
  • 盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用 ljy325 游戏applewindowsXPOS
    Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs
  • 读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
  • JIRA与SVN插件安装 chenyu19891124 SVNjira
    JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
  • 常用数学思想方法 comsci 工作
      对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考   函数思想 　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
  • pl/sql集合类型 daizj oracle集合typepl/sql
    --集合类型 /*   单行单列的数据，使用标量变量   单行多列数据，使用记录   单列多行数据，使用集合（。。。）   *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /*     --集合方法 &n
  • [Ofbiz]ofbiz初用 dinguangx 电商ofbiz
    从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
  • 结构体中最后一个元素是长度为0的数组 dcj3sjt126com cgcc
    在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
  • Linux cp 实现强行覆盖 dcj3sjt126com linux
    发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。 方法一 我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
  • Memcached(一)、HelloWorld frank1234 memcached
    一、简介 高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。 二、客户端 选择一个memcached客户端，我这里用的是memc
  • Search in Rotated Sorted Array II hcx2013 search
    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
  • Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4generic type
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装JDK liuxingguome centos
    1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
  • 二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
    1,设二维数组p的每行每列都按照下标递增的顺序递增。 用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题： 给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (
  • java 随机数 Math与Random SaraWon javaMathRandom
    今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun
  • oracle创建表空间 tugn oracle
    create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m
  • 使用Java8实现自己的个性化搜索引擎 yangshangchuan javasuperword搜索引擎java8全文检索
    需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他