事件机制Dom

注册事件（绑定事件）

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册注册方式

1、传统注册方式

 <button>点击我</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function () {
            alert('你点击了我')
        }
    </script>

1、特点：注册事件的唯一性
2、同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面的注册的处理函数

2、返回发监听注册方式

 <button>点击我</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click',function () {
            alert('第一次点击')
        })
        btn.addEventListener('click',function () {
            alert('第二次点击了我')
        })
    </script>

1、特点、同一个元素同一个事件可以注册多个监听器
2、按注册顺序依次执行

addEventListener事件监听方式

evenTarget.addEventListener（type，listener，userCapture）

该方法接收的三个参数
type：事件类型字符串，比如click、mouSEOver，注意这里不要带on
listener：事件处理函数，实际按发生时，会调用该监听函数
useCappture：可选参数，是一个·布尔值，默认是false。（false或者空表示是冒泡阶段，true表示处于捕获阶段）

attachEvent 事件监听方式

eventTarget.attachEvent（eventNameWithOn，callback）

该方法接收两个参数
1、evennameWithOn：事件类型字符串，比如onclick、onmouSEOver，这里要带on
2、callback：事件处理函数，当目标触发事件时回调函数被调用

注意：该方法IE8及早期版本支持

案例

  <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

删除事件（解绑事件）

1、传统注册方式

eventTarget.onclick = null

2、方法监听注册方式

1、eventTarget.removeEventListener（type，listener，userCapture）

2、eventTarget.detachEvent（eventNameWithOn，callback）

参数和addEvenListener一样

 <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

Dom事件流

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

Dom事件流分为3个阶段：

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

注意：
1、js代码中只能执行捕获或者冒泡其中一个阶段
2、onclick和attachEvent 只能得到冒泡阶段
addEventListener（type，listener[，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（默认是false），表示在事件冒泡阶段调用事件处理程序。

事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})
//这个event就是事件对象

关于event
简单理解就是：事件发生后，跟事件相关的一系列信息数据的集合全都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法，比如：
1、谁绑定了这个事件
2、鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

事件对象的使用语法

eventTarget.onclick = function（event） {
	//这个event就是事件对象
}

eventTarget.addEventListener（'click',function(event){
	//这个event就是事件对象
}）

e.target和this的区别：
this是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target是事件触发的元素

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

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

事件对象阻止默认行为

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

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

2、传统注册方式的阻止默认行为

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

阻止事件冒泡

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

阻止冒泡的两种方式

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

e.stopPropagation()

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

e.cancelBubble = true

  <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件委托（代理、委派）

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

案例：

<ul id="myLinks">
  <li id="li1">Go somewhere</li>
  <li id="li2">Do something</li>
  <li id="li3">Say hi</li>
</ul>
<script>
  var list = document.getElementById("myLinks");
  list.addEventListener("click", function (event) {
    var target = event.target;
    console.log(target);
    switch (target.id) {
      case "li1":
        target.innerHTML = 'SuZhou';
        break;
      case "li2":
        target.innerHTML = 'Coding';
        break;
      case "li3":
        target.innerHTML = 'Hi';
        break;
    }
  });
</script>

常用的鼠标事件

常用的鼠标事件：

鼠标事件	触发条件
onclick	鼠标点击左键触发
ommouSEOver	鼠标经过时触发
onfouce	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedowm	鼠标按下触发

常用的键盘事件

常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘被按下时触发
onkeypress	某个键盘被按下时触发但是它不识别功能键比如ctrl、shift箭头等

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

javascript 前端前端前端前端开发语言

事件机制Dom

注册事件（绑定事件）

addEventListener事件监听方式

attachEvent 事件监听方式

案例

删除事件（解绑事件）

Dom事件流

事件对象

事件对象的使用语法

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

事件对象阻止默认行为

阻止事件冒泡

事件委托（代理、委派）

常用的鼠标事件

常用的键盘事件

相关文章