javaScript常见事件

javaScript常见的鼠标键盘事件：

事件的三要素：元素，事件类型 [事件对象]

事件对象的作用：携带着相关事件类型的所有属性和方法

鼠标事件对象的属性

page:针对于整个页面的左顶点（常用）

console.log(“page:” + e.pageX, e.pageY);

client:针对于可视窗口的左顶点9

console.log(“client:” + e.clientX, e.clientY);

offset:针对于父级元素的左顶点（用于拖拽）

console.log(“offset:” + e.offsetX, e.offsetY);

当浏览器没有滚动条时（可视窗口与文档窗口重合），pageX与clientX相等，pageX与clientY相等，如果出现下拉滚动条并向下拉动滚动条，文档窗口向上滚动，如果出现左右滑动的滚动条并向右拉动滚动条，文档窗口向左滚动，在文档窗口滚动的情况下，pageX>=clientX, pageY>=clientY, x = clientX, y = clientY,

通常情况下，键盘事件的事件元素都是document

按键弹起的时刻触发

document.onkeyup = function(){
console.log("heihei");
}

按下按键时触发

document.onkeydown = function() {
console.log("heihei");
}

生成一个字符时触发

document.onkeypress = function() {
console.log("heihei");
}

event对象代表事件的状态，跟事件相关的一系列信息的集合，写到函数的小括号中，当形参来看，事件对象只有有了事件才会存在，是系统自动创建，不需要传递参数，事件对象可以自己命名，比如event、evt、e

console.log(document);
console.log(event);

事件对象的产生，必须有事件

document.onclick = function() {
console.log(event);
}
document.onkeypress = function() {
console.log(event);
};

事件对象获取的兼容写法：

document.onclick = function(evt) {
var e = evt || event;
console.log(e);
} 

获得录入的字符的ASC码值

console.log(String.fromCharCode(e.keyCode));
console.log(e.which);
console.log(e.charCode);

兼容性写法

var key = e.keyCode || e.which || e.charCode;
console.log(key);

判断ctrl是否被按下

console.log(e.ctrlkey);

事件流：

当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发

冒泡：子->父

捕获：父->子

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

e.stopPropagation();
e.cancelBubble = true;

兼容写法

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

阻止浏览器默认行为

e.preventDefault();
e.returnValue = false;

兼容写法

e.preventDefault ? e.preventDefault() : e.returnValue = false;
return false;

事件绑定的三种方式：

a.通过HTML元素直接绑定

b.通过js对象绑定

缺陷：

1，无法为同一元素多次绑定相同的事件

2，无法决定事件流为冒泡还是捕获

c.事件的监听

事件元素.addEventListener(去掉on的事件名，回调函数，[捕获还是冒泡]) /

默认false为冒泡，true为捕获

好处1，可以为同一元素多次绑定相同的事件

document.addEventListener("click", function() {
    alert(1);
});
document.addEventListener("click", function() {
    alert(2);
});

好处2，可以决定事件流是冒泡还是捕获

document.addEventListener("click", function() {
     alert("document");
}, true);
window.addEventListener("click", function() {
     alert("window");
}, true);

结论：先捕获后冒泡

事件的解绑

通过js的方式进行解绑

document.onclick = function() {
     alert(1);
 }
document.onclick = null;

对监听事件进行解绑

var fun = function() {
   alert(1);
}
document.addEventListener("click", fun);
document.removeEventListener("click", fun);

事件委托（事件代理）

委托：子元素的事件由父元素实现（依赖于事件冒泡）

好处1，可以批量的为子元素通过父元素绑定事件，提高程序运行效率

常规方法绑定li高亮效果

var oLis = document.getElementsByTagName("li");
     for (var i = 0; i < oLis.length; i++) {
       oLis[i].onclick = function() {
          this.style.backgroundColor = "hotpink";
     }
}

委托实现li的绑定

var oUl = document.querySelector("ul");
    oUl.onclick = function(evt) {
     这里不能直接用this
      //this.style.backgroundColor = "hotpink";
        var e = evt || event;
        获取真实的操作元素(事件源)
        var target = e.target || e.srcElement;
        tagName真实操作元素的名字,用大写表示
        console.log(target, target.tagName);
        if (target.tagName == "LI") {
            target.style.backgroundColor = "hotpink";
        }
}

e.target可以得到我们点击的对象

好处2，可以为未来添加的元素提前绑定事件

window.onscroll = function() {
console.log("heihei");
兼容性获取滚动条高度
读
var _top = document.body.scrollTop || document.documentElement.scrollTop;
console.log(_top);
}
    var oBtn = document.querySelector("button");
    oBtn.onclick = function() {
        //写
        document.body.scrollTop = document.documentElement.scrollTop = 0;
}