`

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事件监听机制(事件捕获)总结

    添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同

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

    主要介绍了JS针对浏览器窗口关闭事件的监听方法,总结整理了几种常用的浏览器关闭事件监听方法,非常简单实用,需要的朋友可以参考下

    事件监听及JS相关基础

    事件监听功能及基础知识介绍 基础知识总结 1.1常用事件集合 bind()：绑定事件 change(): 内容改变事件 计时器设置

    javascript在事件监听方面的兼容性小结

    javascript 在事件监听方面的兼容性总结，注意是由于多个浏览器的不一致，导致大家在js书写时需要考虑多个浏览器的兼容性。

    JavaScript如何实现监听键盘输入和鼠标监点击

    实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结. Keyboard​Event KeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键（Each event describes a key）；...

    Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

    主要介绍了Javascript DOM事件操作,结合实例形式总结分析了javascript监听鼠标点击、释放，悬停、离开等操作技巧,需要的朋友可以参考下

    JavaScript 事件流、事件处理程序及事件对象总结

    JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件，以便事件发生时执行相应的代码。本文将介绍JS事件相关的基础知识。

    关于JavaScript中事件绑定的方法总结

    3 绑定事件监听函数 一、在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子： &lt;input type="button" value="点我呦" onclick="alert&#40;"hello world!"&#41;"/&gt; &lt;!--或者--&...

    JavaScript常见事件处理程序实例总结

    本文实例总结了JavaScript常见事件处理程序。分享给大家供大家参考，具体如下： 事件指的是使用者或者浏览器自身执行的某种动作（比如点击事件）。响应这些事件的函数就叫做事件处理程序（或者叫事件监听器）。事件...

    【JavaScript源代码】VUE watch监听器的基本使用方法详解.docx

    4、 deep属性总结　1、下面代码是watch的一种简单的用法　2、immediate 立即监听　3、handler方法 4、 deep属性　总结　侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。　监听的数据名放到这里面...

    JavaScript全屏和退出全屏事件总结（附代码）

    主要介绍了JavaScript全屏和退出全屏事件,先通过window.ieIsfSceen = false或true进行判断是否为全屏，在进行进入全屏和退出全屏的操作,需要的朋友可以参考下

    javascript 跨浏览器开发经验总结（五） js 事件

    简单事件模型和高级事件模型 简单事件模型和高级事件模型简单事件，就是事件与页面元素直观的绑定在一起的形式，如： 代码如下: &lt;div xss=removed&gt; element.onclick = function(){alert&#40;this[removed]&#41;;} ...

    【JavaScript源代码】vue Watch和Computed的使用总结.docx

    vue Watch和Computed的使用总结 　目录　01. 监听器watch （1）作用 （2）属性和方法 （3）监听对象 （4）监听数组 02. 计算属性computed （1）计算属性的set方法 （2）区别 （3）使用场景 　01. 监听器watch 　（1...

    JAVAWeb全课程笔记( html版)

    目录 HTML总结 CSS总结 JavaScript总结 DOM总结 tomcat服务器 servlet基础 Request&Response编程 ...Servlet事件监听器 JavaMail开发 （案例）Estore电子商城 软件国际化 Java基础加强 JQuery Ajax JSON

    JavaScript常用标签和方法总结

    (1) JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的 脚本语言。  (2) JavaScript是由Netscape公司开发的一种脚本语言，其编写的程序可以嵌入到 HTML页面中，并直接在浏览器中解释执行...

    【JavaScript源代码】详解CocosCreator系统事件是怎么产生及触发的.docx

    详解CocosCreator系统事件是怎么产生及触发的 ...callbacks-invoker.js结尾加点有意思的监听器排序算法总结　环境　概要　模块作用涉及文件　模块作用　涉及文件　源码解析　CCGame.jsCCInputManager.js　CCGame

    用js闭包的方法实现多点标注冒泡示例

    第一次接触js，各种难，下面就这几天的研究做一些总结，求坑 在事件监听器中使用闭包 在执行事件监听器时，通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据，但是支持允许...

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