JavaScript事件学习小结(三)js事件对象_javascript技巧

相关阅读:

JavaScript事件学习小结(五)js中事件类型之鼠标事件

http://www.jb51.net/article/86259.htm

JavaScript事件学习小结(一)事件流

http://www.jb51.net/article/86261.htm

javaScript事件学习小结(四)event的公共成员(属性和方法)

http://www.jb51.net/article/86262.htm

JavaScript事件学习小结(二)js事件处理程序

http://www.jb51.net/article/86264.htm

JavaScript事件学习小结(三)js事件对象

http://www.jb51.net/article/86266.htm

一、事件对象

1、认识事件对象

事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。

所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。

2、html事件处理程序中event

<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>

这样会创建一个包含局部变量event的函数。可通过event直接访问事件对象。

3、DOM中的事件对象

DOM0级和DOM2级事件处理程序都会把event作为参数传入。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>

4、IE中的事件对象

第一种情况: 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>

第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>

但是我有两个地方不懂。

1、通过DOM0级方法添加的事件处理程序中同样可以传入一个event参数,它的type和window.event.type一样,但是传入的event参数却和window.event不一样,为什么?

btn.onclick= function (event) {
var event1=window.event;
console.log('event1.type='+event1.type); //event1.type=click
console.log('event.type='+event.type); //event.type=click
console.log('event1==event?'+(event==event1)); //event1==event?false
}

2、通过attachEvent添加的事件处理程序中传入的event和window.event是不一样的,为什么?

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>

以上所述是小编给大家介绍的JavaScript事件学习小结(三)js事件对象的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注网站!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js事件对象
,以便于您获取更多的相关知识。

时间: 2025-01-26 07:42:41

JavaScript事件学习小结(三)js事件对象_javascript技巧的相关文章

JavaScript事件学习小结(二)js事件处理程序_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

JavaScript函数的一些注意要点小结及js匿名函数_javascript技巧

下面给大家介绍javascript函数 函数的基本语法是: function functionName(arg0,arg1,...,argN) { statements } 下面是个示例: function str(name,age){ document.write("hello my name is " + name + ". and i am " + age + " years old."); } str(" oliver"

每天一篇javascript学习小结(Array数组)_javascript技巧

1.数组常用方法 var colors = ["red", "blue", "green"]; //creates an array with three strings alert(colors.toString()); //red,blue,green alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green 2.数组map()方法  var numbe

每天一篇javascript学习小结(面向对象编程)_javascript技巧

1.面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", 29, "Software Engineer");

每天一篇javascript学习小结(基础知识)_javascript技巧

1.字符转换 var s1 = "01"; var s2 = "1.1"; var s3 = "z";//字母'z'无法转换为数字,所以或返回NaN var b = false; var f = 1.1; var o = { valueOf: function() { return -1; } }; s1 = -s1; //value becomes numeric -1 s2 = -s2; //value becomes numeric -1.

JavaScript Event学习第二章 Event浏览器兼容性_javascript技巧

在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

Bootstrap3.0学习教程之JS折叠插件_javascript技巧

过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可.如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了. What's inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟.它被其它插件用来检测当前浏览器对CSS过渡效果是否支持. 折叠 对为支持折叠功能的组件,例如accordions和导航,赋予

现代 JavaScript 开发编程风格Idiomatic.js指南中文版_javascript技巧

你为项目所择风格都应为最高准则.作为一个描述放置于你的项目中,并链接到这个文档作为代码风格一致性.可读性和可维护性的保证. 一.空白 1.永远都不要混用空格和Tab.2.开始一个项目,在写代码之前,选择软缩进(空格)或者 Tab(作为缩进方式),并将其作为最高准则.a).为了可读, 我总是推荐在你的编辑中设计2个字母宽度的缩进 - 这等同于两个空格或者两个空格替代一个 Tab.3.如果你的编辑器支持,请总是打开 "显示不可见字符" 这个设置.好处是:a).保证一致性b).去掉行末的空格

JavaScript调用后台的三种方法实例_javascript技巧

方法一:直接使用<%=%>调用 前台JS: 复制代码 代码如下: <script type="text/javascript">         var methodStr = "<%=BehindMethod() %>";         alert(methodStr);         </script>  后头方法: 复制代码 代码如下: public static string BehindMethod() 

比较详细的javascript DOM 学习笔记第1/2页_javascript技巧

一.DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的.DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点.DocumentFragment--可以像Document一样来保存其他节点.Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>.这是唯一可以同时包含特性和子节点的节点类型.Attr--代表一对特性名和特性值.这