dom添加事件

【dom添加事件】的更多相关文章

zepto | 用事件委托去解决无法给新增添的DOM添加事件的问题

前段时间在做一个任务的时候,碰见了一个问题:zepto无法用on事件去监听新增加的dom事件.这个问题用live可解决, 但是live在ios下失效,为了解决这个问题,我采用了暴力的方法去解决,每次添加dom都绑定一次事件,这样是可以解决问题的,但是这样的方式肯定消耗很多资源,不是一个好的方式,今天在读JavaScript富应用开发这本书时,找到了一个比较完美的解决方法,利用事件委托与自定义事件,封装成一个插件($.fn.xxx)的形式. 下面就模拟选项卡的形式去解决这个问题 zepto:htt…

1.语法:document.getElementById('btn').addEventListener 2.可以添加多个EventListener,且不会覆盖 3.移除EventListener, document.getElementById('btd').removeEventListener("click",functionName); 事件处理: 1.级处理html直接添加 Onclick事件 2.dom0级处理,通过getElementbyId('id').onclick…

如何给js动态创建的dom添加事件

delegate() 方法实例当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click",function(){ $("p").slideToggle(); }); 定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如…

Vue(基础五)_vue中用ref和给dom添加事件的特殊情况

一.前言这篇文章涉及的主要内容有: 1.ref绑定在标签上是获取DOM对象 2.ref绑定在子组件上获取的是子组件对象 3.案列:自动获取input焦点二.主要内容 1.基础内容: ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例 (1)将ref绑定到标签上:测试之后发现在mounted()函数之后拿到的是button对象 <!DOCTYPE html>…

给DOM生成的元素添加事件

问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 <table border="" cellspacing="" cellpadding="" class="text-center"> <caption class="text-center"…

如何在通过knockout数据绑定的DOM元素上添加事件

通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才会出现.如果要在这些DOM元素上面绑定事件,必须再数据绑定完成之后添加事件,而且绑定事件和数据绑定的代码必须写在同一个作用域里.不然添加绑定事件不会成功. 案例一段AJAX调用成功后绑定数据,并且添加事件的代码(ajax已被封装) var ViewModel = { availableCashDa…

在js文件中通过jquery定位到某个dom时候设置事件时候相当于直接在dom里面添加事件

在js文件中通过jquery定位到某个dom时候设置事件时候相当于直接在dom里面添加事件当触发事件时候会把当前的dom传给该方法…

给DOM操作生成的元素添加事件

问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 <table border="" cellspacing="" cellpadding="" class="text-center"> <caption class="text-center"…

jquery技巧之让任何组件都支持类似DOM的事件管理

本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样,虽然在最后当你看到这个小技巧的具体内容时,你可能会觉得原来如此或者不过如此,但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制,那开发出来的组件一定会有更大的灵活性和扩展性,而且我也是第一次使用这种方法(见识太浅的原因),觉得它…

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能…

js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的 ? 1 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? ? 1 2 3 obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 ? 1 2 3 4 //…

通过原生JS实现为元素添加事件

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.…

添加事件及Event对象的兼容写法

一.事件流事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档). 2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 二.事件处理程序 1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 DOM2级事件定义了两个方法:用于处理指定和删除事件处…

关于动态生成dom绑定事件失效的原因

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1.事件失效的原因:(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到…

[转载]给Jquery动态添加的元素添加事件

原文地址:给Jquery动态添加的元素添加事件作者:小飞侠我想很多人都会向我一样曾经被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table> <tbody> <tr> <td…

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义…

AngularJS中的DOM与事件

前言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" 传入true表示禁用,传入false表示可用代码: <label> <input type="checkbox" ng-model="myCheck" />是否同意 </label> <button ng-disabled…

节点操作,节点属性的操作及DOM event事件

##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.insertBefore(new_node,指定节点) 把增加的节点放到指定节点的前边 removeChild() 获取要删除的元素,通过父元素调用删除 someone.replaceChild(new_node,指定节点) 把指定节点替换成新节点 ##2. 节点属性操作 ###2.1 获取文本节点的值…

jacascript DOM变动事件

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM变动事件变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛: 删除节点变动删除节点时,涉及到 DOMNodeRemoved.DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件:事件触发的先后顺序是 DOMNodeR…

datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

一.动态定义列头在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,col_define用于存放定义的列头,targets表示第几列,title表示列名,data是为了对应data下的rowdata数据 $.mockjax({ url: "/salary_import", status: 200, responseText: { 'code': 'ok', '…

10-JavaScript之DOM的事件操作

JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 2.事件 JS是以事件驱动为核心的一门语言 2.1事件的三要素事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了.这件…

前端 ----关于DOM的事件操作

关于DOM的事件操作一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了…

python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2.内接js <script>/*js代码*/</script> 3.外接样式 <script src = 'main.js'></script> //在前端项目中当你看到index.main开头,这个时候应该考虑是项目的入口文件 //标签中img标签 link标…

ECharts 报表事件联动系列二：柱状图，饼状图添加事件

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <script src="http://echarts.baidu.com/dist/echarts.min.js"&…

ECharts饼状图添加事件

和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <script src="http://echarts.baidu.com/dist/echarts.…

w3c标准 dom对象事件冒泡和事件捕获

http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(css) 2.行为(dom,ecmscript) 3.结构(xml ,xhtml) Dom对象模型是什么? dom对象模型包括事件捕获模型和事件冒泡模型,两个事件流会触发所有的对象,从document开始到document结束 1.事件冒泡行为:从最精确的目标到最不精确的目标进行触发 2.事…

BOM及DOM及事件

知识内容: 1.BOM介绍 2.DOM操作 3.事件参考:http://www.cnblogs.com/liwenzhou/p/8011504.html 入门代码(DOM基本操作与事件): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>web 9</title> </head> <body> <!-- 注意,…

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段本文主要解决的问题: 事件流 DOM事件流的三个阶段先理解流的概念在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其…

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义…

js添加事件 attachEvent 和addEventListener的用法

一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = method1; obj.onclick = method2; obj.onclick = method3; 如果这样写,那么只有绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角该登场了,在IE中我们可以使用attachEvent方法 btn1Obj.attac…