js代码 | 易学教程

js事件绑定的几种方式

阅读更多关于 js事件绑定的几种方式

在JavaScript中，有三种常用的绑定事件的方法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为： onXXX="JavaScript Code" 其中： onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 JavaScript Code 为处理事件的JavaScript代码，一般是函数。例如，单击一个按钮，弹出警告框的代码有如下两种写法。 1.原生函数 <input οnclick="alert('警告，不要乱点！！！')" type="button" value="点我试试" /> 2.调用自定义函数 <input οnclick="attention()" type="button" value="点我试试22" /> <script type="text/javascript"> function attention(){ alert("提示：这是一个警告提示"); } </script> 二. 在js代码中绑定在JavaScript代码中（即<script>标签内

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

阅读更多关于 js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

转载了一位大神关于这个问题的解释，记住以下便于以后查找，也方便同行们参考遇到的问题：jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码如下（其中.tabDel是页面加载之后新生成的元素，故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件）：上网找的解决方法大概有一下两种： 1、在用 on 绑定 click 事件之前，对该事件解绑，也就是 1 $('.right').off('click','.tabDel').on('click','.tabDel',function(){//删除所加 tab 节点的函数 2 // alert('tab的索引：'+$(this).parents('.contentLi2').index()); 3 var iNum1 = $(this).parents('.contentLi2').index(); 4 var iNum2 = $(this).parents('.anElement').index(); 5 $scope.module.tab[iNum1].fieldList.splice(iNum2,1); 6 $(this).parents('.anElement').remove(); 7 }

js阻止事件冒泡的两种方法

阅读更多关于 js阻止事件冒泡的两种方法

一、冒泡事件简介当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。方法一：event.stopPropagation( ); 例如： <div> <p> 段落文本内容 <input type = "button" value = "点击" /> </p> </div> html代码： // 为所有div元素绑定click事件 $ ( "div" ). click ( function ( event ){ alert ( "div-click" ); } ); //为所有p元素绑定click事件 $ ( "p" ). click ( function ( event ){ alert ( "p-click" ); } ); //为所有button元素绑定click事件 $ ( ":button" ). click ( function ( event ){ alert ( "button-click" ); // 阻止事件冒泡到DOM树上 event . stopPropagation (); // 只执行button的click，如果注释掉该行，将执行button、p和div的click } ); 方法二：event.target 现在，事件处理程序中的变量 event 保存着事件对象。而 event.target

js中的事件委托

阅读更多关于 js中的事件委托

最近面试的过程中，经常被问到这个问题，那么这里记录一下，加深印象。在使用js中的事件时，比如click、focus、mouseenter、mouseover等等常用的事件，我们知道这么给一个元素添加事件监听： var btn = document.getElementById('myButton'); // DOM0级添加事件 btn.onclick = function(e){ // some code } // DOM2级事件 btn.addEventListener('click', function(e){ // some code },false); 我们得先清楚js中的事件流，也就是经常说到的事件冒泡。比如在这么一个html页面中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> </body> </html> 当我们点击了DIV元素

js事件冒泡

阅读更多关于 js事件冒泡

DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。 DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。来看一个实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <script type="text/javascript" src="..

js 事件冒泡与阻止冒泡、事件委托

阅读更多关于 js 事件冒泡与阻止冒泡、事件委托

一.定义事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。二. 关于事件冒泡与阻止事件冒泡的用法： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS事件基础</title> <style> div{ padding: 100px; } #div2{ width: 400px; height:300px; background: #ccc; display: none; } </style> <script type="text/javascript"> window.οnlοad=function(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div2'); oBtn.οnclick=function(ev){ alert("我是按钮啊！"); ev.cancelBubble

原生js事件委托

阅读更多关于原生js事件委托

之前面试的时候就被问过，什么是事件委托？事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。看下图理解事件冒泡：事件委托的好处：不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。因此当子元素较多，需要对子元素进行监听的时候，可以使用事件委托。 //原生js事件委托的例子，css部分可以忽略 <!doctype html> < html > < head > < style > ul { list-style : none ; display : flex ; } ul li { width : 50px ; height : 50px ; line-height : 50px ; text-align : center ; background : pink ; font-weight : bold ; border : 1px solid #eee ; } ul li:hover { cursor : pointer ; } </ style > </ head > < body > < div > < ul > < li > 1 </ li > < li > 2 </ li > < li > 3 </ li > < li > 4 </

JS基础知识9（事件，事件委托）

阅读更多关于 JS基础知识9（事件，事件委托）

javascript和html的交互是通过事件实现的 1.dom文档对象模型是树形结构事件流描述从页面中接收对象的顺序。事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。如下图 2.事件捕获阶段是从不太具体的节点（window）逐级向下传播到最具体的元素（为截获事件提供了机会）。然后是实际的目标接收到事件。最后通过事件冒泡对事件做出响应并一级一级向上传回到window（根节点） 3.阻止事件冒泡主要是通过preventDefault()取消事件的默认行为，stopPropagation()取消事件的进一步捕获或冒泡。 4.事件冒泡的应用是事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件代理的优点：1.代码简洁 2.减少浏览器内存占用 5.页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。 6. 为什么要用事件委托： 1.减少事件数量 2.避免内存外泄 3.预测未来元素在JavaScript中，添加到页面上的事件处理程序数量将直接关系到

原生js事件绑定和事件委托

阅读更多关于原生js事件绑定和事件委托

最近常在移动端开发，由于不是大型站点，不需要使用vue等库，也不需要引用jquery和zepto等。写得最多得就是各种元素选择器和事件绑定，操作下来也是有点烦人。这时候怀念起jquery的美好来了，但是仅为了这个引用这么大个库，实在时下不了手，思考了一下，直接在html构造函数上拓展支持了。按照习惯来走，一般我们会喜欢在选择的元素上直接 on + 事件，加上相应的逻辑函数完成一个事件绑定的。这里要说明一下，js的事件绑定是特殊的，不同于老旧版本的事件绑定 element.onclick = function () { } 这种方式绑定的事件，后面有其他相同绑定事件，会覆盖前面的逻辑代码，因此我们会使用 addEventListener 实现绑定，按照绑定事件的顺序执行所有操作。 element .addEventListener( 'click' , function () { console. log ( 1 ) }, false ) element .addEventListener( 'click' , function () { console. log ( 2 ) }, false ) >> 1 >> 2 再深一步思考一下，什么是事件委托，意义是什么。事件委托，实际是把目标元素的事件绑定到其他元素上，借助触发事件。举个例子，我需要做个div容器展示文章

【js】for、forEach、map数组遍历性能比较

阅读更多关于【js】for、forEach、map数组遍历性能比较

【js】for、forEach、map数组遍历性能比较先上结果：遍历时间上 for循环遍历 < for…of遍历 < forEach遍历 < for…in遍历 < map遍历背景常用的数组遍历方式有很多，如最经典的for循环 for ( var i = 0 ; i < arr . length ; i ++ ) { } 再者有了for…in for ( var i in arr ) { } forEach arr . forEach ( function ( i ) { } ) ; map arr . map ( function ( i ) { } ) ; 然后ES6有了更为方便的for…of for ( let i of arr ) { } 此篇不考虑作用差异，仅对这些方式的性能做一次比较。注：filter、every、some跟forEach/map相近，不常用所以本次不加入比较。 1.对比方案本次采用最直观的方式进行对比：通过对高数量级数组的遍历时间进行比较。 1.1 数组arr: let arr = [ ] ; for ( let i = 0 ; i < 10000000 ; i ++ ) { arr [ i ] = i ; } console . log ( arr ) ; // [0, 1, 2, 3, ... , 9999999] 1.2 对比函数:

订阅 js代码