<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
/*
基本事件模型处理方式是被广泛使用到浏览器中的。
基本事件处理模型的形式主要通过事件属性来设计的。
事件属性 触发时间 支持元素
onbort 图像加载时中断 img、object
onblur 元素失去焦点 button、input、label、select、textarea、body
onchange 用户改变域的内容 input、select、textarea
onclick 鼠标点击某个元素 大部分元素
ondbclick 鼠标双击某个元素 大部分元素
onerror 当加载图像时发生某个错误 img、object
onfocus 元素获得焦点 button、imput、label、select、textarea、body
onkeydown 某个键盘的按键被按下的时候 所有的表单元素、body
onkeypress 某个键盘的按键被按下并释放 所有的表单元素、body
onkeyup 某个键盘的按键被松开 所有的表单元素、body
onload 文档或图像加载完毕 body、frameset、iframe、img、object
onmousedown 某个鼠标按键被按下 大部分元素
onmousemove 鼠标被移动 大部分元素
onmouseout 鼠标从某个元素移开 大部分元素
onmouseover 鼠标移动到某个元素之上 大部分元素
onmouseup 某个鼠标按键松开 大部分元素
onreset 表单被重置 form
onresize 窗口或框架被调整尺寸 body、frameset、iframe
onselect 文本被选中 input、textarea
onsubmit 表单被提交 form
onunload 卸载文档或框架集 body、frameset、iframe
事件绑定的两种方式:静态绑定和动态绑定
*/
</script>
</head>
<body>
<!--静态绑定-->
<button onclick="alert('按钮1被点击了一次!');">按钮1</button>
<!--动态绑定-->
<button id="btn">按钮2</button>
<script>
var button = document.getElementById("btn");
button.onclick = function(){
alert("按钮2被点击了一次");
}
</script>
</body>
<body>
<!--
事件处理是一种异步响应行为,事件处理函数从来不会明确要求返回值,就会发生默认的动作。不过,用户可以利用时间处理函数返回值来设置下一步的操作,如执行或禁止默认操作。
-->
<!--当文本框输入的为空,定义事件处理函数返回值为false由于该返回值为false将强制表单禁止提交函数-->
<form id="from1" name="from1" method="post" action="http://www.mysite.cn"
onsubmit="if(this.elements[0].value.length==0) return false;">
姓名:
<input id="user" name="use" type="text"/>
<input type="submit" name="btn" id="btn" value="提交"/>
</form>
</body>
<body>
<button id="btn">按钮</button>
<script>
var button = document.getElementById("btn");
button.onclick = function(e){
var e = e || window.event; //兼容标准模型和IE模型的Event获取方式
document.write(e.srcElement ? e.srcElement : e.target); //兼容标准模型和IE模型的Event获取方式
//[object HTMLButtonElement]
}
/*
IE事件模型和标准事件模型对Event对象的处理方式不同,IE把Event对象作为Window对象的一个属性来定义,而
标准模型把Event作为一个默认参数来定义。所以在处理event参数时,应该判断event在当前解析环境中的状态。如果当
前浏览器支持,则使用event(标准模型);如果不支持,则说明当前环境时IE浏览器,通过window.event获取event
event.srcElement表示当前事件的源,即响应时间的当前对象。但是标准模型不支持该方法,需要使用Event对象的
target属性,他是一个符合标准的源的属性。
*/
</script>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
/*
btn1中的this指向的并不是事件对象按钮,而是指向wendow对象,所以使用提示引用当前对象就是错的
*/
function btn1(){
this.style.background = "red";
}
function btn2(event){
event = event || window.event;
var src = event.srcElement ? event.srcElement : event.target;
src.style.background = "red";
}
/*
为了能够准确的获取当前对象事件,在第二个按钮click事件处理函数中,直接把event传递给btn2,如果不传递
参数,支持浏览器模型的浏览器就会找不到event对象。
*/
</script>
</head>
<body>
<button id="btn1" onclick="btn1()">按钮1</button>
<button id="btn2" onclick="btn2(event)">按钮2</button>
</body>
在这里插入代码片