一、默认事件
阻止默认事件，主流浏览器使用preventDefault()，IE8及其以下，设置returnValue属性，false取消默认事件，true不取消默认事件。
document.onselectstart = function(e) {
e = e || window.event;
//取消默认行为
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
console.log('文本选中')
};
document.oncontextmenu = function(e){
e = e || window.event;
//取消默认行为
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
console.log('右键菜单')
}
二、滚轮事件
- IE/Chrome使用
onmousewheel，滚轮属性event.wheelDelta，向上为120，向下为-120。 - Firefox使用
DOMMouseScroll，必须使用addEventListener()添加，滚轮属性event.detail向上为-3，向下为3。
//鼠标滚轮事件
function mousewheelEvent(ele,fn,boole){
//判断是否为IE浏览器
if(ele.addEventListener){
//判断是否为火狐浏览器
if(ele.onmousewheel === undefined){//火狐
ele.addEventListener('DOMMouseScroll',fn,boole);
}else{//谷歌
ele.addEventListener('mousewheel',fn,boole);
}
}else if(ele.attachEvent){//ie浏览器
ele.attachEvent('onmousewheel',function(){
fn.call(ele);
});
}
}
mousewheelEvent(document,function(){
console.log(this);
});
三、表单事件
- 获取焦点事件，
onfocus获取焦点事件<input>、<textarea>以及<select><a/>元素。
obj.focus() //给指定的元素设置焦点，主动触发。
- 失去焦点事件，
onblur失去焦点事件<input>、<textarea>以及<select><a/>元素。
obj.blur() //取消指定元素的焦点，主动触发。
-
onchange内容改变触发<input>、<textarea>以及<select>元素。 -
onsubmit提交事件，submit()提交表单 。 -
onreset重置事件，reset()重置表单。
var oForm = document.querySelector('.user-reg'),
oUserName = oForm.querySelector('input[name=username]'),//使用css选择器的方式获取
oPassword = oForm.querySelector('input[name=psw]'),
oNum = oForm.querySelector('input[name=num]'),
oDes = oForm.querySelector('textarea'),
oLike = oForm.querySelector('select'),
oBtnBox = oForm.querySelector('.form-btn'),
oBtns = oBtnBox.querySelectorAll('button');
//监听一个获取焦点事件
oUserName.addEventListener('focus',function(){
console.log('获取焦点');
//this.value 就是input控件输入的值
if(this.value.length >= 10){
//主动失去焦点
}
});
oUserName.focus();//主动触发
//失去焦点事件
oUserName.addEventListener('blur',function(){
console.log('失去焦点');
});
//监听年龄的改变事件
oNum.addEventListener('change',function(){
//年龄必须是数字
if(parseInt(this.value)){
this.value = parseInt(this.value);
}else {
this.value = 0;
alert("请输入整型");
}
//this.value = parseInt(this.value) || 0;
console.log('改变事件');
});
//提交事件
oForm.addEventListener('submit',function(e){
//取消默认行为
e.preventDefault();
console.log('提交了');
});
//重置事件
oForm.addEventListener('reset',function(e){
//取消默认行为
e.preventDefault();
console.log('重置表单')
});
四、键盘事件
- 不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件，
document能够响应。 -
keydown：用户在键盘上按下某按键时发生，一直按着某按键则会不断触发（opera浏览器除外）。 -
keypress：用户按下一个按键，并产生一个字符时发生（也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。 -
keyup：用户释放某一个按键时触发。 -
event.keyCode: 数字类型，键盘按键的值，键值。 -
ctrlKey,shiftKey,altKey布尔值，当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false。
//键盘按下
oDes.addEventListener('keydown',function(){
console.log('键盘按下');
console.log(e.keyCode);
});
//键盘输入
oDes.addEventListener('keypress',function(){
console.log('键盘输入')
});
//键盘释放
document.addEventListener('keyup',function(e){
console.log('文档键盘松开');
});
五、事件委托
-
e.target主流浏览器下，触发事件最底的标签节点，返回的即使一个标签节点。 -
e.srcElementIE浏览器下。
var index = null;
var oBox = document.querySelector('.box');
oBox.onclick = function(e) {
e = e || window.event;
//不存在就证明是ie
if(e.target === undefined){
e.target = e.srcElement;
}
//是li标签节点就添加class类名
if(e.target.nodeName == 'LI'){
if(index != null){
index.className = '';
}
e.target.className="on";
index = e.target;
}else{
console.log('不是li标签');
}
}
