Web API介绍及DOM对象（四）

目录

一、注册事件三种方式

1. 传统方式

2. 方法监听注册方式

3. attachEvent( ) 

二、删除事件的三种方式

1. 传统方式

2. 方法监听删除方式

3.  detachEvent( )

三、事件流理论及验证

四、事件对象

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

1. e.target 和 this 的区别

2. 阻止默认行为

3.阻止事件冒泡

4.事件委托

5. 禁止选中文字和禁止右键菜单

5.1 禁止鼠标右键菜单

5.2 禁止鼠标选中( selectstart开始选中)

6.鼠标事件对象

六、常用的键盘事件

---

一、注册事件三种方式

1. 传统方式

利用 on 开头的事件 onclick

<button οnclick="alert('hi~')"></button>

btn.onclick = function(){ }

特点： 注册事件的 唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2. 方法监听注册方式

eventTarget . addEventListener (type, listener[, useCapture])

eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触发指定的事件时, 就会执行事件处理函数

该方法接收三个参数:
● type : 事件类型字符串,比如click、 mouseover ,  注意这里不要带on
● listener : 事件处理函数,事件发生时,会调用该监听函数
● useCapture : 可选参数,是一个布尔值,默认是false
 

3. attachEvent( ) 

 eventTarget . attachEvent (eventNameWithOn, callback)
eventTarget .attachEvent ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触
发指定的事件时,指定的回调函数就会被执行

该方法接收两个参数:
● eventNameWithOn : 事件类型字符串,比如onclick、onmouseover ,这里要带on
● callback:  事件处理函数,当目标触发事件时回调函数被调用

二、删除事件的三种方式

1. 传统方式

 str.onclick = null;把注册事件赋值为  空   即可
str.onclick = function() {
      alert(11);
      str.onclick = null;
}
执行完一次即删除

2. 方法监听删除方式

event.removeEventListener(type,listener [, useCapture]);

因为删除时需要写要删除的事件。所以函数要另外定义

例子：

str.addEventListener('click',fun); //里面的 fn 不需要调用加小括号

function fn( ) {
        alert(22);
       str.removeEventListener('click',fn);
}

3.  detachEvent( )

str.attachEvent('onclick',fn);

function fn() {
   alert(33);
   str.detachEvent('onclick',fn);
}

三、事件流理论及验证

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流

比如我们给一个div 注册了点击事件:

                                                              

DOM事件流分为3个阶段:        

1.捕获阶段
2.当前目标阶段
3.冒泡阶段 

 ●  事件冒泡: IE最早提出,事件开始时由最具体的元素接收,然后逐级向.上传播到到DOM最顶层节点的过程。
 ●  事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。

 注意
1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段
3. addEventListener (type, listener [, useCapture] )第三个参数如果是true ,表示在事件捕
获阶段调用事件处理程序;如果是false (不写默认就是false ) ,表示在事件冒泡阶段调用事件处理
程序
4. 有些事件是没有冒泡的,比如 onblur、onfocus、 onmouseenter、onmouseleave

四、事件对象

1. str.onclick = function(event) {
     console.log(event);
}

2. str.addEventListener ('click',function(event) {
     console.log(event);
})

官方解释： event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

补充： 
1. event 就是一个事件对象，写到我们侦听函数的 小括号里面  当形参来看

2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

3.事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event.它有很多属性和方法

4. 这个事件对象我们可以自己命名 比如 event 、 evt 、e

5.事件对象也有兼容性问题 ie678 通过 window.event 获取，一个字也不能差

6. 解决兼容性问题： e = e || window.event；  console.log(e);

如果识别 e 就输出 e 否则 就另一个

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

事件对象常见属性和方法：

1. e.target 和 this 的区别

div.addEventListener('click', function(e){
       console.log(e.target); //要写这个function 括号里面必须也写 e
       console.log(this);
       console.log(e.currentTarget);
})

区别：
1. e.target 返回的是出发事件的对象（元素）即点了谁返回谁;  this 返回的是绑定事件的对象（元素）即谁绑定的这个点击事件就返回谁.

2. [了解]  跟 this 相似的属性 currentTarget   ie678不认识，返回的也是绑定的对象

2. 阻止默认行为

阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交

一、 方法监听注册方式
str.addEventListener('click', function(e){
        e.preventDefault(); 
         //dom 标准写法
})

二、 传统的注册方式
str.onclick = function(e) {
   //普通浏览器     此为方法，要加 ( )
   e.preventDefault( );
   // 低版本浏览器 ie678   此为属性
    e.returnValue;
   // 利用 return false 也能阻止默认行为  没有兼容性问题  特点： return 后面的代码不执行了而且只限于传统的注册方式
    return false;
    alert(11); 
}
 

3.阻止事件冒泡

1.标准写法：利用事件对象里面的 stopPropagation() 方法

2.非标准写法： IE 6-8 利用事件对象 cancelBubble 属性

son.addEventListener('click', function(e){
    alert('son');
    e.stopPropagation( );
    e.cancelBubble = true;
})

4.事件委托

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

事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

案例:给 ul 注册点击事件，因为点击li,事件会冒泡到ul 上，ul 有注册事件，就会触发事件监听器.如果想要改变所点击 li 的背景颜色，可以利用事件对象的target来找到当前点击的li,改其背景颜色.
事件委托的作用:  只操作一次DOM,提高了程序的性能 

5. 禁止选中文字和禁止右键菜单

5.1 禁止鼠标右键菜单

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

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

5.2 禁止鼠标选中( selectstart开始选中)

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

6.鼠标事件对象

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

   案例：跟随鼠标移动的图标（图片可以随便放一张自己喜欢的）

    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="../images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            pic.style.top = y - 40 + 'px';
            pic.style.left = x - 45 + 'px';
        })
    </script>
</body>

六、常用的键盘事件

事件除了使用鼠标触发,还可以使用键盘触发。

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时 触发

注意:
1.如果使用addEventListener不需要加 on
2. onkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头, shift 等。
3.三个事件的执行顺序是: keydown --- keypress --- keyup
 

案例：按下 s 键获取焦点

 <title>Document</title>
</head>
<body>
    <input type="text">
    
    <script>
        var ipt = document.querySelector('input');
        document.addEventListener('keyup', function(e){
            if(e.keyCode === 83) {
                ipt.focus();
            }
        })
    </script>
</body>