js事件对象相关随记
1.什么是事件
JavaScript事件是由访问Web页面的用户引起的一系列操作，
例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。2.事件的三种写法
//在HTML中把事件处理函数作为属性执行JS函数
<input type="button" value="按钮" onclick="alert('你好');" />
//执行与脚本分离
<input type="button" value="按钮" onclick="fn();" />
//分离的脚本
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
alert('你好');
};3.事件对象
一．事件对象
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。
包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
在非IE浏览器下，事件对象作为事件的参数，在IE下是window.event
//实现跨浏览器兼容获取event对象
input.onclick = function (evt) {
var e = evt || window.event;
alert(e);
};
二．事件对象的作用
1. 可视区及屏幕坐标
clientX 可视区X坐标，距离左边框的位置
clientY 可视区Y坐标，距离上边框的位置
screenX 屏幕区X坐标，距离左屏幕的位置
screenY 屏幕区Y坐标，距离上屏幕的位置
document.onclick = function (ev) {
var e = ev || window.event;
alert(e.clientX + ',' + e.clientY);
alert(e.screenX + ',' + e.screenY);
};
2.判断热键是否按下
像Shfit、Ctrl、Alt等，
shiftKey 判断是否按下了Shfit键
ctrlKey 判断是否按下了ctrlKey键
altKey 判断是否按下了alt键
metaKey 判断是否按下了windows键，IE不支持
eg：
<script>
window.onload = function(){
document.onkeydown = function(e){
if(e.ctrlKey){
alert("按下ctrl键")//按下ctrl键弹出 按下ctrl键
}
}
}
</script>
3.．判断键码
eg：
<script>
window.onload = function(){
document.onkeydown = function(e){
if(e.ctrlKey){
alert(e.keyCode)//按下ctrl键弹出17
}
}
}
</script>
4.阻止浏览器默认行为
参考下一节内容
5.阻止冒泡
参考下一节内容
6.事件委托
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，
那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同
的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添
加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运
行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览
器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什
么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就
会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大
大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，
自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果
是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就
可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们
就需要一个内存空间就够了
eg：
<body>
<ul id = "list">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<script>
var list = document.getElementById("list");
list.onclick = function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.tagName = "LI"){
for(var i = 0;i<list.children.length;i++){
list.children[i].style.background = "";
}
target.style.background = "blue";
}
}
</script>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.10.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
