js 事件对象dataset from

2024-08-23

javascript总结44: DOM对象的dataset属性方式

1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性 2 使用DOM对象的dataset属性,操作自定义属性时要注意的三点问题: 1 在标签上定义属性时,要以data-为前缀 2 在js中获取/设置通过data-定义的属性

JavaScript学习06 JS事件对象

JavaScript学习06 JS事件对象事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Fi

JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onclick事件普通浏览器支持event,也就是以上的写法;蛋疼的ie678支持window.event 所以有了兼容写法如下: var event = event || window.event; 本节重点 - 事件的属性 1.筋斗云导航练习效果图 HTML <!DOCTYPE html> &l

JS—事件对象

在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位置的信息,键盘操作导致的事件对象中,会包含按下的键有关的信息, 所有浏览器都支持event对象,event对象会传入DOM0级,DOM2级,HTML指定,的事件处理程序中,但支持的方式不同,所以也会涉及跨浏览器的部分. 兼容DOM的浏览器 function handler(){ alert(even

JS事件对象与事件委托

事件对象包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTagName("div")[0].onclick = function(e){ e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上) console.log(e);//这里e就是事件对象 } 事件的属性和方法 type:获取事件类型(c

JS 事件对象和事件冒泡

1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取: 1)var event = window.event || arguments.callee.caller.arguments[0]; 2)通过参数传.function(e) { var event = window.event || e; } 2.事件源事件源即

JS:事件对象1

一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test(); //0 function test () { alert(arguments.length); } 但是在事件对象中是有参数的,他是通过浏览器把这个对象作为参数传递过来的. box.onclick = function() { alert(arguments.length);// 1 alert(a

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event

js事件对象

哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个例子来讲讲,顺便把常用的属性也添加进去.. Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&

js 事件对象

/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后,系统会去调用相关的事件处理函数. 事件对象获取:系统调用相关的函数的时候,会直接将生成的事件对象,当做参数传入到我们的函数内部. 已下代码演示用到的html结果: <body> <button id = "btn1">按钮</button> </

js 事件对象event

在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a href="http://www.baidu.com">baidu</a> <div class="box"> 我是div <div class="son">son</div> </div>

js 事件对象相关笔记

事件对象 event就是一个事件对象写到我们的监听函数的括号里面当形参来看事件对象只有有了事件才存在,他是系统给我们自动创建的不需要我们传递参数事件对象是我们事件的一系列相关数据的集合跟事件相关比如鼠标点击就包含了鼠标的相关信息等等事件对象我们可以自己定义比如event,eve,e 事件对象也有兼容性问题 I E6,7,8通过window.event,兼容性的写法e = e || window.wvwnt <div class="div

常用JS事件对象

事件源对象event.srcElement.tagNameevent.srcElement.type 捕获释放event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event.keyCodeevent.shiftKeyevent.altKeyevent.ctrlKey 事件返回值event.returnValue 鼠标位置event.xevent.y 窗体活动元素document.activeElement 绑

JS事件-对象监视事件，事件触发函数

写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click() 鼠标单击 dblclick() 鼠标双击 mouseover() 鼠标移入事件 mouseout() 鼠标移出事件 mousemove() 鼠标移动事件 mousedown() 鼠标按下事件 mous

JavaScript 事件事件流事件对象事件处理程序回调函数 error和try...catch和throw

参考资料: 慕课网 DOM事件探秘 js事件对象处理事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件焦点事件鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dbclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发

JavaScript Event 事件事件流事件对象事件处理程序回调函数 error和try...catch和throw

参考资料: 慕课网 DOM事件探秘 js事件对象处理事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件焦点事件鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dblclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发

js的event.srcElement与event.target（触发事件对象）

IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法:使用obj = event.srcElement ? event.srcElement : event.target; 或:var evtTarget = event.target || event.

JS 事件与事件对象小结

JavaScript与HTML之间的交互是通过事件来实现的.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式. 一些基本概念: 事件:是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:描述的是页面中接受事件的顺序.事件捕获 --> 事件目标 --> 事件冒泡事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(document). 事件捕获:事件开始时

js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节点.事件名.事件处理函数 addHanler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒

JS键盘事件对象之keyCode、charCode、which属性对比

先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup.在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

JS中的事件(对象，冒泡，委托，绑定)

- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之间的交互行为我们可以在事件对应的属性中设置一些js代码,当事件被触发时,这些代码会执行文档的加载: 浏览器在加载一个页面时,是按照自上而下的顺序加载的, 读取到一行就运行一行,在代码执行时,页面还没有加载将js代码编写到页面的下面,确保页面加载完毕以后再执行js代码 window.onload

js 事件对象dataset from

热门专题