您的位置：首页 > Web前端 > JavaScript

JavaScript入门指南---（八）、响应事件

2017-03-24 16:57 302 查看

一,什么是事件

事件:当程序观测到某一件事发生,或某一个状态改变,那么这时候就说,有一个事件发生了.

事件处理器:当事件发生时,事件处理器能够接收到事件发生的这个消息,可以在处理器中做各种各样的事情.

onclick,mouseover.mouseout,onload等都是事件处理器.

事件处理器相应的事件
onBlur用户离开了字段
onChange用户修改了值,正要离开
onClick用户点击
onDblClick用户双击了鼠标
onFocus用户进入字段(点击它或跳转它)
onKeydown当元素激活时,一个按键被按下
onKeyup当元素激活时,一个按键被释放
onKeypress当元素激活时,一个按键被按下,然后被释放
onLoad对象加载完毕
onMousedown鼠标按钮在一个对象上被按下
onMouseup鼠标按钮被释放
onMouseover鼠标移动到了对象上
onMousemove鼠标在对象上方移动
onMouseout鼠标离开对象
onReset用户充值了表单
onSelect用户选择了对象的一些内容
onSubmit用户提交表单
onUnload用户关闭浏览器窗口

添加事件处理器

添加内联事件处理器

<input type="button" name="button1" value="button1" onclick="alert(我是内联事件处理器)">


注:这种写法不推荐,因为这样写,js与html耦合度太高,下面的写法会更好些

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>事件处理器示例</title>
<script type="text/javascript">
function onButtonClick(){
alert("u clicked a button");
}
</script>
</head>

<body>
<input type="button" name="button1" id="myButton" value="点我点我" />

<!-- 将script代码写在这里而没有些在head标签中,是因为head会先加载
当head加载时,执行document.getElementById("myButton")方法是找不到myButton的
因为body标签还没有加载 -->
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
alert("这是通过js设置的监听事件喔");
}

//也可以这么写
//不过要注意后面只是一个方法名,不带圆括号
document.getElementById("myButton").onclick = onButtonClick;
</script>
</body>

</html>


删除事件处理器

将onclick属性赋值null即可.

document.getElementById("xx").onclick = null;


二,更改标签的默认操作

一般情况下,特定HTML元素的时间处理器是在元素默认操作之前执行的.

示例:实际会跳转到新浪

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改默认操作</title>

</head>
<body>
<a href="http://www.baidu.com" id="toBaidu">百度</a>
<script type="text/javascript">
document.getElementById("toBaidu").onclick = function(){
this.href = "http://www.sina.com";
}
</script>
</body>
</html>


禁止默认操作

如果将标签onclick的方法的返回值修改成false,那么该标签的默认操作将不会执行.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改默认操作</title>

</head>
<body>
<a href="http://www.baidu.com" id="toBaidu">百度</a>
<script type="text/javascript">
document.getElementById("toBaidu").onclick = function(){
this.href = "http://www.sina.com";
//下面的返回false加上后,a标签的超链接点击跳转特性就不会再执行了
return false;
}
</script>
</body>
</html>


三,event对象

event对象中封装了事件对象,它是由浏览器自动生成的.当一个事件发生时,就会产生一个对象的event对象,event对象中就含有该事件发生时的信息.

为了写出的js代码能更好的兼容不同的浏览器,下面是两种不同的处理事件的方式.

W3C方式

当时间触发时,会自动把event对象作为参数传递给事件处理器,所以我们可以给事件处理器加一个参数,来接收这个event对象.

var mElement = document.getElementById("xx");
mElement.onclick = function(e){
<!-- TODO: 可以在这里使用e这个对象,这个e就是event对象 -->
}


微软方式

微软的方式,是给window对象设计了一个event属性,它包含最近一次被触发事件的细节.

var mElement = document.getElementById("xx");
mElement.onclick = function(e){
<!-- TODO: 使用window的event对象 -->
alert(window.event.type);
<!-- 这里还在参数列表中设置一个参数e,是为了判断e是否存在,如果e不存在,则说明是微软方式,否则是W3C方式. -->
}


尴尬的是

微软方式和W3C方式中event对象包含的属性还不同,所以在使用某一个属性之前,还应该先判断一下event对象中是否有该属性.

列出onclick事件的属性

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>点击事件中属性示例</title>
<script type="text/javascript">
function gogo() {
window.document.getElementById("showBtn").onclick = function(e) {
var showResult = "";
if(!e) {
alert("e is false");
e = window.event;
}
for(i in e) {
showResult += i + ":" + e[i] + "<br />";
}

window.document.getElementById("showPropertyDic").innerHTML = showResult;
}
}

window.onload = gogo;
</script>

</head>

<body>
<input type="button" id="showBtn" value="查看event对象的属性" />
<div id="showPropertyDic"></div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航