admin 管理员组

文章数量: 887007

JS event、滚轮事件、冒泡事件、监听事件、键盘事件

1、event事件

event英文：事件

当事件触发的时候，会产生对象，这个对象存储着和事件相关的信息，这个对象就是event事件对象

有有一定的兼容性

/* event 存放在函数的第一个参数里面 */
/* IE8及其以下不兼容 */
document.onclick = function(e){console.log(e);
}
​
/*兼容所有 */
docuemt.onclik = function(){console.log(window.event); //也兼容火狐
}
/* 兼容封装 */
document.onclik = fucntion(e){var e = e || window.event;
}
/* 存储鼠标相对于窗口的位置 
相对于窗口e.clientX   相对于窗口x轴的位置e.clientY   相对于窗口y轴的位置
相对于文档(当滚动变的时候，相对位置也会变)  --不能兼容IE8及其以下e.pageXe.pageY
*/
document.onclick = function (e) {console.log(e.clientX);console.log(e.clientY);
}
document.onclick = function (e) {console.log(e.pageX);console.log(e.pageY);
}
/* 相对文档兼容封装 ie高度：e.clientY + document.documentElement.scrollTop宽度：e.clientX + document.documentElement.scrollLeft
*/
/* 兼容： */
function pageClient(){var x = e.clientX + document.Element.scrollLeft || e.pageY;var y = e.clientY + document.Element.scrollTop || e.pageX;
}

 

e.button 鼠标事件 0 ---- 鼠标左键 1 ----- 鼠标中键 2 ----- 鼠标右键

document.onclick = function (e){console.log(e.button);
}

e.keyCode(键值) 键盘按下事件

​ 会返回键盘上对应的键的键值，不是码

document.onkeydown = function (ev){console.log(ev.keyCode);
}

 

2、其他一些事件

屏蔽右键菜单

document.oncontextmenu = function(){return false;
}

屏蔽选中复制

document.onselectstart = function (ev){return false;
}

在html标签里可以这样写：

CSS3的写法：只兼容谷歌浏览器

 

3、表单事件

input的属性 ---- checked 在JS里面默认是false

<label><input type="checkbox" checked>芒果</label><!--默认选中 不兼容火狐 -->
<label><input type="checkbox">菠萝</label>
<label><input type="checkbox">哈密</label>
<label><input type="checkbox">香肠</label>
<label><input type="checkbox">烤肉</label>
<script>var aPut = document.querySelectorAll('input');console.log(aPut[0].checked);//trueconsole.log(aPut[1].checked);//falseaPut[1].checked = 'ch'; // 隐式类型转换console.log(aPut[1].checked);//true 
</script>

失去焦点 onblur

​ obj.blur() --- 自动失去焦点

获取焦点 onfocus

​ obj.focus() --自动获取焦点

用户名：<input type="text">
<script>var oPut = document.querySelector('input');oPut.focus();//自动获取焦点oPut.blur();//自动失去焦点
</script>

4、操作下拉列表

select

在select下面的option属性，包含了select下面所有的option标签，所以是一个类数组，

selectedIndex 被选中的option对应的索引值

<select><option value="列表1"></option><option value="列表2"></option><option value="列表3"></option>
</select>
<script>/* 动态获取select选中的内容 */oSele.onchange = function () {console.log(this.value);console.log(this.options[this.selectedIndex].innerHTML);//获取选中的内容}
</script>

5、滚轮事件

鼠标的滚轮事件：鼠标滚动时触发，无论向上滚还是向下滚

/* 鼠标滚动时触发跟浏览器的高度无关，只要鼠标滚轮滚动就会触发事件
*/
document.onmousewheel = function(){ //不兼容火狐console.log(1);
}
​/* 火狐浏览器 */
document.addEventListener('DOMMouseScroll',function () {console.log('滚轮');
})
​
/* 滚轮事件兼容 */
function mouseWheel(obj,fn){obj.onmousewheel === null? obj.onmousewheel = fn:obj.addEventListener('DOMMouseScroll',fn);
}

event里的滚动事件

​ e.wheeDelta -- 兼容谷歌150，-150、IE 向上滚120 向下滚 -120

​ e.detail ---兼容火狐 向上-3 向下3

/* 兼容 向上1 向下-1可以用第三方变量来计数，来检测滚了多少次
*/
mouseWheel(document,function (e) {var delta = parseInt(e.wheelDelta/120)||e.detail/3;console.log(delta);
})

6、事件冒泡

所谓的事件冒泡：

当执行的时候我们会发现，点击box3的时候会执行box2和box1的事件，

就好像从内到外冒泡

/* 解决冒泡问题 */
function(e){var e = e || window.event;e.canceBubble = true; //解决冒泡事件，兼容所有浏览器，但是不符合W3c标准//e.stopPropagation();//不兼容IE8及其以下，符合W3c标准alert(this.className);
}

 

7、添加事件监听

有利于代码的维护

oBox.addEventListener(去掉on的事件名，事件函数，布尔值（可不写，默认false）) --兼容主浏览器，不兼容IE8及其以下

IE：

​ obj.attachEvent ----- 这个方法已经不存在

/* 添加事件监听 */
oBox.addEventListener('click',function(){console.log('MS');
})
​
​
​
/* 兼容 */
function(obj,eName,eFn){obj.addEventListener?obj.addEventListener(eName,eFn):obj.attachEvent('on'+eName,eFn);
}

 

 

 

本文标签： JS event滚轮事件冒泡事件监听事件键盘事件

版权声明：本文标题：JS event、滚轮事件、冒泡事件、监听事件、键盘事件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732352502h1533481.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。