JavaScript：从事件对象到键盘事件

一、事件对象

eventTarget.onclick = function (event) {}
eventTarget.addEventListener('click',function (event) {})

1.event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态，大概就是事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

2.事件对象只有有了事件才会存在，它是系统自动创建的，不需要我们传递参数，比如鼠标点击，里面就包含了鼠标的相关信息，像鼠标坐标，如果是键盘事件，里面就包含了键盘事件的信息，像判断用户按下了哪个键

3.这个事件对象我们可以自己命名，比如event，eve，e

4.这个也有兼容性问题 ie678通过window.event,兼容性写法 e= e||window.event

二、事件对象常见的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象    标准
e.srcElemnet	返回触发事件的对象    非标准  ie6-8使用
e.type	返回事件的类型  比如click mouseover 不带on
e.cancleBubble	该属性阻止冒泡  非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为）标准 比如不让链接跳转
e.stopPropagation()	阻止冒泡  标准

1.比较理解e.target和this：返回触发事件的对象

e.target返回的是触发事件的对象（元素），this返回的是绑定事件的对象（元素）

var ul = document.querySelector('ul');
var li = document.querySelector('li');
ul.addEventListener('click', function (e) {
     console.log(e.target);;
     console.log(this);
})

此时e.targe返回li，this返回ul 

 2.e.type：返回事件类型

e.type返回事件类型

 var div = document.querySelector('div');
div.addEventListener('click', fun)
function fun(e) {
    console.log(e.type);
}

返回事件类型click，也可以加别的时间类型，像mouseover

3.比较理解e.preventDefault和e.returnValue：阻止事件对象默认行为

var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();//dom标准写法
})

//传统的注册方式
a.onclick = function (e) {
  //普通浏览器   e.preventDefault(); 方法
   e.preventDefault();
  //传统浏览器   e.returnValue;  属性
   e.returnValue;
  //没有兼容性问题 return false 特点就是return后面的代码不执行
   return false;
}

可以阻止事件对象默认行为，例如点击链接不跳转

e.preventDefault()-->方法，适用于普通浏览器

e.returnValue-->属性，适用于ie678

return false-->没有兼容性问题，特点：return后面的代码不执行，而且只限于传统的注册方式

4.比较理解e.stopPropagation()和e.cancleBubble：阻止事件冒泡

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

阻止事件冒泡：

• 标准写法：e.stopPropagation()
• 非标准写法：e.cancleBubble

标准写法： 

var son = document.querySelector('.son');
son.addEventListener('click', function (e) {
    alert('son');
    e.stopPropagation();
}, false);

 非标准写法：

var son = document.querySelector('.son');
son.addEventListener('click', function (e) {
    alert('son');
    e.cancelBubble = true;
}, false);

 这些可以阻止冒泡，不去执行上一级绑定的事件

三、事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派

原理：给事件父节点设置事件监听器，利用冒泡原理影响设置每个子节点

案例：点击元素调出对应的对话框，尽可能少设置事件

var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
   e.target.style.backgroundColor = 'pink';
}, false)

四、常用的鼠标事件

1.鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

再扩充两个鼠标事件：

(1)禁止鼠标右键菜单contextmenu

主要控制该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e)
{
    e.preventDefault();
})

(2)禁止鼠标选中（selectstart开始选中）

document.addEventListener('selectstart',function(e)
{
    e.preventDefault();
})

2.鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要用鼠标事件对象MouseEvent和键盘事件KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的x坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

(1)client，以可视区为准，移动页面后，再点击此处坐标不变

(2)page，以页面文档为准，移动页面后，再点击此处纵坐标变

(3)screen，以电脑屏幕为准

案例：跟随鼠标的天使

css：

img {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50px;
}

HTML：

JavaScript：

var img = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
    var x = e.pageX;
    var y = e.pageY;
    img.style.left = x + 'px';
    img.style.top = y + 'px';
})

 五、常用的键盘事件

1.键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发  但是不识别功能键，如Ctrl shift键

注意：如果使用addEventListener不用加on 

//弹起时
document.addEventListener('keyup', function (e) {
   console.log(111);
})
//按下时
 document.addEventListener('keydown', function (e) {
   console.log(222);
})
//弹起时
document.addEventListener('keypress', function (e) {
   console.log(333);
})

三个事件的执行顺序：keydown->keypress->keyup

2.键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCLL值

注意：

1.我们的onkeyup和onkeydown不区分大小写，a和A得到的都是65，onkeypress区分大小写

2.实际开发中，更多使用keydown和keyup，能是捏所有键（包括功能键）

3.ketpress不识别功能键，但是keyCode区分大小写，返回不同的ASCLL值

案例：模拟京东按键输入内容

 对于一个输入框：

var input = document.querySelector('input');
document.addEventListener('keyup', function (e) {
   if (e.keyCode == 83) {
      input.focus();
   }
})

案例：模拟京东快递单号查询

css：

.search {
   position: relative;
   width: 178px;
   margin: 100px;
}
.con {
   display: none;
   position: absolute;
   top: -40px;
   width: 171px;
   border: 1px solid rgba(0, 0, 0, .2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
   padding: 5px 0;
   font-size: 18px;
   line-height: 20px;
   color: #333;
}
.con::before {
   content: '';
   width: 0;
   height: 0;
   position: absolute;
   top: 100%;
   left: 18px;
   border: 8px solid transparent;
   border-top-color: rgba(0, 0, 0, .2);
}

HTML：

    
123
    

JavaScript：

var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function () {
   if (this.value == '') {
       con.style.display = 'none';
   }
   else {
       con.style.display = 'block';
       con.innerHTML = this.value;
   }
jd_input.addEventListener('blur', function () {
   con.style.display = 'none';
})
jd_input.addEventListener('focus', function () {
   if (this.value == '') {
       con.style.display = 'none';
   }
   else {
       con.style.display = 'block';
   }
})

注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中