21、HTML事件（二）

最新推荐文章于 2021-06-28 22:46:24 发布

junJZ_2008

最新推荐文章于 2021-06-28 22:46:24 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： HTML IE JavaScript 框架浏览器 ViewUI

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

事件对象

包含的信息如下：
引起事件的对象、事件发生时鼠标的信息、事件发生时键盘的信息。

事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。处理完毕就会被销毁。

IE中，事件对象是window对象的一个属性event。采用如下方式进行访问：

oDiv.onclick = function () {
	var oEvent = window.event;
};

DOM标准中，event对象必须作为唯一参数传给事件处理函数，如下访问：

oDiv.onclick = function () {
	var oEvent = arguments[0];
};

当然此种方式可以直接通过参数传递进来：

oDiv.onclick = function(oEvent){//...}

IE与DOM获取事件属性相同的地方：

1、获取事件类型(名称)

function handleEvent(oEvent) {
	if (oEvent.type == "click") {
		alert("clicked");
	} else {
		if (oEvent.type == "mouseover") {
			alert("mouse over");
		}
	}
}
oDiv.onclick = handleEvent;
oDiv.onmouseover = handleEvent;

2、获取按键代码(keydown/keyup事件)

var iKeyCode = oEvent.keyCode;

3、检测是否按下了Shift、Alt、Ctrl键

var bShift = oEvent.shiftKey; 
var bAlt = oEvent.altKey; 
var bCtrl = oEvent.ctrlKey;

4、获取客户端鼠标事件坐标

var iClientX = oEvent.clientX; 
var iClientY = oEvent.clientY;

说明：指与浏览器边界距离。

5、获取鼠标距屏幕边沿坐标

var iScreenX = oEvent.screenX; 
var iScreenY = oEvent.screenY;

IE与DOM获取事件属性不同的地方：

1、获取目标(事件源)
IE:

var oTarget = oEvent.srcElement;

DOM:

var oTarget = oEvent.target;

2、获取字符代码
IE和DOM都支持event对象的keyCode属性，它会返回按下的按键的数值代码。但如果按键代表一个字符（但非Shift、Ctrl、Alt等），IE的keyCode将返回字符的代码（等于它的Unicode值）：

var iCharCode = oEvent.keyCode;

在DOM兼容的浏览器中，按键代码与按键字符是分开的，要获取字符代码，请使用charCode属性：

var iCharCode = oEvent.charCode;

如果不确定按下的按键是否包含字符，则可使用isChar属性来进行判断：

if(oEvent.isChar){ 
    var iCharCode = oEvent.charCode; 
}

最后可以用这个值来获得实际的字符，只要使用String.fromCharCode()方法：

var sChar = String.fromCharCode(iCharCode);

3、阻止事件发生
IE：

oEvent.returnValue = false;

Mozilla：

oEvent.preventDefault();

例如：附上使用上下文件菜单

document.body.oncontextmenu = function (oEvnet) {
	if (isIE) {
		oEvnet = window.event;
		oEvnet.returnValue = false;
	} else {
		oEvnet.preventDefault();
	}
};

4、停止事件冒泡
IE：

oEvent.cancelBubble = true;

Mozilla：

oEvent.stopPropagation();

如下停止事件传播示例：

<html οnclick="alert('html')">
	<head>
		<title>Event Propagation Example</title>
		<script type="text/javascript" src="detect.js"> </script>
		<script type="text/javascript"> 
			function handleCick(oEvent) {
				alert("input");
				if (isIE) {
					oEvent.cancelBubble = true;
				} else {
					oEvent.stopPropagation();
				}
			}
		</script>
	</head>
	<body οnclick="alert('body')">
		<input type='button' value='Click Me' οnclick="handleCick (event)" />
	</body>
</html>

事件的类型

DOM标准定义了以下几组事件：

鼠标事件、键盘事件、HTML事件（窗口发生变动或者发生特定客户与服务器交互时触发）、突变事件（底层DOM结构发生改变时触发）

鼠标键盘事件
要触发dblclick事件，在同一个目标上要按顺序发生以下事件：

mousedown、mouseup、click、mousedown、mouseup、click、dblclick

mouseout：用户正要将其移出元素的边界时发生。
mouseover：移入到某元素上时发生。
mousemove：鼠标在某个元素移动时发生。

用户按一次某字符按键时，会按以下发生事件：keydown、keypress、keyup

如果按某非字符键（如Shift），按以下发生事件：keydown、keyup

如果用户按下一个字符按键且不放，keydown和keypress事件将逐个持续触发，直到松开。

如果用户按下一个非字符按键且不放，将只有keydown事件持续触发。

HTML元素事件

load事件——页面完全载入后，在window对象上触发；所有的框架都载入后，在框架上集上触发； <img/>完全载入后，在其上触发；或者对于 <object/>元素，当其完全载入后在其上触发。

unload——页面完全卸载后，在window对象上触发；所有的框架都卸载后，在框架上集上触发； <img/>完全卸载后，在其上触发；或者对于 <object/>元素，当其完全卸载后在其上触发。

abort（异常中断）事件——用户停止下载过程时，如果 <object/>对象还未完全载入，就在其上触发。

error事件——JavaScript脚本出错时，在window对象上触发；某个 <img/>的指定图像无法载入时，在其上触发；或 <object/>元素无法载入时触发；或都框架集中的一个或多个框架无法载入时触发。

select事件——用户选择了文本框中的一个或多个字符时触发（ <input/>或者 <textarea/>）。

change事件——文本框（ <input/>或者 <textarea/>）失去焦点时并且在它获取焦点后内容发生过改变时触发；某个 <select/>元素的值发生改变时触发。

submit事件——点击提交按钮（ <input type="submit"/>）时，在 <form/>上触发。

reset事件——点击重置按钮（ <input type="reset"/>）时，在 <form/>上触发。

resize事件——窗口或者框架的大小发生改变时触发。

scrool事件——用户在任何带滚动条的元素上滚动它时触发。

focus事件——任何元素或者窗口本身获取焦点时触发。

blur事件——任何元素或者窗口本身失去焦点时触发。

load、unload事件
对于window对象可用两种方法定义onload事件处理函数：
第一种：window.οnlοad=function(){//...}
第二种： <body οnlοad='alert()'/>
这两种是相同的，因为在HTML中没有window标签，所以就加在 <body/>元素上了。

注：不要使用document.body.οnlοad=function(){//...}，如果把脚本放在 <head/>标签中，运行还会出错，显示document.body未定义，所以最后用window.onload

在窗口关闭到下一个页面获取控制之前，只有很短的时间来执行事件处理函数的代码，所以最好避免使用onunload事件处理函数。

跨平台的事件脚本

/*  
 * fileName:eventutil.js  
 */  
var EventUtil = new Object;
//添加事件处理函数
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
	if (oTarget.addEventListener) {//如果是支持DOM兼容浏览器
	  //false 表示在冒泡阶段捕获
		oTarget.addEventListener(sEventType, fnHandler, false);
	} else {
		if (oTarget.attachEvent) {//如果是IE
			oTarget.attachEvent("on" + sEventType, fnHandler);
		} else {//其他浏览器
			oTarget["on" + sEventType] = fnHandler;
		}
	}
};
//删除事件处理函数
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
	if (oTarget.removeEventListener) {
		oTarget.removeEventListener(sEventType, fnHandler, false);
	} else {
		if (oTarget.detachEvent) {
			oTarget.detachEvent("on" + sEventType, fnHandler);
		} else {
			oTarget["on" + sEventType] = null;
		}
	}
};
//格式化event对象：把IE的event对象适配成DOM类似的事件对象。注：该方法不单独使用，仅供后面的getEvent()方法使用
EventUtil.formatEvent = function (oEvent) {
	if (isIE && isWin) {
         //由于IE所按的字符的编码是包含在keyCode属性中，所以如果事件类型是keypress，
         //需要创建charCode属性，值等于keyCode，否则为其他类型事件时设置成0
		oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
		oEvent.eventPhase = 2;//这个属性始终等于2代表冒泡阶段，因为IE公支持这个阶段
		oEvent.isChar = (oEvent.charCode > 0);//当charCode不为0时为true
		oEvent.pageX = oEvent.clientX + document.body.scrollLeft;//鼠标距页面边的距离
		oEvent.pageY = oEvent.clientY + document.body.scrollTop;
		oEvent.preventDefault = function () {//阻止事件适配 IE->DOM
			this.returnValue = false;
		};
         //relatedTarget为DOM事件中的第二个事件目标
		if (oEvent.type == "mouseout") {
              //鼠标移出时为toElement（移向的那个对象）
			oEvent.relatedTarget = oEvent.toElement;
		} else {
			if (oEvent.type == "mouseover") {
              //鼠标移进时为fromElement（从哪个对象移进来的）
				oEvent.relatedTarget = oEvent.fromElement;
			}
		}
         //阻止事件冒泡
		oEvent.stopPropagation = function () {
			this.cancelBubble = true;
		};
         //事件源适配
		oEvent.target = oEvent.srcElement;
		oEvent.time = (new Date).getTime();
	}
	return oEvent;
};

//该函数在事件处理函数中使用
EventUtil.getEvent = function () {
	if (window.event) {
		return this.formatEvent(window.event);
	} else {
	/*函数是一个对象，event对象是一个函数，每个函数都有一个caller属性，它包含了指向调用它的方法
      的引用。如，funcA()调用funcB()，那么funcB.caller就等于funcA。假设某个事件处理函数调用了
     EventUtil.getEvent()，那么EventUtil.getEvent.caller就指向这个事件处理函数的本身。
     又函数有arguments属性，而event对象总是事件处理函数的第一个参数*/
		return EventUtil.getEvent.caller.arguments[0];
	}
};

<html>
	<head>
		<title>Mouse Events Example</title>
		<script type="text/javascript" src="detect.js"></script>
		<script type="text/javascript" src="eventutil.js"></script>
		<script type="text/javascript">
        
            EventUtil.addEventHandler(window, "load", function () {
                var oDiv = document.getElementById("div1");
                
                EventUtil.addEventHandler(oDiv, "mouseover", handleEvent);
                EventUtil.addEventHandler(oDiv, "mouseout", handleEvent);
                EventUtil.addEventHandler(oDiv, "mousedown", handleEvent);
                EventUtil.addEventHandler(oDiv, "mouseup", handleEvent);
                EventUtil.addEventHandler(oDiv, "click", handleEvent);
                EventUtil.addEventHandler(oDiv, "dblclick", handleEvent);                
                
            });
            
            function handleEvent() {
                var oEvent = EventUtil.getEvent();//通过EventUtil的getEvent()方法获取IE中适配后的事件对象

                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
                //oEvent.target其实是IE属性里的srcElement属性
                oTextbox.value += "\n    target is " + oEvent.target.tagName;
                if (oEvent.relatedTarget) {
                	//IE事件对象中本没有relatedTarget属性，是由fromElement或toElement适配而来
                    oTextbox.value += "\n    relatedTarget is " + oEvent.relatedTarget.tagName;
                }
            }
   
        </script>
	</head>
	<body>
		<p>
			Use your mouse to click and double click the red square.
		</p>
		<div style="width: 100px; height: 100px; background-color: red"
			id="div1"></div>
		<p>
			<textarea id="txt1" rows="15" cols="50"></textarea>
		</p>
	</body>
</html>

junJZ_2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21、HTML事件（二）

事件对象包含的信息如下：引起事件的对象、事件发生时鼠标的信息、事件发生时键盘的信息。事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。处理完毕就会被销毁。 IE中，事件对象是window对象的一个属性event。采用如下方式进行访问： oDiv.onclick = function () { var oEvent = window.event;}; ...
复制链接

扫一扫