小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端设计师,从事过网站建设,响应式网站开发,网络维护,SEO,SEM,网络推广等前端相关工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:[email protected]

Q Q:32362389

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:[email protected]

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:[email protected]

Q Q:97157726

标签云

最新发布

JS事件3要素 【重要】

分类: 原生JS评论(1)64个赞

javascript很多效果都是由事件三要素构成,了解其原理非常重要,即:


1、事件源(用谁去触发这个事)

一般为名词,即事件的发起者


2、事件(如何发生这件事)

一般为动词,如鼠标经过,点击后,按键盘等


3、事件处理程序(发生了什么事)


语法:


事件源.事件 = function(){ 事件处理函数 }


例:blob.png

事件源:改变宽度按钮

事件:点击

事件处理程序:黑色盒子宽度改变


源码:

<!DOCTYPE html>    
<html>    
<head lang="en">    
<meta charset="UTF-8">    
<title></title>    
<style>    
#demo {    
width: 200px;    
height: 200px;    
background-color:#000; 
float:left;   
}    
button {
float:left;
}
</style>    
</head>    
<body>    
<div id="demo"></div>    
<button id="btn">改变宽度</button>    
<script>    
/*要操作先找人*/    
var demo = document.getElementById("demo");  //获得id为demo的div盒子给demo    
var btn = document.getElementById("btn"); // 获得按钮    
/*事件三要素*/    
/*事件源.事件 = fucntion(){}*/    
btn.onclick = function(){    
demo.style.width = "400px";    
}    
</script>    
</body>    
</html>



备注:

事件汇总:

属性当以下情况发生时,出现此事件FFNIE
onabort图像加载被中断134
onblur元素失去焦点123
onchange用户改变域的内容123
onclick鼠标点击某个对象123
ondblclick鼠标双击某个对象144
onerror当加载文档或图像时发生某个错误134
onfocus元素获得焦点123
onkeydown某个键盘的键被按下143
onkeypress某个键盘的键被按下或按住143
onkeyup某个键盘的键被松开143
onload某个页面或图像被完成加载123
onmousedown某个鼠标按键被按下144
onmousemove鼠标被移动163
onmouseout鼠标从某元素移开144
onmouseover鼠标被移到某元素之上123
onmouseup某个鼠标按键被松开144
onreset重置按钮被点击134
onresize窗口或框架被调整尺寸144
onselect文本被选定123
onsubmit提交按钮被点击123
onunload用户退出页面123

本站内容均为小米原创,转载请注明出处:小米技术社区>> JS事件3要素 【重要】

'); })();