js事件的绑定与移除】的更多相关文章

事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567890')">点击事件</div> <div onclick="selfEvent()">自定义函数</div> function selfEvent(){ alert('自定义函数'); } 在JS代码中绑定 <div id='c…
监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(type,handler,false/true) type:事件类型 handler:事件执行触发的函数 false/true:false为冒泡/ture为捕获,参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 事件捕获:父级元素先触发,子集元素后触发:…
需要打开控制台查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 多个事件的绑定及移除</title> </head> <body> <button id="button">button</button> <butto…
对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 <!doctype html> <html> <head> <style type="text/css"> #div1{ width:200px; height:200px; background:pink; margin-bottom: 1…
1.html代码 <input type="button" value="add"> <input type="button" value="save"> 2.js代码 $("#add").click(function(){ alert("add"); $("#save").click(function(){ alert("save&…
1.绑定形式 ele.addEventListener(evtName, fn) ele["on" + evtName] = function () {} ele.onclick = function () {} 2.addEventListener:事件监听器. 原事件被执行的时候,后面绑定的事件照样被执行,不会被层叠掉 <!DOCTYPE html> <html lang="en"> <head> <meta chars…
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> js事件循环绑定 var lis = docume…
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = function() { console.log("文档点击"); } // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法 // .onclick = function (){} document.onclick = function() { console.log("文档点…
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme…
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码 <!DOCTYPE html> <html> <head>…
http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它们的复杂本质和调试难度时,这样的看法又是很正常的.为此,我创建了可视化事件(Visual Event)来查看DOM节点上绑定的事件. 简介 Visual Event是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息.Visual Event能显示如下信息: 1.哪一个元素…
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面…
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的 通过以上这种方式进行事件函数的绑定有个缺点就是…
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #…
很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick="doAction()" >Click</a>. 我原来一直有个疑问,干嘛非要加上"javascript:;" .原来,我很"老实",每次都会加上.今天,又手敲了类似的代码,本着"老子就是不加,你咬我"的得瑟心态,…
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为: onXXX="JavaScript Code" 其中: onXXX 为事件名称.例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等…
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数,例如 <button onclick="alert('点我啊!')">点我啊</button> 2.也可以设置一个id 例如<button id="btn">点我啊</button><br> $('#btn')…
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="button" id="btn">测试按钮</button> DOM中绑定函数名 <button onclick="testFun" type="button" id="btn">测试按钮<…
js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标题显示测试的数据? document.title 3.循环单击怎么实现(代码优化的思想:灵活)? 如果判断是this.src是a.png就让它变成b.png并不是最好的方式,最好的方式是让i++,来判断i的奇偶,而且前一种在图片发生改变的时候就失效了,后一种并不会,所以第二种方法更加灵活,值得推荐,…
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup②keypress只能捕获数字,字母,符号键,而不能捕…
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:…
个人博客 地址:http://www.wenhaofan.com/article/20180925232057 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会出现重复加载的问题,但是该方法仅适用于页面较少的情况,如果页面很多,那么会导致第一次访问时引入大量不一定会被适用到的js,效率低下. 2.将绑定事件和其他事件区分成两个js来引入 在pjax中判断是否已经引入绑定事件的js,如果已经引入则不再重复引入. 3.在js中添加代码判断是否已经被引入 目测采…
1. 原生 JS 语言: 绑定:addEventListener(type, function, false) 取消: removeEventListener(type, function, false) 2. jquery 语言: 绑定:bind() 取消:unbind()…
鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout事件,调用函数message(),代码如下: 运行结果: 任务 补充右边编辑器第12行,当鼠标移开"点击我"的按钮时,调用message()函数,弹出消息对话框. <!DOCTYPE HTML> <html> <head> <meta http-e…
鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下: 运行结果: 任务 补充右边编辑器第13行,当鼠标经过"确定"按钮后,调用message()函数,弹出消息对话框. <!DOCTYPE HTML> <html> <head…
JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的本质:是整个文档的根节点,所有的html都包含在document里面,      不过我们平时都是省略document          document.childNodes[0].tagName-->!          document.childNodes[1].tagName-->htm…
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: window.onload = function(){   v…
一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过live()绑定 $(“#selectAll”).die().live(“click”,function(){ //事件运行代码 }); 二click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件 完整测试代…
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu…
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 window.onload = function(){   var btn = document.getElementById("yuanEv…