`

JS事件监听总结

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body style="height:2000px;">
定义:
事件类型：是一个用来说明发生什么类型事件的字符串；
事件目标：是发生的事件或与之相关的对象，常见的事件目标有window Document Element等；
事件处理程序或事件监听程序是处理或响应事件函数；
当对象上注册的事件处理程序被调用时，我们会说浏览器"触发"和"派生"了事件；
事件对象：是与特定事件相关且包含有关该事件详细信息的对象；如（this 或触发这个事件的对象）
事件传播：是浏览器决定哪个对象触发其事件处理程序的过程；

Winow事件：
window.load;
window.unload;
window.focus;
window.blur;
window.scroll;
window.resize;

<img id="img"/>有load error事件;



如果一个对象上注册了多个事件处理程序，调用它们的顺序如下：
1.通过设置对象属性
2.通过HTML标签属性
3.注册的事件处理程序按照他们的注册程序调用

<div id="div" style="width:100px; height:30px; background-color:red;" ></div>
<input id="add" type="button" value="添加监听"/>
<input id="del" type="button" value="取消监听"/>
<script>
	var div = document.getElementById("div");
	//创建监听器
	function bind(o,type,callback)
	{
		if(o.addEventListener)
		{
			o.addEventListener(type,callback,false);
		}else if(o.attachEvent)
		{
			o.attachEvent("on"+type,callback);
			/*
			下面的这种方式不能删除注册的监听器
			*/
			//o.attachEvent("on"+type,function(event){
			//		return callback.call(o,event);
			//	});
		}else
		{
			o["on"+type] = callback;	
		}
	}
	//取消监听器
	function unbind(o,type,callback)
	{
		if(o.removeEventListener)
		{
			o.removeEventListener(type,callback,false);
		}else if(o.detachEvent)
		{
			o.detachEvent("on"+type,callback);
		}else
		{
			delete o["on"+type];	
		}
	}
	//事件处理程序
	/*
	事件处理程序分为三类：
		一：设置通过JS对象属性为事件处理程序  如：target.onclick=function(){}
		二：设置HTML标签属性为事件处理程序   如：<p onclic="alert()"></p>
		三：是通过注册监听器为事件处理程序    如：target.addEventListener()
	*/
	var c = function(){
		alert(this.id);
		//这里的this是事件目标
	}
	function adds()
	{
 		
		bind(div,"click",c);
	}
	function dels()
	{
		unbind(div,"click",c);

	}
	window.onload=function()
	{		
		var add = document.getElementById("add");
		var del = document.getElementById("del");	
		bind(add,"click",adds);	
		bind(del,"click",dels);	
		
	}
 
	function loads()
	{
		
	}
	bind(window,"load",loads);
	//获取鼠标移动事件
	//return event.target || event.srcElement;
	document.body.onmousemove = function(event)
	{
		
		var event = event || window.event;
		div.innerHTML = event.clientX + " == "+event.clientY;
	}
	//window.onblur= function(){alert("失去");}
	//window.onfocus= function(){alert("获得");}
	
	//加载图片
	var img = new Image();
	img.src = "http://i2.letvimg.com/img/201204/24/ListLogo.png";
	img.onload=function(){
		//alert("图片加载完成");
		document.getElementById("img").src = this.src;
	}
	
	//键盘事件按下时
	document.body.onkeydown = function(event)
	{
		var event = event || window.event;
		//event.altKey && event.shiftKey;
		div.innerHTML = event.keyCode;
	}
	
	//添加文本节点
	var text = document.createTextNode("asdfasdf");
	document.body.appendChild(text);
	
	//给style添加属性
	div.style.cssText = "margin:0px;";
	var padding = "padding:0px;";
	div.style.cssText += padding;
</script>

</body>
</html>

 

分享到：
| JS中CSS Style标签对照表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js事件监听机制(事件捕获)总结

    JavaScript事件监听机制是前端开发中极其重要的一环，它允许开发者对用户行为（如点击、按键、鼠标移动等）作出响应。事件监听涉及的几个核心概念包括事件传播的两种方式：事件捕获和事件冒泡，以及兼容性问题和事件...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    原生JavaScript监听滚轮事件稍微复杂一些，因为需要考虑浏览器兼容性问题。可以使用`addEventListener`方法添加事件监听器，并处理不同的滚轮事件名称。 ```javascript document.addEventListener('...

    使用JS监听键盘按下事件（keydown event）

    总之，通过使用JavaScript监听键盘按下事件，我们能够为用户提供更加丰富和灵活的交互体验。无论是简单的回车键监听，还是复杂的组合键操作，掌握这一技术对于提升网页的交互能力都至关重要。希望本文的介绍能够帮助...

    js监听鼠标点击和键盘点击事件并自动跳转页面

    本文将详细解释如何使用JavaScript监听鼠标的点击事件（onmousedown）和键盘的点击事件（onkeydown），并且在触发这些事件后，页面将会自动跳转到指定的URL。这一过程不复杂，适合初学者学习和参考。 首先，我们来...

    cocos creator为事件加上监听的两种处理方式

    总结，Cocos Creator提供了两种主要的事件监听机制，`cc.Class.prototype.on` 和 `cc.EventTarget.addListener`，两者都可以有效地帮助开发者实现游戏逻辑。选择哪种方式取决于具体的需求和场景，但重要的是理解每种...

    JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下： 方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...

    09JavaScript事件总结.docx

    本文主要总结了JavaScript事件的关键概念。 一、事件 事件是用户与浏览器之间交互的瞬间，例如用户点击按钮、输入文本或者鼠标移动等。JavaScript通过监听这些事件来执行相应的功能。常见的事件包括： 1. `onclick`...

    jquery 监听 键盘 事件

    在JavaScript的世界里，...总结，jQuery监听键盘事件是提升网页交互体验的重要手段，通过灵活运用`.on()`方法和事件处理函数，可以实现各种复杂的用户交互逻辑。了解并掌握这些技巧，将有助于提升你的前端开发能力。

    Unity3D教程：鼠标碰撞检测与事件监听1

    在Unity3D中，鼠标碰撞检测与事件监听是游戏交互性的重要组成部分，尤其是在开发3D游戏时。这个教程将介绍如何通过JavaScript（JS）脚本来实现这一功能。以下是对该教程内容的详细解释： 首先，我们看到代码中的`...

    使用JavaScript事件综合查询，js事件大全

    JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识...总结来说，这个实验旨在帮助学生理解和熟练运用JavaScript事件处理，提升Web交互的用户体验。通过实际操作，学生可以更好地掌握这些概念，并将其应用到实际项目中。

    事件绑定、事件监听、事件委托.pdf

    在现代Web开发中，处理用户与页面的...总结起来，事件绑定、事件监听和事件委托是现代Web开发中处理用户交互不可或缺的三大工具，它们各有特点和优势，熟练掌握和应用它们，对于提升Web应用的性能和用户体验至关重要。

    JS键盘监听事件addkey无eval版

    ### JS键盘监听事件addkey无eval版 #### 知识点概述 本篇文章将深入探讨一个自定义的JavaScript键盘监听事件处理函数`addkey`，该函数采用了一种不使用`eval`的安全方法来实现对键盘按键的监听。在Web开发中，监听...

    间隔函数及事件监听.zip

    间隔函数和事件监听是JavaScript编程中的重要概念，它们在创建动态和交互式的Web应用程序中扮演着关键角色。本文将深入探讨这两个主题，并结合实例来帮助理解它们的工作原理和实际应用。 首先，我们来讨论“间隔...

    下拉菜单事件监听-1.0.0.1.zip

    总结，下拉菜单事件监听是AutoJS自动化脚本开发中的一个重要环节，它涉及到UI组件的创建、事件监听和用户交互的响应。掌握这些技能，能够帮助开发者构建更加高效、用户友好的自动化脚本。对于下载的"下拉菜单事件...

    JS 事件绑定、事件监听、事件委托详细介绍

    总结，JavaScript的事件机制包括事件绑定、事件监听和事件委托，它们共同构成了网页动态交互的基础。理解并熟练运用这些概念，对于创建交互丰富的Web应用至关重要。在实际开发中，根据项目需求和浏览器兼容性，合理...

    js监听某张图片是否加载完成，完成后再执行相应代码

    总结一下，JavaScript中监听图片加载的关键在于使用`Image`对象的`onload`和`onerror`事件。通过这些事件，我们可以在图片加载的正确或错误状态时执行相应的处理逻辑。这种技术在网页开发中非常常见，对于优化页面...

    js事件监听器用法实例详解

    总结来说，JavaScript事件监听器为网页事件处理提供了更好的控制和灵活性，但同时也需要注意到不同浏览器的兼容性问题。通过封装相关函数，可以有效地简化跨浏览器的事件监听器编写过程，确保功能的可用性。

    JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

    总结来说，JavaScript 事件监听是网页交互的核心部分，而跨浏览器兼容性的实现则需要对各种浏览器的特性有深入理解。通过使用像 `oEventUtil.AddEventHandler` 这样的适配器函数，我们可以确保在 IE 和非 IE 浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics