event对象、样式名、Window

简介: event对象event是一个浏览器内部的对象(注意,不是网页标签对象),它代表事件发生的时候跟事件有关的相关信息的集合体(对象就是信息的集合体)——它只在事件发生的时候存在!event通常就只用于获取在事件发生的时候的有关信息,比如:鼠标该时刻的坐标位置(x和y),是哪个网页对象发生了该事件,发生事件的时候是哪个鼠标按键触发的,或哪个键盘上的键。

event对象

event是一个浏览器内部的对象(注意,不是网页标签对象),它代表事件发生的时候跟事件有关的相关信息的集合体(对象就是信息的集合体)——它只在事件发生的时候存在!
event通常就只用于获取在事件发生的时候的有关信息,比如:鼠标该时刻的坐标位置(x和y),是哪个网页对象发生了该事件,发生事件的时候是哪个鼠标按键触发的,或哪个键盘上的键。以上信息由以下几个event属性来获取:

    event.clientX   ——获取事件发生的时候鼠标的x坐标位置
    event.clientY   ——获取事件发生的时候鼠标的y坐标位置
    event.target    ——获取事件发生的时候的那个标签对象(适用于FF)——类似getElementById获取的对象
  event.srcElement  ——获取事件发生的时候的那个标签对象(适用于IE)——类似getElementById获取的对象
——事件发生的时候的那个标签对象通常被称为“事件源”。
event.keyCode       ——键盘事件发生的时候的按键的键值——键盘上每个键都对应一个数字值。

this和event的使用对比:

<标签名1  on事件名=”函数名f1(this)”  >。。。。。</标签名1>
<标签名2  on事件名=”函数名f2(event)”  >。。。。。</标签名2>
<script>
    function f1 ( obj )
    {
        //在此范围内,obj代表的就是“标签名1”这个对象,类似使用getElementById获得的对象
}
function f2 ( evt )
    {
        //在此范围内,evt代表的是事件发生的时候的event对象。
        //这里使用evt,基本上也就是使用其以下属性(根据需要取用):
var v1 = evt.clientX;   //获得鼠标当时的x坐标
        var v2 = evt.clientY;   //获得鼠标当时的y坐标
        var v3 = evt.keyCode;   //获得键盘的按键值(只对键盘事件有效)
        var v4 = evt.target;        //获得事件源对象,IE是:evt.srcElement;
  }
</script>

满天星星案例知识细节:

var star = document.createElement("img"); //创建一个标签名为img的对象——其实也就是标签
通用形式:var obj = document.createElement(“标签名”); //创建指定标签的对象。
var bd = document.body; //代表body那个标签对象,这里就是相当于直接获取了网页中的body那个标签对象。

bd.appendChild( star ); //在bd这个对象中,放入star这个对象。bd这个对象应是一个“容器盒子”——就是双标签——相当于在一个标签里放另一个标签。

通用形式: obj1.appendChild( obj2 ); //这里就是将obj2这个对像放入obj1中作为其“子对象”,也就是相当于obj1这个标签中又多了另一个标签。

样式名在js中的写法

var  obj = document.getElementById(“xxxxx”); 
var v1 = obj.style.样式属性名;         //取得样式属性的值
obj.style.样式属性名= 某值;        //设置样式属性的值

则对照我们的css样式属性名:
border, color, font-size, font-weight, background-color, background, border-top, border-top-color…….

则是否就写成这样呢?

   obj.style.color= xxx

   obj.style.font-size= xxx

   obj.style.background-color= xxx

   上述后两个是错误的语法!

那么css语法中的样式属性名和js语法中的样式属性名的对应关系是:将css名中的中杠(-)删除,并且将其后紧挨着的单词首字母大写。——第二个单词开始首字母大写。

网页对象关系图( DOM/BOM):

实际上,我们整个浏览器和网页中的对象都有千丝万缕的各种关系(最主要就是“层次关系”)。。。

  • DOM:Document Object Model——文档对象模型:规定一个文档中的各个组成部分(这里也就是标签对象)相互关系的基本结构模型。
  • BOM:Browser Object Model——浏览器对象模型:规定一个浏览器中的各个组成部分(也就是那不多的几个对象)之间的相互关系的结构模型。

Window对象

window对象就是“窗口对象”,也就是任何一个打开的网页,其一定是“装载”到一个window对象中。window对象就代表该窗口。学习window对象其实无非是学习window所提供的几个方法(类似学习event对象无非是学习使用event对象的几个属性)

  • window对象的几个弹出对话框的方法:
  1. window.alert(“这里是文字信息”); //可以认为只是一个文字性提示信息。
  2. var v1 = window.prompt(“文字提示”,“默认信息”) //弹出一个供用户输入文字信息的对话框。通常用于向用户提出一个需要文字来回答的问题。其会返回一个“字符串值”
  3. var v2 = window.confirm(“一个是否性的问题”); //弹出一个向用户询问“真假”的问题,用户可以回答“真假”。通常用于向用户提出一个需要进行“是/否”性回答的问题。其会返回一个布尔值(true/false)

window对象弹出窗口的方法:

window.open();——可以弹出一个“小”窗口,该窗口里也就能够“放置”一个网页。
语法形式如下:
window.open(“要打开的网页地址url”,“自己给新窗口的名字name”,“新窗口的外观参数设定para”);
url:可以是相对地址或绝对地址。
name:自定义的名字,遵循命名规则就可以,比如n1, win1,  s1
para:此设定有若干项,每项之间用逗号分隔,每项的形式为:项名=值。举例如下:
    width=400,
    height=300,
    left=500,       //表示离屏幕的左边的距离
    top=300,        //表示离屏幕的顶部的距离
    menubar = yes;  //表示打开的窗口具有菜单栏(no就没有),也可以使用1,0
    toolbar = yes;  //表示打开的窗口具有工具栏(no就没有),也可以使用1,0
    location =  yes;    //表示打开的窗口没有地址栏(no就没有),也可以使用1,0(实际现代浏览器对此已经失效了,变成location必须显示)
    scrollbars=yes; //表示打开的窗口具有滚动条。
    …………. 查《Dhtml完全手册》
  • 综合举例:
    window.open(“ http://www.baidu.com” , “db”, “width=400, height=300, left=500,top=300, menubar=yes, toolbar=1” )

window对象的定时器方法:

  • 定时器:是指让浏览器每隔一定的时间自动去做一定的事情!
    语法形式:
    var t1 = window.setInterval(“要执行的代码s”,间隔时间t); //这叫做“创建一个定时器”,名字为:t1
  • 解释:每隔设定的时间t,都会去执行引号中的代码s。t的单位是“毫秒”。这里,要执行的代码通常都是用一个函数调用语句,真正要做的事情是到函数中去完成。

定时器一旦创建,则其会自动“让别人”允许,其本身要么“活下去”,要么“死亡”,“死亡”其实就说是别再反复“调用别人”了--即不会再执行别的代码了。对于图片切换,也就是相当于“不再切换了”。

img_e2fecea24d7a9073f467b2c6e02a09a1.png
图片.png
相关文章
|
JavaScript 对象存储
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
2142 1
|
9月前
|
前端开发 安全 开发工具
CMS系统是什么?CMS用来做什么的?
CMS是网站开发工具,包括前端模版和后端后台。支持私有化部署,包含页面管理、会员管理、标签管理等。用户无需建站基础和专业知识,即可快速建设和管理网站。大型企业网站、新闻网站等多采用CMS。
524 8
|
Java Android开发 Windows
玩转安卓之配置gradle-8.2.1
为安卓开发配置Gradle 8.2.1,包括下载和解压Gradle、配置环境变量、修改配置文件以增加国内镜像,以及在Android Studio中配置Gradle和JDK的过程。
979 0
玩转安卓之配置gradle-8.2.1
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
337 2
|
Android开发 开发者
Android、Flutter为不同的CPU架构包打包APK(v7a、v8a、x86)
Android、Flutter为不同的CPU架构包打包APK(v7a、v8a、x86)
1107 1
SVG VSCode 插件(语法提示补全、预览插件)
SVG VSCode 插件(语法提示补全、预览插件)
2060 0
|
13天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
5天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI