扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
事件模型就是事件流的传播方向,当文档中出现一些特定的交互瞬间时,就会有事件流的出现。比如:当我们点击页面上的某个元素的时候,页面中不同层次的元素会按照一定的顺序接收到这个事件。
成都创新互联-成都网站建设公司,专注网站制作、成都做网站、网站营销推广,申请域名,雅安服务器托管,网站托管、服务器租用有关企业网站制作方案、改版、费用等问题,请联系成都创新互联。
W3C中的事件模型,包括事件捕获和事件冒泡。事件捕获,是指最外层的文档对象先捕获得到事件流,接着是其子元素,一直到最具体的元素。事件冒泡,是指最具体的元素先获得事件流,接着,向父级元素流向,直至最完成的文档对象!
具体实现方法如下:
实例1:
代码如下:
html
head
script type="text/javascript"
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');},true);
document.getElementById('son').addEventListener('click',function() {alert('son');},true);
}
/script
style type="text/css"
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
/style
/head
body
div id="par"
div id="son"/div
/div
/body
/html
实例2:
代码如下:
html
head
script type="text/javascript"
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');});
document.getElementById('son').addEventListener('click',function() {alert('son');});
}
/script
style type="text/css"
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
/style
/head
body
div id="par"
div id="son"/div
/div
/body
/html
addEventListener:第三个参数为可选参数,默认情况下为false,表示冒泡模型,即先触发最小的层(id为son的div);而如果加上true参数,则说明是捕捉模型(从html--body---div),按这样的层次来触发。
实例1的html代码有两个div,小的div包含在大的div内,点击小的div时,先是会触发alert('par')事件;然后触发alert('son')整件。实例2正好相反。
如果是采用"对象.onclick"属性的方式来触发事件,采用的是冒泡模型。
IE不支持addEventListener,而是使用attachEvent。但attachEvent不支持第三个参数,它没有捕捉模型。
javascript常用的事件主要有:
(1)单击事件:onclick。用户单击鼠标按键时产生的事件,同时。nclick指定的事件处理程序或代码将被调用执行.
(2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
(3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
ipnut type="text" value="默认信息”onselect=alert(”选中T文本框中的文字”)
(4)获得焦点事件:onfocus。用户单击text或textarea以及select对象,即光标落在文本框或选择框时会产生该事件。如:
select name= "zhengjian" onfocus=alert(”成为焦点”)
(5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对,当text或textarea以及select对象不再拥有焦点而退出后台时,引发该事件。
(6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在body标记中。如:
body onload=alert(”正在加载页面,请等待一”)
(7)卸载文件事件:onunload。与载人文件事件。nload正好相反,当Web页面退出时引发的事件,并可更新。ookie的状态。如:
body onunload=confirm(”确定要离开本页?”)
(8)鼠标镇盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:
input type= "boutton" value=”按钮”onmouseover= "window. status=‘请注意下面的状态栏·;return true"
(9)鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果。
(10)一般事件。
ondbclick:鼠标双击事件。
onkeypress:当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活的对象。
onkeydown:当键盘上某个键被按下时触发的事件,要求页面内必须有激活的对象。
onkeyup:当键盘上某个键被放开时触发的事件,要求页面内必须有激活的对象。
(11)页面相关事件。
onabort:图片在下载时被用户中断时触发的事件。
onbeforeunload:当前页面的内容将要被改变时触发的事件
事件流:
事件冒泡:
主要是IE浏览器用于解决事件流的技术,就是重事件源的事件被触发
它就会想自己的父节点一层层的去触发事件。
事件捕获:
是Netscape用于解决事件流的技术,就是从父节点向子节点去触发事件。
DOM事件流:
是FireFox用于解决事件流的技术,既有事件冒泡和事件捕获
事件处理程序:
传统事件:
一个事件源只能绑定一个函数。它的兼容性比较强
如果绑定多个那么后面的函数就会将前面的函数覆盖掉
现代事件:
一个事件源可以绑定多个函数,函数是重后往前面执行的
兼容性比较差,有些浏览器不支持
鼠标事件:
onclick:鼠标单击时监听的事件
ondbclick: 鼠标双击时监听的事件
onmousedown: 鼠标按下时监听的事件
onmouseup: 鼠标弹起时监听的事件
onmousemove: 鼠标移动时监听的事件
onmouseout: 鼠标移出时监听的事件
onmouseover: 鼠标移进时监听的事件
键盘事件:
keydown:键盘按下一个键时的监听事件
keypress: 键盘按(按下并弹起)一个键时的监听事件
keyup: 键盘弹起一个键时的监听事件
HTML事件:
load:所有的东西全部被加载后触发的事件
abort:阻止安全装在
error:当页面发生错误时触发的一个事件
select:当文本框获得焦点时选中文本框中所有的数据
change:当下拉框中的数据发生改变时触发的事件
scroll:当页面中的滚动条发生滚动时 触发的事件
focus:让文本框获得焦点
blur: 让文本框失去焦点
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司的Brendan Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。JavaScript是Sun公司的注册商标。[1] Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。
简单来说 就是java脚本
javascrip
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
组成部分
ECMAScript,描述了该语 javascript组成 ,言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
基本特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言(代码不进行预编译)。
主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。
日常用途
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies,包括创建和修改等。
7.基于Node.js技术进行服务器端编程。
历史
它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。
Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。
现在很多小伙伴喜欢在互联网上找视频资料学习javascript,但是光看视频你是不可能学会javascript的,没有人指导你,而且很多视频已经过时了 并没有什么用! 如果你真的想学习javascript这门技术,你可以来这个群,前面是5柒3,中间是82〇,最后是49〇, 在这里有最新的javascript课程 免费学习 也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 不是愿意学习或者自认不需要学习的就不要加了。
发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。
特性
JavaScript脚本语言具有以下特点:
(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。[3]
不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。
而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流