js代码

当前窗口获得焦点js事件，html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点， 监听 onfocus() 和window.onblur()事件实现 //当前窗口得到焦点 window .onfocus = function ( ) { //播放动画或视频 }; //当前窗口失去焦点 window .onblur = function ( ) { //暂停动画或视频 }; 这个方法可以实现切换标签暂停动画视频，但是会带来一个问题，由于是判断焦点，如果是在当前页面上铺上一个小窗口，那当前页面就暂停了动画，试想，如果你一边看片，一边开个聊天窗口与MM聊天，当你操作聊天窗口的时候，视频暂停了，这并不是你想要的效果。 现在我们来看看HTML5是怎么解决的。H5 提供了很多简单实用的 API，Page Visibility API 就是其中之一。 Page Visibility API能有效的帮助我们完成这样的判断。 使用html5的Page Visibility API来实现 这个 API 本身非常简单，由以下三部分组成。 document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。 document

html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。 一. onfocus（获得焦点事件） 当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。 以下的文本框，当鼠标指针移过去时，里面的文字全部被选中： 请输入网址 这是怎么做的呢？看以下代码及解释： <input type="text"name="url" value="http://www.gxblk.com" size="30"οnmοusemοve="this.focus();this.select();"> 代码里，input标签内嵌入了onmousemove（鼠标指针经过）事件的JS语句，其等号后面的this.focus()意为其自身获得焦点；获得焦点的标志是该文本框内将出现输入光标，但要让其内的文字全部被选中，我们还得用上this.select()语句，它的意思就是选中全部文本框里的文字。 二. onblur（失去焦点事件） 我们经常会检测文本框是否已经被正确输入，检测工作通常在用户点击了提交按钮之后进行，事实上，利用控件失去焦点的时候，我们就可以实时进行这个检测工作，这样的话

今天小弄了一下JS事件，主要说一下FF和IE兼容的问题 对象名.addEventListener("事件名（不带ON）"，函数名，true/false);(FF下) 对象名.attachEvent("事件名"，函数名);(IE下) 说明： 　　事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。 函数名，记住不要跟括号最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。 userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。 html代码 <div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div> js代码 window.οnlοad=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2

最近项目中要要到 js动态给给元素绑定事件，刚好之前没用到过这些，顺便学习一下，于是google了一下 事件，写了如下两个事件 一个添加事件 ，一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble) //参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式, //简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件. //capture/bubble的参数是布尔值, True表示用capture, False则是bubble function addEvent() { var obj = document.getElementById("txtIataCity"); if (window.addEventListener) { //其它浏览器的事件代码: Mozilla, Netscape, Firefox /

事件绑定方法 方法一：直接在HTML标签中绑定 在html标签中添加“on”+事件名称的属性来绑定事件 事件处理程序可直接写在属性值当中 < div class= "demo" οnclick= "console.log(this)" ></ div > // this指向的是当前DOM对象 这种事件处理程序的作用域很特别，可以像局部变量一样直接访问document及元素本身的成员，示例： < div class= "demo" οnclick= "console.log(className)" ></ div > // demo // 等同于 < div class= "demo" οnclick= "console.log(this.className)" ></ div > 当事件内容较为复杂的时候，可将事件内容写成函数，在on的事件属性中执行函数 < div onclick = "demo()" > </ div > < script > function demo () { console.log( this ) // this指向window对象,只能通过传参来获取当前DOM元素 } </ script > 通过HTML绑定事件的缺点是HTML与JavaScript代码耦合严重 方法二：在js中在DOM元素上绑定 DOM元素添加‘on’+事件名称的属性

Js中的数据类型 Js中的数据类型一共有六种，即number，string，boolean，underfine，null，object。 一，number Number数据类型指的是数字，可以为整型，也可以是浮点数。如 1 var a=12,b=12.5; 二，string 字符串由零个或多个字符构成，字符包括字母，数字，标点符号和空格;需要注意的是 字符串必须放在引号里（单引号或双引号）; 如 1 2 3 4 5 var bob=”man”; alert(“bob”); alert(bob); 浏览器首先会弹出包含有“bob”的字符串，然后弹出包含有“man”的字符串，前者是直接弹出字符串，后者则是弹出变量的值。 三，boolean 布尔型数据只能有两种值 true 和 false，在js中true和false是关键字。通常，我们设置布尔值时多用于条件的判断。如： 1 2 3 4 5 6 7 var flag= true ; if (flag){ //js 代码 } 在条件判断语句中我们将所有的判断条件看做一个布尔值（这里需要了解一些布尔值的转换特性）。 四，underfine underfine通常指的是没有赋值的变量，通过typeof可以对数据的类型进行判断。如 1 2 3 4 5 var a,b=underfine; alert(a); alert( typeof a);

绑定事件的方法 元素函数 <input onclick="alert('哈哈')" type="button" value="点击我，弹出警告框" /> 自定义函数 <input onclick=alert("哈哈"); type="button" value="方法1" /> <input onclick="myAlert()" type="button" value="方法2" /> <script> //方法1 function myAlert(){ alert("呵呵"); } </script> 元素.on事件=function（）{//事件处理函数代码} <input id="demo" type="button" value="按钮" /> <script> document.getElementById("demo").onclick=function(){ alert(“哈哈”); } </script> 这种方式在JavaScript代码中绑定事件，可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。但可能会被其他人添加的点击事件覆盖。 4. 绑定事件监听函数addEventListener（attachEvent） （1）引入：如果直接为元素绑定事件，那么该元素该事件的最后一个处理函数会覆盖之前的函数。如下： 只输出3333

另有js事件详解 点击打开链接 一.addEventListener()和removeEventListener()讲解 addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。 它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”) 现在的版本可以省略第三个参数，默认值为false 示例： 要在body上添加事件处理程序，可以使用下列代码： document.body.addEventListener('touchmove', function (event) { event.preventDefault(); },false)； 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除 错误用法示例： document.body.addEventListener('touchmove', function (event) { event.preventDefault(); },false); document.body

作用： addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。 它们都接受3个参数：事件名、事件处理的函数和布尔值。 布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 示例： 环境：移动端，界面禁止触摸事件 要在body上添加事件处理程序，可以使用下列代码： document . body . addEventListener ( 'touchmove' , function ( event ) { event . preventDefault (); }, false )； 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也 意味着通过addEventListener()添加的匿名函数无法移除 错误用法示例： document . body . addEventListener ( 'touchmove' , function ( event ) { event . preventDefault (); }, false ); document . body . removeEventListener ( 'touchmove' ,

onclick()这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera支持）。 一、onclick()方式 window.onload = function() { var container = document.querySelector("#container"); container.onclick = function() { console.log("第一次onclick事件"); } container.onclick = function() { console.log("第二次onclick事件"); } }　　　　　 //运行结果：“第二次onclick事件” 运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成 二、addEventListener()方法 window.onload = function() {