JS (应用2)

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,基本上也就是使用其以下属性(根据需要取用):                 

varv1 = evt.clientX; //获得鼠标当时的x坐标                 

varv2 = evt.clientY; //获得鼠标当时的y坐标               

varv3 = evt.keyCode;  //获得键盘的按键值(只对键盘事件有效)               

varv4 = evt.target;            //获得事件源对象,IE是:evt.srcElement;}     

</script>

满天星星案例知识细节:

图片发自简书App



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):

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

图片发自简书App


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” )

《DHTML完全手册》介绍。

DHTML就是“动态html”(Dynamic HTML)

window对象的定时器方法:

定时器:是指让浏览器每隔一定的时间自动去做一定的事情!

语法形式:

var t1 = window.setInterval(“要执行的代码s”,间隔时间t);    //这叫做“创建一个定时器”,名字为:t1

解释:每隔设定的时间t,都会去执行引号中的代码s。t的单位是“毫秒”。这里,要执行的代码通常都是用一个函数调用语句,真正要做的事情是到函数中去完成。

定时器一旦创建,则其会自动“让别人”允许,其本身要么“活下去”,要么“死亡”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 字符串中的特殊字符: 在js中,双引号字符串中的双引号内容和单引号字符串中的单引号内容都必须进行转移,形式如下: ...
    定格r阅读 251评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 字符串中的特殊字符: 在js中,双引号字符串中的双引号内容和单引号字符串中的单引号内容都必须进行转移,形式如下:v...
    全满阅读 401评论 0 0
  • 每一个 Vuex 应用的核心就是 store(仓库)。"store" 基本上就是一个容器,它包含着你的应用中大部分...
    吴涛涛阅读 389评论 0 1
  • 期望越高失望越大 有效设置自己的期望值
    乔迟语阅读 348评论 0 1