一丶鼠标事件
事件名称 | 定义和用法 | 语法 | 注释 |
---|
onclick | 在对象被点击时发生 | οnclick=“js代码” | |
onmouseover | 在鼠标移动到对象时发生 | οnmοuseοver=“js代码” | |
onmouseout | 在鼠标移出对象时发生 | οnmοuseοut=“js代码” | |
onmouseup | 在鼠标按键被松开时发生 | οnmοuseup=“js代码” | |
onmousemove | 鼠标在对象上移动时发生 | οnmοusemοve=“js代码” | |
onmousedown | 在鼠标按键被按下时发生 | οnmοusedοwn=“js代码” | |
onload | 在页面元素加载完成后立即发生 | οnlοad=“js代码” | |
onblur | 在对象失去焦点时发生 | οnblur=“js代码” | 主要用于表单中 |
onfocus | 在对象获得焦点时发生 | οnfοcus=“js代码” | 主要用于表单中 |
onchange | 在域的内容改变时发生 | οnchange=“js代码” | 主要用在标签 |
onsubmit | 在表单中的确定按钮被点击时触发 | οnsubmit=“js代码” | 主要用在标签 |
onresize | 在窗口大小被调整时发生 | οnresize=“js代码” | 主要用在window上 |
onscroll | 在滚动条被拖动时触发 | οnscrοll=“js代码” | |
onclick
和onmouseover
和onmouseout
<input type="button" value="弹 出" onclick="alert('我是按钮')">
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
<script>
function mouseoverFn(btn,bgColor){
btn.style.background=bgColor;
}
function mouseoutFn(btn,bgColor){
btn.style.background=bgColor;
}
</script>
上述方法直接写在html中,当绑定元素过多显得臃肿,复杂,我们应该使用下面的方法
var btn=document.getElementById("btn");
function clickBtn(){
alert("我是按钮");
}
btn.onclick=clickBtn;
onload
在页面DOM加载结束后执行,把js写在head中要使用,因为页面还没有获取到body,所以js会出错
window.onload=function(){}
<script>
window.onload=function(){
var phone=document.getElementById("phone"),
tip=document.getElementById("tip");
phone.onfocus=function(){
tip.style.display='block';
}
phone.onblur=function(){
var phoneVal=this.value;
if(phoneVal.length==11 && isNaN(phoneVal)==false){
tip.innerHTML='<img src="img/right.png">';
}else{
tip.innerHTML='<img src="img/error.png">';
}
}
}
</script>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号码">
</div>
<div class="tip" id="tip">
请输入有效的手机号码
</div>
</div>
<script>
window.onload=init;
function init(){
var menu=document.getElementById("menu");
menu.onchange=function(){
var bgcolor=menu.options[menu.selectedIndex].value;
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
<div class="box">
请选择您喜欢的背景色:
<select name="" id="menu">
<option value="">请选择</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
<option value="#ff0">黄色</option>
<option value="#ccc">灰色</option>
</select>
</div>
二丶键盘事件
事件名称 | 定义和用法 | 语法 | 注释 |
---|
onkeydown | 事件会在用户按下一个键盘按键时发生 | οnkeydοwn=“” | |
onkeypress | 事件会在键盘按键被按下并释放一个键时发生 | οnkeypress=“” | |
onkeyup | 事件会在键盘按键被松开时发生 | οnkeyup=“” | |
keyCode | 获得按下的键盘按键的字符代码 | event.keyCode | 返回键盘事件触发的键的字符代码,配合 |
键盘事件使用 | | | |
<div>
<p class="text">
<b id="showcount">您还可以输入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
var text=document.getElementById("text");
var total=30;
var count=document.getElementById("count");
var showcount=document.getElementById("showcount");
var totalbox=document.getElementById("totalbox");
document.onkeyup=function(){
var len=text.value.length;
var allow=total-len;
var overflow=len-total;
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您还可以输入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
}
</script>
三丶事件的执行脚本
- ele.onclick = function () { 执行脚本 };
- ele.onclick = fn;
function fn () { 执行脚本 };