js调用dom元素上的事件

2024-11-03

JavaScript DOM–事件操作

事件注册事件给元素添加事件,为注册事件或者绑定事件注册事件两种方式传统方式监听事件方式事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.addEventListener(type, listener, [useCapture]) 参数type: 事件类型字符串,不要on 如click,mouseover 参数listener: 事件处理函数,触发的时候要做的事情参数useCapture: 可选,是一个

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

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

Js为Dom元素绑定事件须知

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

在元素上写事件和addEventListent()的区别

在元素上写事件和addEventListent()的区别1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的.而addEventListener能添加多个事件绑定,按顺序执行.2. addEventListener方式,不支持低版本的IE.(attachEvent 支持IE).3. 普通方式绑定事件后,不可以取消.addEventListener绑定后则可以用 removeEvenListener 取消.4. addEventListener 是W3C DOM 规范中提供的注册事

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

【jquery】在异步加载的元素上绑定事件

最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前端开发使用了jquery 和 artTemplate技术,其中经常要通过artTemplate的template.compile()方法来实现像是向下滚动鼠标动态加载后续分页的内容并显示在页面上这样的效果. 在jquery官网上关于事件绑定和事件委托的4个方法中有这样的介绍: live():jQue

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

Jquery 在动态元素上绑定事件

弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" value="确定" /> <div id="divcontent"> </div> <script> $(function () { $("#btnyes").on("click", funct

JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌握如何设置DOM元素的样式 DOM查找方法语法:document.getElementById(“id”) 功能:返回对拥有指定ID的第一个对象的引用返回值:DOM对象说明:id为DOM元素上id属性的值 DOM查找方法语法:document.getElementsByTagName(“ta

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

event.target 属性返回哪个 DOM 元素触发了事件。

<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function(event) { console.log(event); va

jQuery查看dom元素上绑定的事件列表

jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).data( "events" ); 这种是jQuery 低于1.8版本的写法.到了1.8版本以后,调用方式改为了: 1: jQuery._data( elem, "events" ); 其中elem为dom元素,不能为jQuery对象或者选择器. 原文链接地址:http

动态绑定事件到特定dom元素上，包含新增加的

$('body').on('click', 'a.detail-data', function (e) { //动态事件绑定为body元素下所有的a.detail-data元素添加一个事件包括新增的节点 var href = $(this).attr("data-url"); var url = window.location.protocol + "//" + window.location.host + href; bridge.callHandler('E

JS复制DOM元素文字内容

要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text Demo</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"&g

JS操作DOM元素属性和方法

Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.JavaScript则是用于访问和处理DOM的语言.如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念.文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法. DOM独立于具体的编程语言,通常通过JavaScript访问DOM

html加载与脚本运行中，由于html未完全加载而导致脚本找不到dom元素无法执行事件

问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上alert('xx'):运行后手动关闭提示框click事件就调用成功,为什么,也写了个sleep函数,但不论sleep多久click事件也不会被执行,那我要怎样才能自动调用这个click. 解决方法: 将代码包含在onload中,进行(window.onload())加载. 原理: 首先网页接你所编写的代

ajax获取的数据如何渲染到dom元素上

1.常见的字符串拼接 (对于动态创建的元素添加js时,使用事件委托,利用事件冒泡的原理,把事件添加到父级元素上,触发执行效果) $("ul").on('click','li',function(){}) 2. 使用angular vue 进行数据绑定,直接渲染到页面

详解JS中DOM 元素的 attribute 和 property 属性

一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)

jquery在元素上收购事件

jquery的给元素绑定的事件能够用data方法取出来通过$(element).data("events")来获取 // 比方给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

JS选取DOM元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getEle

js之DOM元素遍历

对于元素间的空格,IE9之前的版本不会返回文本节点,而且他所有浏览器都会返回文本节点.这样就导致使用childNodes和firstChild等属性时的行为不一致.从而有了Element Traversal API 为DOM元素添加额以下5个元素: chaildElementCount:返回子元素(不包括文本节点和注释)的个数 firstElementChild:指向第一个子元素 lastElementChild:指向最后一个子元素 previousElementSilbing:指向前一个同辈

js调用dom元素上的事件

热门专题