JS13
this的使用
1.给一组元素绑定事件
for(var i = 0;
i
console.log(i);
this.style.backgroundColor=”red”;
}
}
2. 在元素内部通过事件属性使用
function change(ob){ob.style.color='red'}
事件列表
1.鼠标事件
1.onclick 单击
2.ondblclick 双击
3.oncontextmenu右击 --return false 阻止系统菜单弹出
自定义右键菜单
1.event对象
2.client.Xclient.Y
3.window.innerWidthwindow.innerHeight
4.document.documentElement.clientWidth;
5.document.documentElement.clientHeiht;
4.onmouseover 鼠标滑上元素 --导航条
5.onmouseout 鼠标移出元素
6.onmousedown 鼠标按下
box.onmousedown=function(en){
var env = en || window.event;
switch (env.button){
console.log(env.button);
}
}
7.onmouseup 鼠标抬起
8.onmousemove 鼠标移动
box.onmousemove=function(en){
var env = en || window.event;
//获取鼠标的坐标
var X = env.clientX;
var Y = env.clientY;
//获取box的位置--offsetLeft相对于定位的父级
var left= this.offsetLeft;
var top= this.offsetTop;
//得到鼠标在box上的位置
var x = X-left;
var y = Y-top;
}
2. 键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 键盘按下---可打印的(可见的)
document.onkeydown=function(en){
var e = en || window.event;
var char = String.fromCharCode(e.keyCode);
返回ASCII表的字母(大写)
}
3. 文档事件
onload 文档中的一切加载完成（可以使代码放在元素前面）
onunload 文档关闭的时候(w3c里有标准但是浏览器不支持)
onbeforeunload 文档关闭之前
body window的兼容和冲突
window.onload=function(){
alert(1);
};
浏览器支持较差
window.onbeforeunload = function(){
return "别走";
//页面刷新的时候提醒
}
4. 表单事件
1.onsubmit --- 提交
document.myForm.onsubmit=function(){
return false;
不提交
//return true;
提交
}
2.onreset --- 重置
doucment.myform.onreset=function(){
return false ;
不重置
//return true;
重置
}
3.onfocus -- 获取焦点
inp.onfocus=function(){
this.style.backgroundColor='blue';
}
4.onblur ---失去焦点
使用onblur验证表单（提高用户体验）
5.onchange ---内容发生改变(失去焦点)
input.onchange = function(){
document.getElementById('box').innerHTML = this.value;
}
实例：地址联动
6.onselect ---当内容被选择(表单)
textarea.onselect = function(){
alert('选中了');
}
5. 图片事件
onload ---加载完成
文章图片
onerror ---加载失败
img.onerror = function(){this.src = "https://www.it610.com/article/error.jpg";
}
【JS13】onabort ---加载中断
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量