js基本事件类型

最新推荐文章于 2024-03-25 14:32:41 发布

成_蹉_跎

最新推荐文章于 2024-03-25 14:32:41 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： js 基本事件模型

本文链接：https://blog.csdn.net/cheng_cuo_tuo/article/details/86686209

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<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>

在这里插入代码片

成_蹉_跎

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js基本事件类型

&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;script&gt;/* 基本事件模型处理方式是被广泛使用到浏览器中的。基本事件处理模型的形式主要通过事件属性来设计的。事件属性
复制链接

扫一扫