js代码 | 易学教程

js on和addEventListener的区别

阅读更多关于 js on和addEventListener的区别

Js事件监听处理从最开始的on逐渐衍化成了addEventListener. 如ele.onclick之类的事件处理变成了ele.addEventListener(‘事件名’,’响应函数’,事件响应方式) addEventListener最初是监听鼠标如点击之类的事件，后来添加了对键盘按键事件的监听（演变历史）看下面的代码，on会覆盖上一次的事件,也就是只弹出一次，addEventListener不会，所以会弹出多次，当然了，用addEventListener绑定的事件可以用removeEventListener来移除注意绑定的时候最好使用具名函数而不是匿名函数。 addEventListener第三个参数可以选择是true或者false,默认是false. true表示捕获方式响应，而false则是冒泡方式 ie8及更早浏览器不支持此方式具体可以查看 http://www.runoob.com/jsref/met-element-removeeventlistener.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http

js事件绑定 onclick && addEventListener

阅读更多关于 js事件绑定 onclick && addEventListener

昨晚回去后，和雷子讨论如何才能“检测”到页面上某个元素都绑定了哪些事件监听函数，第一感觉就是应该从浏览器入手，比如FF，或者Chrome等开发工具中应该有相应的功能，于是测试之: 前提：只是一个简单的小测试，而且 addEventListener 属于标准绑定函数，IE 中与此不兼容（IE 相应的是 attachEvent），所以此次测试先抛弃 IE，使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50 测试页面：复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .test { background-color: #FFF; border: 1px solid gray; height: 100px; width: 100px; margin: 0 10px 0; float: left; } </style> </head> <body> <div id="test1" class="test" οnclick="console.log('test1 : click!');" οnmοuseοver="console.log('test1 : mouseover!');">TEST1</div> <div id="test2"

JS循环中给对象添加事件addEventListener的用法

阅读更多关于 JS循环中给对象添加事件addEventListener的用法

在做百度迁徙图的时候遇到：循环中使用addEventListener方法，给各个marker对象增加点击事件，顺便记录下百度地图的东西，整段代码都贴过来吧。。。。 // 百度地图API功能 var map = new BMap.Map( "allmap" , {enableMapClick: false }); //构造地图时，关闭地图可点功能 map.enableScrollWheelZoom( true ); //开启鼠标滚轮缩放 var mapStyle = { features: [ "road" , "building" , "water" , "land" ], //隐藏地图上的poi style: "dark" //设置地图风格为高端黑 } map.setMapStyle(mapStyle); // 编写自定义函数,创建标注 var myIcon = new BMap.Icon( "../img/node.png" , new BMap.Size( 20 , 20 )); var centerIcon = new BMap.Icon( "../img/center.gif" , new BMap.Size( 0 , 0 )); // 节点点击事件 var getNodeDetail= function (obj) { return function (evt) {

[JS]详尽解析window.event对象

阅读更多关于 [JS]详尽解析window.event对象

描述 event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。 <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript"> function cancelLink() { if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnValue = false; } </SCRIPT> <BODY οnclick="cancelLink()"> 下面的例子在状态栏上显示鼠标的当前位置。 <BODY οnmοusemοve="window.status = 'X=' + window.event.x + ' Y=' + window.event.y"> 属性： altKey, button, cancelBubble, clientX, clientY,

js event对象整理及详细介绍

阅读更多关于 js event对象整理及详细介绍

这篇文章主要介绍了JavaScript event对象整理及详细介绍的相关资料,需要的朋友可以参考下 Event属性和方法： 1. type：事件的类型，如onlick中的click； 2. srcElement/target：事件源，就是发生事件的元素； 3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键） 4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和 document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置（这一定要定义position:relative;，值可以是fixed absolute relative这几种）； 6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数； 7.

js第三种添加事件监听的方法

阅读更多关于 js第三种添加事件监听的方法

前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法上一篇记事件响应链的时候记了两个div的嵌套时响应问题( 响应链 ),这次还用嵌套来记addEventListener 先准备好两个嵌套的div,并设置不同的背景色和大小 <div id="outer"> <div id="inner"></div> </div> 设置css: #outer { width: 100px; height: 100px; background-color: red; } #inner { width: 50px; height: 50px; background-color: blue; } js代码: <script> var outer = document.getElementById("outer"); var inner = document.getElementById("inner"); // 元素对象的addEventListener方法,为元素添加一个事件监听,第一个参数是要监听的事件类型,第二个参数是事件函数,第三个参数可选,是否在捕获阶段监听,默认为false; // 相比于前两种监听方法,这种方法可以为同一个元素的同一个事件添加多个事件函数 outer.addEventListener("click"

JS事件之事件绑定与事件监听

阅读更多关于 JS事件之事件绑定与事件监听

事件绑定在我们对一个元素绑定了事件处理函数，并且事件触发后，我们才会得到自己想要的与网页的交互。抛开事件监听函数不谈，我们有两种绑定事件处理函数的方法: 1.通过HTML来绑定事件处理函数 <a href="" onclick="fo()">hello</a> <script> function fo(){ alert('Hello World!') } </script> 这种方式和写css样式时通过标签的style属性直接设置行内样式类似。这样会让代码看起来一团糟，也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。 2.在JavaScript 中绑定事件处理函数如果在JavaScript 中分配事件处理函数，首先获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性。 <button id="mylink"></button> <script> var link = document.getElementById("mylink"); link.onclick = function () { alert("Hello World !"); }; </script> 但我们想要对同一个对象使用onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，只会执行最后绑定的方法

JS添加事件和解绑事件：addEventListener()与removeEventListener()

阅读更多关于 JS添加事件和解绑事件：addEventListener()与removeEventListener()

作用： 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' ,

js事件监听：addEventListener() 与移除事件：removeEventListener()

阅读更多关于 js事件监听：addEventListener() 与移除事件：removeEventListener()

说事件绑定得先说事件流事件流冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。来个例子看一下吧！ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html> 当点击了div时事件流走向，在冒泡型事件流中click事件传播顺序为： <div> =》 <body> =》 <html> =》 document 在捕获型事件流中click事件传播顺序为： document =》 <html> =》 <body> =》 <div> 这里之所以说冒泡，并不是视图上的冒泡，而是结构上的冒泡。这里要弄清楚了，就算在视图上div是独立的，但他的在html结构结构上依旧是被body所包裹。而冒泡是由内而外向上冒泡。懂了冒泡之后，捕获就好理解了，就是反向的事件流。由外而内。事件处理

面经

阅读更多关于面经

Backbone router怎么实现页面跳转， router里面定义routes对象，在对象里面定义动作键值对，当url匹配到key时，执行相应的动作，显示相应的页面。解释一下 Backbone 的 MVC 实现方式？ Model主要负责主页面数据的获取。 View主要负责监听model事件以及与用户之间的交互。 Backbone中没有controller的概念，C的功能总是负责响应请求并调用相应的动作来让模型产生变化同时渲染视图。Backbone中主要是通过View和Router来实现的。View中通过监听DOM事件/model的change事件，实现与model的交互与视图的更新。Router实现页面间的跳转。 Backbone的优缺点。优点： 1.分层的结构很清晰 2.backbone将页面的数据、逻辑、视图解耦，开发过程中可以将数据交互、业务逻辑、用户界面等分配给多人开发。缺点： 1.Model层简单，对于一对多的数据结构有点应付不过来。 2.view很容易产生内存泄漏的问题。 3.对于简单页面，使用这种MVC还是有些繁琐。什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点? 路由指的是根据不同的url显示不同的页面和内容；所谓的前端路由是把路由的这一功能交给前端来实现。适合用在单页面应用中，大部分页面结构不发生变化

订阅 js代码