第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数. <input type="button" value="单击" onclick="test()"/> function test() { alert(0); } 这种写法有2个缺点: 1.存在时差问题.用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误. 2.HTML和javascript…

我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容. 首先,要明白Javascript 事件处理程序一共有三种: 1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 1.HTML事件处理程序 <button id="btn2" onclick="show()">btn2</button> 根据它的名字就…

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript事件处理程序的3种方式: 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可…

JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 function showMessage(){ alert("clicked!"); }; </script> <button id="btn" onclick="showMessage()">click me!</bu…

下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监听器) 接下来,将会对各种方式进行简单说明. 一.指定为HTML元素的属性 将事件处理程序指定为HTML元素的属性是一种最为简单的设定事件处理程序的方式. <a id="test" href="https://www.baidu.com" onclick=&quo…

探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数.  我们又把事件处理程序称为事件侦听器.  事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在Ja…

事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover ,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以“on”开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload.为事件指定处理程序的方式有好几种. 一.DOM0 级事件处理程序 1.指定事件处理程序:以“on”开头,后面接事件名称,然后把一个匿名函数表达式或者函数作为属性值赋值给这个属性,就为这个元素指定了时间处理…

事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同名的HTML特性来指定 这个特性的值应该是能够执行的script代码 如: <input type="button" value="click me" onclick="alert('clicked')"/> 此外也可以直接调用在文档其它…

一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是Javascript代码字符串.这段代码应该是事件处理程序函数的主体,而非完整的函数声明.当指定一串代码作为HTML事件处理程序属性的值时,浏览器会吧代码串转换为类似如下的函数中: function(event){ with(){ with(){ with(this){ /* 这里是代码字符串 */…

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到…

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 13.1 事件流 事件流描述的是从页面中接收事件的顺序. 1.3.1.1 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 13.1.2 事件捕获 事件捕获(event capturing…

1. 简介 JavaScript与HTML之间的交互式通过事件来实现的,事件是文档或浏览器窗口中发生的一些特定的交互瞬间,使用事件处理程序来预订事件,从而在事件发生时,能够执行特定的代码.事件使页面的行为(JavaScript)与页面的外观(HTML.CSS)解耦.BOM.DOM都有支持的事件类型. 事件是发生在对象上的(比如:window对象,节点对象) 2. 事件流 事件流:描述的是从页面接收事件的顺序.两种事件流:冒泡流,捕获流. 2.1. 事件冒泡 事件冒泡:事件开始时由最具体的元素(嵌…

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 为事件指定事件处理程序的方法主要有3种. 1.html事件处理程序 首先,这种方法已经过时了.因…

javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn"); //取得该按钮的引用 btn.onclick=function(){ alert('clicked'); alert(this.id); // mybtn 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理. 删除DOM0级方法指定的事件处理程序: btn.onclick=null; // 删除事件…

1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件. 4.DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段.(实际的目标元素在捕获阶段接不会收到事件) IE不支持DOM事件流,Opera.safari.chrome.firefox支持…

JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模型,使得JavaScript代码与HTML和CSS代码之间形成了松散耦合. 事件流 事件流描述的是从页面中接受事件的顺序.但是值得注意的是,在当年的浏览器大战中的主角们采用的是几乎完全相反的事件流概念.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. 事件…

一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡,即最开始由具体的元素接收事件,然后逐级传播到不具体的节点,直到传播到windows对象:另一种事件流是事件捕获,目前使用得比较少,是指文档对象先接收到事件,然后逐级向下,一直传播到事件的实际目标. 二.事件处理程序 1.两种表示方式 <input type="button" valu…

事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如click事件的事件处理程序是onclick.为事件指定事件处理程序的方式有多种方式. HTML事件处理程序 元素支持的事件,都可以使用与相应事件处理程序同名的HTML特性来指定.这个特性的值能支持一定的JavaScript代码.例如,在单击按钮的时候执行一些JavaScript代码. <div id=…

事件就是用户或浏览器自身执行的某个动作,JavaScript与HTML的交互也是通过事件实现的.而相应某个事件的函数就叫做事件处理函数.包括以下几种: 1.HTML事件处理程序    某个元素支持的每种事件,都可以使用一个相应的事件处理程序相同的HTML特性指定.这个特性的值能执行JavaScript代码. <input type=”button” value=”按钮” onclick=”showMessage()”> <script> function showMessage()…

在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然存在属性 ①DOM中的事件对象event属性   (1).type属性用于获取事件类型   (2).target.srcElement<兼容IE事件>属性用于获取事件目标    (3).stopPropagation()方法 用于阻止事件冒泡   (4).preventDefault() 方法 阻…

指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(this.value)"/> 这段代码可以正确工作,点击之后会弹出 click me字符串: 如果把该代码改为: <script>     function clickMe(){         alert(value);     } </script> <input…

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven…

JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript 与 HTML 之间的交互是通过事件实现的.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,或者说事件就是 Web 浏览器通知应用程序发生了什么事情.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 以下是<JavaScript高级程序设计>中事件流和事件处理程序的总结:…

参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件 焦点事件 鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dbclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发…

参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件 焦点事件 鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dblclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发…

当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队提出了两种完全相反的事件流. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面.…

前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅,文中难免会有不同程度的错误,请您指正留言 PS:事件阶段一节请看最新博客,之前理解有误 javascript事件基础 我们的网页之所以丰富多彩并具有交互功能,是因为我们的javascript脚本语言,而javascript与HTML之间的交互又是通过事件机制实现的 所以,事件是javascript一…

× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序和IE事件处理程序四类,下面将详细介绍该部分内容 HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.这个特性的值应该是能够执行的JavaScript代码 在事件处理程序函数内部,this…

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars…

摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原文: 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击…