Javascript 事件入门

最新推荐文章于 2024-04-25 20:29:33 发布

Agrass啊草

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量464

点赞数 1

文章标签： javascript 事件测试

本文链接：https://blog.csdn.net/unaMattin/article/details/52829652

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件入门</title>
</head>
<body>
<form>
<input type="submit" value="提交" >
</form>
<input type="text" value="文本" >
<input type="button" value="按钮" οnclick="alert('已经提交了')">
</body>
<script>
//鼠标事件
var input=document.getElementsByTagName("input")[0];
// input.οnclick=function(){ alert('Lee');};
// input.οndblclick=function(){ alert('Lee');};
// input.οnmοusedοwn=function() { alert('Lee');};
// input.οnmοuseup=function(){ alert('Lee'); };
// input.οnmοuseοver=function(){ alert('Lee');};
// input.οnmοuseοut=function(){ alert('Lee'); };
// input.οnmοusemοve=function() { alert('Lee');};

//键盘事件
// οnkeydοwn=function(){ alert('Lee'); };
// οnkeypress= function(){ alert('Lee'); };
// οnkeyup=function() { alert('Lee'); };

//HTM事件
// window.οnlοad=function() { alert('Lee');};
var input=document.getElementsByTagName("input")[1];
// input.οnselect=function(){ alert('Lee');};
// input.οnchange=function(){ alert('Lee');};
// input.οnfοcus= function(){ alert('Lee');};
// input.οnblur=function(){ alert('Lee'); };
var form=document.getElementsByTagName("form")[0];
// form.οnsubmit=function(){ alert('Lee'); };
// window.οnscrοll=function() { alert('Lee');};

/*
内联模型：
这种是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的，并没有与 HTML 分离。
//在 HTML 中把事件处理函数作为属性执行 JS 代码
<inputtype="button"value="按钮"οnclick="alert('哈哈哈');" /> //注意单双引号

//在 HTML 中把事件处理函数作为属性执行 JS 函数
function box(){
alert("我被点击了")
};
<input type="button"value="按钮"οnclick="box();" /> //执行 JS 的函数
PS：函数不得放到 window.onload 里面，这样就形成闭包看不见了。

脚本模型：
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。
var input=document.getElementsByTagName("input")[0];
//对象.事件处理函数.函数名或者匿名函数
input.οnclick=function(){
alert("你点击了")
}；

function box(){
alert("你点击了");
};
input.onclick = box; //~~box( );~~
通过赋值的方式，让事件处理函数执行一个函数，~~box( )~~赋值时box后面不能加（），否则就自动执行了。

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件：

1.鼠标事件，页面所有元素都可触发
click：当用户单击鼠标按钮或按下回车键时触发。 input.οnclick=function(){ alert('Lee');};
dblclick：当用户双击主鼠标按钮时触发。 input.οndblclick=function(){ alert('Lee'); };
mousedown：当用户按下了鼠标还未弹起时触发。 input.οnmοusedοwn=function() { alert('Lee');};
mouseup：当用户释放鼠标按钮时触发。 input.οnmοuseup=function(){ alert('Lee');};
mouseover：当鼠标移到某个元素上方时触发。 input.οnmοuseοver=function(){ alert('Lee');};
mouseout：当鼠标移出某个元素上方时触发。 input.οnmοuseοut=function(){ alert('Lee'); };
mousemove：当鼠标指针在元素上移动时触发。 input.οnmοusemοve=function() { alert('Lee');};

2.键盘事件
keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。οnkeydοwn=function(){ alert('Lee');};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。 οnkeypress= function(){ alert('Lee');};
keyup：当用户释放键盘上的键触发。 οnkeyup=function() { alert('Lee'); };

3.HTM事件
load：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。

window.οnlοad=function() { alert('Lee'); };;
select：当用户选择文本框(input 或 textarea)中的一个或多个字符触发。

input.οnselect=function(){ alert('Lee'); };
change：当文本框(input 或 textarea)内容改变且失去焦点后触发。 input.οnchange=function(){ alert('Lee');};
focus：当页面或者元素获得焦点时在 window 及相关元素上面触发。 input.οnfοcus= function(){ alert('Lee');};
blur：当页面或元素失去焦点时在 window 及相关元素上触发。 input.οnblur=function(){ alert('Lee');};
submit：当用户点击提交按钮在<form>元素上触发。 form.οnsubmit=function(){ alert('Lee');};
scroll：当用户滚动带滚动条的元素时触发。 window.οnscrοll=function() { alert('Lee');};

*/
</script>
</html>