JavaScript事件处理机制

最新推荐文章于 2024-02-26 14:09:41 发布

小李讲源码

最新推荐文章于 2024-02-26 14:09:41 发布

阅读量493

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50893663

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、什么叫事件？

event，发生了一件事情，比如说鼠标被点击，键盘按钮被按下，...

有哪些事件？？事件句柄（event handler）

w3school教程

二、事件发生以后怎么办？

Javascript事件注册的方法

什么叫事件注册，就是把控件的事件和处理事件的代码联系起来的方法。

1和2就不写了直接百度就可以太简单后面的都会有

1.直接在控件标签中写代码。

2.编写一个事件处理程序（函数），在控件标签中将该函数指定给一个事件。

3. 在页面加载事件(onload)中，为控件绑定一个匿名函数。

<body οnlοad="abc()">

function abc()
{
document.getElementById("b").onclick = function(){alert('爱');}; //匿名函数

}

<!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" />
<script type="text/javascript">
function init()
{
	// TagName 标签名称
	document.getElementsByTagName("input").item(0).οnclick=function()
	{
		alert("测试1!");
	}
}
</script>
<style type="text/css">
</style>
</head>

<body οnlοad="init();">
<input type="button" value="提示" />
</body>
</html>

4. 在页面加载事件(onload)中，为控件绑定一个命名函数。

<body οnlοad="abc()">

function show()
{
alert("测试");
}

function abc()
{
document.f1.b1.οnclick=show;
}

5.另外一种页面加载事件的写法

window.οnlοad=function()
{

}

6.事件对象 event对象

表示事件发生的时候，状态是什么样的？

以下信息（状态）都可以通过事件对象来获得。

哪个鼠标按钮被点击？

光标的坐标是？

被按的按键的 unicode 是？

相对于屏幕，光标的坐标是？

shift 键被按了吗？

哪个元素被点击了？

哪个事件类型发生了？

有点类似于错误对象（异常）

在IE浏览器中是window.event,在其他浏览器中，是事件处理函数的第一个参数。（用了感觉不好使）

<!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" />
<script type="text/javascript">
window.οnmοusedοwn=function(evt)
{
	if(window.event) evt=window.event;
        // 显示所点击地方的坐标信息
       document.getElementById("info").innerHTML=evt.screenX+":"+evt.screenY;
        // 按Alt键 后面会加上Alt
       if(evt.altKey)
	{
		document.getElementById("info").innerHTML+="Alt";
	}
	
}
</script>
<style type="text/css">
#info
{
	background-color:#0F3;
	font-size:16px;
	height:50px;
}
</style>
</head>

<body>
<p id="info">这是一段文字 是一段什么文字呢?</p>

</body>
</html>