JS(五)DOM模型之常用事件

最新推荐文章于 2024-04-24 09:22:16 发布

诗未冷

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量740

点赞数 1

文章标签： javascript 事件

本文链接：https://blog.csdn.net/z18789231876/article/details/43792861

版权

PHP 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、事件

1.使用onclick属性设置点击事件

2.js dom分配事件

3.鼠标事件

4.焦点事件

5.内容改变事件

二、示例

1.属性点击事件和dom分配点击事件

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <button id="btn1" οnclick="clickBtn()">按钮1</button>
    <button id="btn2">按钮2</button>
</body>
<script type="text/javascript">
/**
 * 直接设置点击事件=>onclick属性
 */
function clickBtn(){
	document.getElementById("btn1").innerHTML="要弹出对话框";
	alert("你点击了按钮1");
	document.getElementById("btn1").innerHTML="关闭对话框";
}
/**
 * js dom 分配点击事件
 */
document.getElementById("btn2").οnclick=function(){
	alert("你点击了按钮2");
	//clickBtn2();//这种也可以
};
function clickBtn2(){
	alert("你点击了按钮2");
}
</script>
</html>

2.onload和onunload事件

它们分别在用户进入页面和离开页面时触发。

onload事件：可用于检测浏览器的类型和版本，以基于此来加载网页的正确版本。

onload和onunload事件：可结合用于处理cookie。

一般在body元素中使用它们。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
</head>
<body οnlοad="checkCookies()">
	<script>
        function checkCookies(){
     	   if(navigator.cookieEnable){
                alert("已经启用cookie");
            }else{
                alert("没有启用cookie");
            }
        }
        function exit(){
            alert("离开页面");
        }
    </script>
    <p>提示是否启用cookie</p>
</body>
</html>

3.onchange事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
</head>
<body οnlοad="checkCookies()">
	<script>
        function myFunction(obj){
        	obj.value=obj.value.toUpperCase();
        }
        function myFunction2(){
            var ele_input = document.getElementById("text1");
            ele_input.value = ele_input.value.toUpperCase();
        }
    </script>
    <p>输入框内容发生变化时触发该事件</p>
    <input  type="text" name="input1" οnchange="myFunction(this)"/><br/>
    <input type="text" name="input2" id="text1" οnchange="myFunction2()" />
</body>
</html>

4.鼠标全部事件

<
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
<style type="text/css">
#div1 {
    width:1500px;
	height:500px;
    font-size:20px;
	color:white;
}
</style>
<script type="text/javascript">
/**
 * 鼠标全部事件
 * 鼠标指针滑过和离开区域事件
 * 鼠标点击过程分析(响应顺序)：onMouseDown->onClick->onMouseUp
 */
function mouseOver(obj){
    obj.style.background="red";
}
function mouseOut(obj){
    obj.style.background="white";
}
function mouseUp(){
	document.getElementById("image").src="header.jpg";
}
function mouseDown(){
	document.getElementById("image").src="header1.jpg";
}
function mouseClick(obj){
    alert("点击事件");
}
</script>
</head>
<body>
<!-- 这里的onmouseover等方法大小写无所谓，都可以，js对大小写不敏感 -->
	<div id="div1"  οnmοuseοver="mouseOver(this)" οnmοuseοut="mouseOut(this)" οnmοusedοwn="mouseDown()" οnmοuseup="mouseUp()" οnclick="mouseClick(this)">
		<img id="image" src="header.jpg" />
	</div>
</body>
</html>

<h1 οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">
请把鼠标移到这段文本上
</h1>

5.焦点事件onfocus、onblur

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta content="text/css" charset="utf-8"/>
        <script>
        function myFunction(obj){
            obj.style.background="YELLOW";
        }
        function myFunction2(obj){
            obj.style.background="WHITE";
        }
        </script>
    </head>
    <body>
        <input type="text" name="username" οnfοcus="myFunction(this)" οnblur="myFunction2(this)"/>
        <input type="text" name="pwd" οnfοcus="myFunction(this)" οnblur="myFunction2(this)"/>
    </body>
</html>

6.其余事件

还有很多事件，具体参考：http://www.w3school.com.cn/jsref/dom_obj_event.asp

诗未冷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS(五)DOM模型之常用事件

一、事件1.使用onclick属性设置点击事件2.js dom分配事件3.鼠标事件4.焦点事件5.内容改变事件二、示例1.属性点击事件和dom分配点击事件按钮1 按钮2/** * 直接设置点击事件=>onclick属性 */function clickBtn(){ document.getElementById("bt
复制链接

扫一扫