Javascript学习笔记8 事件

事件流:从页面中接受事件的顺序

事件冒泡(IE):事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较不具体的文档节点(文档)

事件捕获:恰恰与事件冒泡相反,不太具体的节点应该更早接受到事件,而最具体的节点应该最后接受到事件(较少人使用)。

DOM2事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序:响应某个事件的函数,以on开头,例如onclick,事件处理程序中的代码在执行过程中,有权访问全局作用域中的任何代码。this对象指向事件的目标元素

<input type="button" value="click me" onclick="alert(this.value)">

DOM 0级事件处理程序

将一个函数赋给一个事件处理程序属性

var btn = document.getElementById("mybtn");
btn.onclick =function(){
    alert("click");
};
btn.onclick = null;    //删除事件

DOM 2级事件处理程序

addEventListener()removeEventListener()(IE9+,及其他浏览器)
接受3个参数:要处理的事件名、作为事件处理程序的函数、一个布尔值(true表示在事件捕获阶段调用事件处理程序,而false代表在事件冒泡阶段调用事件处理程序)

btn.addEventListener("click",function(){alert("hello");},false);
  • 通过addEventListener()添加的事件只能通过removeEventListener()移除,且必须传入相同的参数,这意味着添加的匿名函数将无法移除

事件对象 Event

在触发DOM上的某个事件时,会产生一个事件对象Event,其包含了所有与事件相关的信息。

var btn = document.getElementById("mybtn");
btn.onclick =function(event){
    alert(evnet.type);   //click
};

event对象的一些属性和方法:

  • target:事件的目标
  • type:事件的类型
  • preventDefault():取消事件的默认行为
  • stopPropagation():取消事件的进一步捕获和冒泡

事件类型

UI事件

  • load事件
    当页面(也可以是图像、script元素、css文件)加载后,就会触发对应对象或元素(window / img / script / link)的load事件
  • unload事件
    文档在完全卸载后触发(此时对象可能已不存在)

  • resize事件
    浏览器窗口大小发生变化时,在window上触发

  • scroll事件
    在窗口页面滚动时触发在window对象


焦点事件

  • blur事件
    在元素失去焦点时触发

  • focus
    在元素获得焦点时触发


鼠标事件

  • click事件
    单击鼠标按钮或回车键
  • dbclick事件
    双击鼠标
  • mousedown事件
    按下任意鼠标按钮,不能通过键盘触发
  • mousemove事件
    当鼠标指针在元素内部移动时重复地触发
  • mouseout事件
    鼠标指针从一个元素移入另一个元素时触发
  • mouseover事件
    鼠标指针首次移入一个元素边界之内时触发
  • mouseup事件
    用户释放鼠标按钮时触发,不能通过键盘触发
  • mousewheel事件
    鼠标滚轮事件

坐标位置
鼠标的坐标位置保存在事件对象的属性中

  • clientX 和 clientY:视口的水平坐标和垂直坐标
  • pageX 和 pageY:相对于页面的水平坐标和垂直坐标,在没有滚动条的情况下,与clientX和clientY相等
  • screenX 和 screenY:相对于屏幕的水平坐标和垂直坐标

修改键
同样保存在事件对象的属性中,当相应的键被按下时为true,否则为false

  • shiftKey:对应shift
  • ctrlKey:对应Ctrl
  • altKey:对应Alt
  • metaKey:对应windows键等

鼠标按钮
针对mousedownmouseup事件,确定是鼠标哪个键被按下和释放,值保存在event.button属性中

  • 0:左键
  • 1:中间键(滚轮)
  • 2:右键

鼠标滚轮
只针对mousewheel事件,保存在event.wheelDelta属性中,向前滚动是正数,向后滚动时负数


键盘和文本事件

  • keydown事件
    按下任意键触发,按住不放,则重复触发
  • keypress事件
    按下字符键时触发,按住不放,则重复触发
  • keyup事件
    释放按键时触发
  • textinput事件
    用户在可编辑区域中输入字符时,触发此事件

事件的发生顺序:keydownkeypresskeyup

在发生keydown和keyup事件时,event.keyCode属性会包含一个键码,对应某个按键

在发生keypress事件时,event.charCode属性会包含按下键的ASCII值

在发生textinput事件时,event.data属性会包含用户输入的字符值


变动事件
当DOM中的某一部分发生变化时,触发的事件

  • DOMSubtreeModified事件
    当某节点的DOM子树结构发生任何变化时都会触发,这个事件在其他任何事件触发后都会触发
  • DOMNodeRemoved事件
    在节点从其父节点中被移除时触发(removeChild()replaceChild()),event.target属性指向被删除的节点
  • DOMNodeInserted事件
    在一个节点作为子节点被插入到另一个节点时触发(appendChild(),replaceChild(),insertBefore()),event.target属性指向插入的节点

HTML5事件

  • contextmenu事件
    实现单击右键,出现上下文菜单
div.addEventListener("contextmenu",function(event){
    event.preventDefault();  //阻止默认的上下文菜单
    var menu = document.getElementById("myMenu");  //选取自定义的菜单,比如一个<ul>元素
    menu.style.visibility = "visible";  //使原本隐藏的菜单显现    
});

window.addEventListener("click",function(event){
    document.getElementById("myMenu").style.visibility = "hidden"; //单击其他地方将隐藏菜单
},false);
  • beforeunload事件
    在页面被卸载之前触发,询问用户是否卸载。必须将event.returnValue设置为要显示给用户的字符串,并作为函数值返回。
window.addEventListener("beforeunload",function(event){
    var message = "DO YOU GO?";
    event.returnValue = message;
    return message;
},false);
  • DOMContentLoaded事件
    在形成完整的DOM树之后即触发,不必等待CSS、JS等文件的加载完成,触发在load事件之前。

  • pageshow 和 pagehide事件
    在页面显示时触发,无论该页面是否来自bfcache(前进、后退按钮),这两个事件只能被添加到window对象上

  • haschange事件
    当页面的URL参数列表发生变化时,就会触发。这个事件必须被添加到window对象上

内存和性能

事件委托
利用事件冒泡,只需指定一个事件处理程序,就可以管理某一类型的所有事件。节约了内存

<ul id="mylist">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
</ul>

var list = document.getElementById("mylist");   //获取列表

list.addEventListener("click",function(event){  //将事件添加到列表中
    switch(evnet.target.id){   //根据列表项的id来判断
        case "1":
        //do something
        break;
        case "2":
        //do something
        break;
        case "3":
        //do something
        break;
    }
},false);

移除事件处理程序
当移除DOM某元素时,不要忘记将其绑定的事件处理程序移除

someElement.onclick = null;

模拟事件

模拟用户操作触发事件,步骤:创建event对象初始化event对象触发事件

创建event对象

var event = document.createEvent(事件类型)

//事件类型包括:UIEvents、MouseEvents、MutationEvents(变动事件)、HTMLEvents、KeyEvents等

初始化event对象
每个不同类型的事件对象,都具有一个初始化方法,指定触发的事件具体类型,该如何触发事件,是否冒泡等

//鼠标事件对象的初始化
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);

触发事件

var btn = document.getElementById("mybtn");
btn.dispatchEvent(event);   //触发事件
内容概要:本文档详细介绍了在三台CentOS 7服务器(IP地址分别为192.168.0.157、192.168.0.158和192.168.0.159)上安装和配置Hadoop、Flink及其他大数据组件(如Hive、MySQL、Sqoop、Kafka、Zookeeper、HBase、Spark、Scala)的具体步骤。首先,文档说明了环境准备,包括配置主机名映射、SSH免密登录、JDK安装等。接着,详细描述了Hadoop集群的安装配置,包括SSH免密登录、JDK配置、Hadoop环境变量设置、HDFS和YARN配置文件修改、集群启动与测试。随后,依次介绍了MySQL、Hive、Sqoop、Kafka、Zookeeper、HBase、Spark、Scala和Flink的安装配置过程,包括解压、环境变量配置、配置文件修改、服务启动等关键步骤。最后,文档提供了每个组件的基本测试方法,确保安装成功。 适合人群:具备一定Linux基础和大数据组件基础知识的运维人员、大数据开发工程师以及系统管理员。 使用场景及目标:①为大数据平台建提供详细的安装指南,确保各组件能够顺利安装和配置;②帮助技术人员快速掌握Hadoop、Flink等大数据组件的安装与配置,提升工作效率;③适用于企业级大数据平台的建与维护,确保集群稳定运行。 其他说明:本文档不仅提供了详细的安装步骤,还涵盖了常见的配置项解释和故障排查建议。建议读者在安装过程中仔细阅读每一步骤,并根据实际情况调整配置参数。此外,文档中的命令和配置文件路径均为示例,实际操作时需根据具体环境进行适当修改。
在无线通信领域,天线阵列设计对于信号传播方向和覆盖范围的优化至关重要。本题要求设计一个广播电台的天线布局,形成特定的水平面波瓣图,即在东北方向实现最大辐射强度,在正东到正北的90°范围内辐射衰减最小且无零点;而在其余270°范围内允许出现零点,且正西和西南方向必须为零。为此,设计了一个由4个铅垂铁塔组成的阵列,各铁塔上的电流幅度相等,相位关系可自由调整,几何布置和间距不受限制。设计过程如下: 第一步:构建初级波瓣图 选取南北方向上的两个点源,间距为0.2λ(λ为电磁波波长),形成一个端射阵。通过调整相位差,使正南方向的辐射为零,计算得到初始相位差δ=252°。为了满足西南方向零辐射的要求,整体相位再偏移45°,得到初级波瓣图的表达式为E1=cos(36°cos(φ+45°)+126°)。 第二步:构建次级波瓣图 再选取一个点源位于正北方向,另一个点源位于西南方向,间距为0.4λ。调整相位差使西南方向的辐射为零,计算得到相位差δ=280°。同样整体偏移45°,得到次级波瓣图的表达式为E2=cos(72°cos(φ+45°)+140°)。 最终组合: 将初级波瓣图E1和次级波瓣图E2相乘,得到总阵的波瓣图E=E1×E2=cos(36°cos(φ+45°)+126°)×cos(72°cos(φ+45°)+140°)。通过编程实现计算并绘制波瓣图,可以看到三个阶段的波瓣图分别对应初级波瓣、次级波瓣和总波瓣,最终得到满足广播电台需求的总波瓣图。实验代码使用MATLAB编写,利用polar函数在极坐标下绘制波瓣图,并通过subplot分块显示不同阶段的波瓣图。这种设计方法体现了天线阵列设计的基本原理,即通过调整天线间的相对位置和相位关系,控制电磁波的辐射方向和强度,以满足特定的覆盖需求。这种设计在雷达、卫星通信和移动通信基站等无线通信系统中得到了广泛应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值